Views
Overview
Hemlock uses the Go template engine to render views.
Templates live in resources/templates
and should contain the following sub-folders.
templates/
├── views/
├── layouts/
└── partials/
Templates are usually rendered from within a route. Here’s an
example using the Render
method to render a template.
router.Get("/", func(res h.Response) h.Result {
return res.View(
"home.html", // Template
"base.html", // Layout
map[string]string{
"Name": "Sasha", // Data
},
)
})
Views
A view is the only required item to render a template. Both layout and data are optional. The
Render
method can be used to render a template from within a route.
res.Render("home.html", "", map[string]string{"Name": "Sasha"})
<!-- views/home.html -->
<h1>Hello {{ .Page.Name }}!</h1>
The above example will produce the following HTML.
<h1>Hello Sasha!</h1>
Layouts
Layouts are useful for creating common markup structures that can be reused by multiple views. There are a few template functions needed to use layouts effectively.
<!-- Include a child template by name -->
{{ template "name" . }}
<!-- Include a child template by name but fallback -->
{{ block "name" . }}Fallback{{ end }}
<!-- Define new template by name -->
{{ define "name" }}Some content{{ end }}
Both template
and block
functions are similar and are (usually) used within a layout.
<!-- layouts/base.html -->
<html>
<head>
<title>{{ block "title" }}My Website{{ end }}</title>
</head>
<body>{{ template "content" . }}</body>
</html>
Any templates defined in the view can be referenced by the layout.
<!-- Optional since included by `block` function -->
{{ define "title" }}New Title{{ end }}
{{ define "content" }}
<h1>{{ .Page.Message }}</h1>
{{ end }}
Partial Templates
Partials are small views that can be referenced from within any template. Partials can also reference other partials.
<!-- layouts/base.html -->
<html>
<head>
<title>{{ block "title" }}My Website{{ end }}</title>
{{ partial "favicon.html" }}
</head>
<body>{{ template "content" . }}</body>
</html>
A Complete Example
Here is an example of rendering a view greeting.html
that extends a layout base.html
.
<!-- layouts/base.html -->
<html>
<head>
<title>{{ block "title" . }}Default Title{{ end }}</title>
</head>
<body>
{{ template "content" . }}
</body>
</html>
<!-- greeting.html -->
{{ define "title" }}My Title{{ end }}
{{ define "content" }}
<h1>Hello {{ .Page.Name }}!</h1>
{{ end }}
Now that you have your layout files, we can render the view within a route.
router.Get("/", func(res h.Response) h.Result {
return res.Render("greeting.html", "base.html", map[string]string{
"Name": "Sasha"
})
})
<!-- Resulting HTML -->
<html>
<head>
<title>My Title</title>
</head>
<body>
<h1>Hello Sasha!</h1>
</body>
</html>
Template Functions
asset
builds a path to an asset.
{{ asset "main.css" }}
<!-- http://mysite.com/static/main.css -->
url
builds an absolute URL to an arbitrary path.
{{ url "/foo/bar" }}
<!-- http://mysite.com/foo/bar -->
route
builds an absolute URL from a named route. Here is an example that builds a URL
to a route that looks like this: /user/{id}
.
{{ route "users.show" "id" "123" }}
<!-- http://mysite.com/user/123 -->