3d Animation

By Frank Apa October 2, 1998

Family and food go hand in hand here, so designing and making my own kitchen table was something I always wanted to do. I won’t eveer forget my eldest boy as a little boy in teething pain, chomp down on the side of the table. I did’nt feel bad, knowing what I did.

This document is a brief primer on using go templates. The go docs provide more details. Go templates provide an extremely simple template language. It adheres to the belief that only the most basic of logic belongs in the template or view layer. One consequence of this simplicity is that go templates parse very quickly.

A unique characteristic of go templates is they are content aware. Variables and content will be sanitized depending on the context of where they are used. More details can be found in the go docs.

Basic Syntax

A white kitten

Go lang templates are html files with the addition of variables and functions.

Functions

Go template ship with a few functions which provide basic functionality. The go template system also provides a mechanism for applications to extend the available functions with their own. Hugo template functions provide some additional functionality we believe are useful for building websites. Functions are called by using their name followed by the required parameters separated by spaces. Template functions cannot be added without recompiling hugo.

Example:

Functions

Go template ship with a few functions which provide basic functionality. The go template system also provides a mechanism for applications to extend the available functions with their own. Hugo template functions provide some additional functionality we believe are useful for building websites. Functions are called by using their name followed by the required parameters separated by spaces. Template functions cannot be added without recompiling hugo.

Example:

{{ add 1 2 }}

A white kitten

Go variables and functions are accessible within {{ }}

Accessing a predefined variable “foo”:

{{ foo }}

Parameters are separated using spaces

Calling the add function with input of 1, 2:

A white kitten
{{ add 1 2 }}

Methods and fields are accessed via dot notation

Accessing the Page Parameter "bar"

A white kitten
{{ .Params.bar }}

Parentheses can be used to group items together

Variables

Each go template has a struct (object) made available to it. In hugo each template is passed either a page or a node struct depending on which type of page you are rendering. More details are available on the variables page.

A variable is accessed by referencing the variable name.

<title>{{ .Title }}</title>

Variables can also be defined and referenced.

{{ $address := "123 Main St."}}
{{ $address }}
A white kitten

Functions

Go template ship with a few functions which provide basic functionality. The go template system also provides a mechanism for applications to extend the available functions with their own. Hugo template functions provide some additional functionality we believe

Using Site (config) Parameters

In your top-level configuration file (eg, config.yaml) you can define site parameters, which are values which will be available to you in chrome.

For instance, you might declare:

params:
  CopyrightHTML: "Copyright &#xA9; 2013 John Doe. All Rights Reserved."
  TwitterUser: "spf13"
  SidebarRecentLimit: 5

Within a footer layout, you might then declare a <footer> which is only provided if the CopyrightHTML parameter is provided, and if it is given, you would declare it to be HTML-safe, so that the HTML entity is not escaped again. This would let you easily update just your top-level config file each January 1st, instead of hunting through your templates.

{{if .Site.Params.CopyrightHTML}}<footer>
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
</footer>{{end}}

An alternative way of writing the “if” and then referencing the same value is to use “with” instead. With rebinds the context . within its scope, and skips the block if the variable is absent:

{{with .Site.Params.TwitterUser}}<span class="twitter">
<a href="https://twitter.com/{{.}}" rel="author">
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
 alt="Twitter"></a>
</span>{{end}}

Finally, if you want to pull “magic constants” out of your layouts, you can do so, such as in this example:

<nav class="recent">
  <h1>Recent Posts</h1>
  <ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
    <li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
  {{end}}</ul>
</nav>
comments powered by Disqus