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 }}

Notice how our view defines two blocks for use in `base.html`.

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 -->