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