Table of Contents
- Introduction to HTML/template Package
- Setting Up
- Creating Templates
- Executing Templates
- Passing Data to Templates
- Conditionals and Loops
- Custom Functions
- Template Composition
-
Introduction to HTML/template Package
Go’s html/template package provides a powerful and flexible way to generate HTML content using templates. It is designed to keep the HTML and Go code completely separated, making it easier to maintain and collaborate with web designers. In this tutorial, we will explore the various features of the html/template package and learn how to create dynamic HTML pages using Go.
By the end of this tutorial, you will be able to:
- Understand the basic usage of the
html/templatepackage - Create and execute templates
- Pass data to templates and render dynamic content
- Use conditionals and loops in templates
- Define and use custom functions in templates
- Compose and include templates for better code organization
Before starting this tutorial, make sure you have Go installed on your machine and have a basic understanding of Go programming language concepts.
Setting Up
To get started, create a new Go project and import the html/template package.
package main
import (
"html/template"
"os"
)
Creating Templates
Templates in Go are created using the template.New() function. Let’s start by creating a simple template that renders a static HTML page.
const tmpl = `
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a static HTML page.</p>
</body>
</html>
`
func main() {
t := template.Must(template.New("mytemplate").Parse(tmpl))
err := t.Execute(os.Stdout, nil)
if err != nil {
panic(err)
}
}
In the above example, we defined a constant tmpl that contains our HTML template code. We create a new template using template.New() and parse the template using Parse(). We pass the template name as the first parameter to New() and the template string as the parameter to Parse().
To execute the template and render the HTML, we use the Execute() method and provide os.Stdout as the output writer. The nil value passed as data means there is no dynamic data to be passed to the template.
Executing Templates
Now that we know how to create templates, let’s explore how to execute them by passing data.
const tmpl = `
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website, {{ .Name }}</h1>
</body>
</html>
`
type User struct {
Name string
}
func main() {
t := template.Must(template.New("mytemplate").Parse(tmpl))
user := User{Name: "John Doe"}
err := t.Execute(os.Stdout, user)
if err != nil {
panic(err)
}
}
In this example, we added a placeholder {{ .Name }} in the template to display the user’s name dynamically. We also defined a User struct with a Name field. When executing the template, we pass an instance of the User struct as the data parameter. The . inside the placeholder refers to the data passed to the template.
Passing Data to Templates
Templates become powerful when we can pass dynamic data to them. Let’s see how we can pass different types of data to the template.
const tmpl = `
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website, {{ .Name }}</h1>
<p>Your age is: {{ .Age }}</p>
<p>{{ range .Languages }} {{ . }} {{ end }}</p>
</body>
</html>
`
type Person struct {
Name string
Age int
Languages []string
}
func main() {
t := template.Must(template.New("mytemplate").Parse(tmpl))
person := Person{
Name: "Alice",
Age: 25,
Languages: []string{"Go", "JavaScript", "Python"},
}
err := t.Execute(os.Stdout, person)
if err != nil {
panic(err)
}
}
In this example, we defined a Person struct with Name, Age, and Languages attributes. In the template, we use {{ .Name }} to display the person’s name, {{ .Age }} for the age, and {{ range .Languages }} {{ . }} {{ end }} to display the list of languages using a loop.
Conditionals and Loops
Conditionals and loops can be used in templates to create dynamic content based on certain conditions or iterate over collections.
const tmpl = `
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
{{ if .IsLoggedIn }}
<h1>Welcome, {{ .Username }}</h1>
<p>Your email address is {{ .Email }}</p>
{{ else }}
<h1>Welcome to my website</h1>
<p>Please <a href="/login">log in</a> to continue</p>
{{ end }}
<h2>Recent Posts</h2>
{{ range .Posts }}
<h3>{{ .Title }}</h3>
<p>{{ .Content }}</p>
{{ else }}
<p>No posts found</p>
{{ end }}
</body>
</html>
`
type User struct {
IsLoggedIn bool
Username string
Email string
Posts []Post
}
type Post struct {
Title string
Content string
}
func main() {
t := template.Must(template.New("mytemplate").Parse(tmpl))
user := User{
IsLoggedIn: true,
Username: "John Doe",
Email: "[email protected]",
Posts: []Post{
{Title: "First Post", Content: "This is my first post"},
{Title: "Second Post", Content: "This is my second post"},
},
}
err := t.Execute(os.Stdout, user)
if err != nil {
panic(err)
}
}
In this example, we expanded the User struct to include an IsLoggedIn field indicating if the user is logged in, and a list of Posts. In the template, we use the {{ if .IsLoggedIn }} and {{ else }} to conditionally render content based on whether the user is logged in or not. Furthermore, we use {{ range .Posts }} to iterate over posts and display their titles and content. If there are no posts, the {{ else }} block is executed.
Custom Functions
Go allows us to define custom functions that can be used in templates. Let’s see how we can define and use a custom function to format dates.
const tmpl = `
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Today's Date: {{ .Date | formatDate }}</h1>
</body>
</html>
`
type Data struct {
Date time.Time
}
func main() {
t := template.Must(template.New("mytemplate").Funcs(template.FuncMap{
"formatDate": func(date time.Time) string {
return date.Format("January 2, 2006")
},
}).Parse(tmpl))
data := Data{
Date: time.Now(),
}
err := t.Execute(os.Stdout, data)
if err != nil {
panic(err)
}
}
In this example, we defined a custom function formatDate that takes a time.Time parameter. Inside the function, we format the date using the desired layout. We then use the Funcs() method to register the custom function and pass it to the template.
Template Composition
Templates can be composed and included within other templates to create a modular and reusable structure. Let’s see how we can create a base template and include a child template.
const baseTmpl = `
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
{{ template "content" . }}
<footer>© 2022 My Website</footer>
</body>
</html>
`
const childTmpl = `
{{ define "content" }}
<h1>Welcome to my website</h1>
<p>This is the content section of my website.</p>
{{ end }}
`
func main() {
t := template.Must(template.New("base").Parse(baseTmpl))
t = template.Must(t.New("child").Parse(childTmpl))
err := t.ExecuteTemplate(os.Stdout, "base", nil)
if err != nil {
panic(err)
}
}
In this example, we defined a base template baseTmpl that contains the common structure of our website. The {{ template "content" . }} placeholder is used to include the content section, which is defined in the child template childTmpl using the {{ define "content" }} {{ end }} syntax.
To execute the template, we use ExecuteTemplate() instead of Execute() and pass the name of the base template along with the data.
Conclusion
In this tutorial, we dived deep into Go’s html/template package and learned how to create dynamic HTML pages using templates. We covered the basics of creating templates, executing them with data, passing different types of data, using conditionals and loops, defining custom functions, and composing templates.
The html/template package provides a clean and efficient way to generate HTML content in Go, separating the HTML structure from the Go code. With the knowledge gained from this tutorial, you can now create powerful and dynamic web applications using Go.
Remember to experiment and practice with the html/template package to fully grasp its capabilities. Happy coding!