Most web apps share a common layout across different views. This common layout may include a header or a footer and even a navigation menu. Go's batteries-included standard library provides an easy way to create these common elements that can be reused in different views to create a "Master Page"-like effect.
This basic example demonstrates how:
Let's create a simple web app that has 2 views - a Main view and an About view. Both these views have the same header and footer sections.
The header template is defined in a file named header.html
| {{define "header"}} | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>{{.Title}}</title> | |
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> | |
| <style type="text/css"> | |
| body {padding-bottom: 70px;} | |
| .content {margin:10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-default" role="navigation"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="/">Go App</a> | |
| </div> | |
| <div class="collapse navbar-collapse navbar-ex1-collapse"> | |
| <ul class="nav navbar-nav"> | |
| <li><a href="/">Main</a></li> | |
| <li><a href="/about">About</a></li> | |
| </ul> | |
| </div> | |
| </nav> | |
| {{end}} |
The footer template is defined in a file named footer.html
The Main template is defined in a file named main.html
| {{define "main"}} | |
| {{template "header" .}} | |
| <div class="content"> | |
| <h2>Main</h2> | |
| <div>This is the Main page</div> | |
| </div> | |
| {{template "footer" .}} | |
| {{end}} |
The About template is defined in a file name about.html
| {{define "about"}} | |
| {{template "header" .}} | |
| <div class="content"> | |
| <h2>About</h2> | |
| <div>This is the About page</div> | |
| </div> | |
| {{template "footer" .}} | |
| {{end}} |
And here's the code that serves it up.
| package main | |
| import ( | |
| "html/template" | |
| "net/http" | |
| ) | |
| //Compile templates on start | |
| var templates = template.Must(template.ParseFiles("header.html", "footer.html", "main.html", "about.html")) | |
| //A Page structure | |
| type Page struct { | |
| Title string | |
| } | |
| //Display the named template | |
| func display(w http.ResponseWriter, tmpl string, data interface{}) { | |
| templates.ExecuteTemplate(w, tmpl, data) | |
| } | |
| //The handlers. | |
| func mainHandler(w http.ResponseWriter, r *http.Request) { | |
| display(w, "main", &Page{Title: "Home"}) | |
| } | |
| func aboutHandler(w http.ResponseWriter, r *http.Request) { | |
| display(w, "about", &Page{Title: "About"}) | |
| } | |
| func main() { | |
| http.HandleFunc("/", mainHandler) | |
| http.HandleFunc("/about", aboutHandler) | |
| //Listen on port 8080 | |
| http.ListenAndServe(":8080", nil) | |
| } |
Each of the above templates has a name defined using the {{define "name"}} action. The Main and About templates include the header and footer templates using the {{template "name" .}} action. The '.' passes in the context to the named template. Now whenever the Main and About templates are executed, the header and footer will get included and inserted at the required location. That's all there is to it.
This is how the 2 views look.
This technique can also be used to create different layouts for different sections of the web app; for example, the administration section may look different from the user section. We just need to name our templates appropriately and include them where required.
