|
| 1 | ++++ |
| 2 | +title = "Go is for Lovers" |
| 3 | +description = "dfadsfasdf" |
| 4 | +tags = [ "xxx", "yyy", "ssss", "vvvvv" ] |
| 5 | +date = "2017-01-01" |
| 6 | +location = "Santa Fe, NM" |
| 7 | +categories = [ |
| 8 | + "", |
| 9 | + "V" |
| 10 | +] |
| 11 | +slug = "dfljasldjflmmmm" |
| 12 | +type = "post" |
| 13 | ++++ |
| 14 | + |
| 15 | +Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for |
| 16 | +its template engine. It is an extremely lightweight engine that provides a very |
| 17 | +small amount of logic. In our experience that it is just the right amount of |
| 18 | +logic to be able to create a good static website. If you have used other |
| 19 | +template systems from different languages or frameworks you will find a lot of |
| 20 | +similarities in go templates. |
| 21 | + |
| 22 | +This document is a brief primer on using go templates. The [go docs][gohtmltemplate] |
| 23 | +provide more details. |
| 24 | + |
| 25 | +## Introduction to Go Templates |
| 26 | + |
| 27 | +Go templates provide an extremely simple template language. It adheres to the |
| 28 | +belief that only the most basic of logic belongs in the template or view layer. |
| 29 | +One consequence of this simplicity is that go templates parse very quickly. |
| 30 | + |
| 31 | +A unique characteristic of go templates is they are content aware. Variables and |
| 32 | +content will be sanitized depending on the context of where they are used. More |
| 33 | +details can be found in the [go docs][gohtmltemplate]. |
| 34 | + |
| 35 | +## Basic Syntax |
| 36 | + |
| 37 | +Go lang templates are html files with the addition of variables and |
| 38 | +functions. |
| 39 | + |
| 40 | +**Go variables and functions are accessible within {{ }}** |
| 41 | + |
| 42 | +Accessing a predefined variable "foo": |
| 43 | + |
| 44 | + {{ foo }} |
| 45 | + |
| 46 | +**Parameters are separated using spaces** |
| 47 | + |
| 48 | +Calling the add function with input of 1, 2: |
| 49 | + |
| 50 | + {{ add 1 2 }} |
| 51 | + |
| 52 | +**Methods and fields are accessed via dot notation** |
| 53 | + |
| 54 | +Accessing the Page Parameter "bar" |
| 55 | + |
| 56 | + {{ .Params.bar }} |
| 57 | + |
| 58 | +**Parentheses can be used to group items together** |
| 59 | + |
| 60 | + {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} |
| 61 | + |
| 62 | + |
| 63 | +## Variables |
| 64 | + |
| 65 | +Each go template has a struct (object) made available to it. In hugo each |
| 66 | +template is passed either a page or a node struct depending on which type of |
| 67 | +page you are rendering. More details are available on the |
| 68 | +[variables](/layout/variables) page. |
| 69 | + |
| 70 | +A variable is accessed by referencing the variable name. |
| 71 | + |
| 72 | + <title>{{ .Title }}</title> |
| 73 | + |
| 74 | +Variables can also be defined and referenced. |
| 75 | + |
| 76 | + {{ $address := "123 Main St."}} |
| 77 | + {{ $address }} |
| 78 | + |
| 79 | + |
| 80 | +## Functions |
| 81 | + |
| 82 | +Go template ship with a few functions which provide basic functionality. The go |
| 83 | +template system also provides a mechanism for applications to extend the |
| 84 | +available functions with their own. [Hugo template |
| 85 | +functions](/layout/functions) provide some additional functionality we believe |
| 86 | +are useful for building websites. Functions are called by using their name |
| 87 | +followed by the required parameters separated by spaces. Template |
| 88 | +functions cannot be added without recompiling hugo. |
| 89 | + |
| 90 | +**Example:** |
| 91 | + |
| 92 | + {{ add 1 2 }} |
| 93 | + |
| 94 | +## Includes |
| 95 | + |
| 96 | +When including another template you will pass to it the data it will be |
| 97 | +able to access. To pass along the current context please remember to |
| 98 | +include a trailing dot. The templates location will always be starting at |
| 99 | +the /layout/ directory within Hugo. |
| 100 | + |
| 101 | +**Example:** |
| 102 | + |
| 103 | + {{ template "chrome/header.html" . }} |
| 104 | + |
| 105 | + |
| 106 | +## Logic |
| 107 | + |
| 108 | +Go templates provide the most basic iteration and conditional logic. |
| 109 | + |
| 110 | +### Iteration |
| 111 | + |
| 112 | +Just like in go, the go templates make heavy use of range to iterate over |
| 113 | +a map, array or slice. The following are different examples of how to use |
| 114 | +range. |
| 115 | + |
| 116 | +**Example 1: Using Context** |
| 117 | + |
| 118 | + {{ range array }} |
| 119 | + {{ . }} |
| 120 | + {{ end }} |
| 121 | + |
| 122 | +**Example 2: Declaring value variable name** |
| 123 | + |
| 124 | + {{range $element := array}} |
| 125 | + {{ $element }} |
| 126 | + {{ end }} |
| 127 | + |
| 128 | +**Example 2: Declaring key and value variable name** |
| 129 | + |
| 130 | + {{range $index, $element := array}} |
| 131 | + {{ $index }} |
| 132 | + {{ $element }} |
| 133 | + {{ end }} |
| 134 | + |
| 135 | +### Conditionals |
| 136 | + |
| 137 | +If, else, with, or, & and provide the framework for handling conditional |
| 138 | +logic in Go Templates. Like range, each statement is closed with `end`. |
| 139 | + |
| 140 | + |
| 141 | +Go Templates treat the following values as false: |
| 142 | + |
| 143 | +* false |
| 144 | +* 0 |
| 145 | +* any array, slice, map, or string of length zero |
| 146 | + |
| 147 | +**Example 1: If** |
| 148 | + |
| 149 | + {{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }} |
| 150 | + |
| 151 | +**Example 2: If -> Else** |
| 152 | + |
| 153 | + {{ if isset .Params "alt" }} |
| 154 | + {{ index .Params "alt" }} |
| 155 | + {{else}} |
| 156 | + {{ index .Params "caption" }} |
| 157 | + {{ end }} |
| 158 | + |
| 159 | +**Example 3: And & Or** |
| 160 | + |
| 161 | + {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} |
| 162 | + |
| 163 | +**Example 4: With** |
| 164 | + |
| 165 | +An alternative way of writing "if" and then referencing the same value |
| 166 | +is to use "with" instead. With rebinds the context `.` within its scope, |
| 167 | +and skips the block if the variable is absent. |
| 168 | + |
| 169 | +The first example above could be simplified as: |
| 170 | + |
| 171 | + {{ with .Params.title }}<h4>{{ . }}</h4>{{ end }} |
| 172 | + |
| 173 | +**Example 5: If -> Else If** |
| 174 | + |
| 175 | + {{ if isset .Params "alt" }} |
| 176 | + {{ index .Params "alt" }} |
| 177 | + {{ else if isset .Params "caption" }} |
| 178 | + {{ index .Params "caption" }} |
| 179 | + {{ end }} |
| 180 | + |
| 181 | +## Pipes |
| 182 | + |
| 183 | +One of the most powerful components of go templates is the ability to |
| 184 | +stack actions one after another. This is done by using pipes. Borrowed |
| 185 | +from unix pipes, the concept is simple, each pipeline's output becomes the |
| 186 | +input of the following pipe. |
| 187 | + |
| 188 | +Because of the very simple syntax of go templates, the pipe is essential |
| 189 | +to being able to chain together function calls. One limitation of the |
| 190 | +pipes is that they only can work with a single value and that value |
| 191 | +becomes the last parameter of the next pipeline. |
| 192 | + |
| 193 | +A few simple examples should help convey how to use the pipe. |
| 194 | + |
| 195 | +**Example 1 :** |
| 196 | + |
| 197 | + {{ if eq 1 1 }} Same {{ end }} |
| 198 | + |
| 199 | +is the same as |
| 200 | + |
| 201 | + {{ eq 1 1 | if }} Same {{ end }} |
| 202 | + |
| 203 | +It does look odd to place the if at the end, but it does provide a good |
| 204 | +illustration of how to use the pipes. |
| 205 | + |
| 206 | +**Example 2 :** |
| 207 | + |
| 208 | + {{ index .Params "disqus_url" | html }} |
| 209 | + |
| 210 | +Access the page parameter called "disqus_url" and escape the HTML. |
| 211 | + |
| 212 | +**Example 3 :** |
| 213 | + |
| 214 | + {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} |
| 215 | + Stuff Here |
| 216 | + {{ end }} |
| 217 | + |
| 218 | +Could be rewritten as |
| 219 | + |
| 220 | + {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }} |
| 221 | + Stuff Here |
| 222 | + {{ end }} |
| 223 | + |
| 224 | + |
| 225 | +## Context (aka. the dot) |
| 226 | + |
| 227 | +The most easily overlooked concept to understand about go templates is that {{ . }} |
| 228 | +always refers to the current context. In the top level of your template this |
| 229 | +will be the data set made available to it. Inside of a iteration it will have |
| 230 | +the value of the current item. When inside of a loop the context has changed. . |
| 231 | +will no longer refer to the data available to the entire page. If you need to |
| 232 | +access this from within the loop you will likely want to set it to a variable |
| 233 | +instead of depending on the context. |
| 234 | + |
| 235 | +**Example:** |
| 236 | + |
| 237 | + {{ $title := .Site.Title }} |
| 238 | + {{ range .Params.tags }} |
| 239 | + <li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li> |
| 240 | + {{ end }} |
| 241 | + |
| 242 | +Notice how once we have entered the loop the value of {{ . }} has changed. We |
| 243 | +have defined a variable outside of the loop so we have access to it from within |
| 244 | +the loop. |
| 245 | + |
| 246 | +# Hugo Parameters |
| 247 | + |
| 248 | +Hugo provides the option of passing values to the template language |
| 249 | +through the site configuration (for sitewide values), or through the meta |
| 250 | +data of each specific piece of content. You can define any values of any |
| 251 | +type (supported by your front matter/config format) and use them however |
| 252 | +you want to inside of your templates. |
| 253 | + |
| 254 | + |
| 255 | +## Using Content (page) Parameters |
| 256 | + |
| 257 | +In each piece of content you can provide variables to be used by the |
| 258 | +templates. This happens in the [front matter](/content/front-matter). |
| 259 | + |
| 260 | +An example of this is used in this documentation site. Most of the pages |
| 261 | +benefit from having the table of contents provided. Sometimes the TOC just |
| 262 | +doesn't make a lot of sense. We've defined a variable in our front matter |
| 263 | +of some pages to turn off the TOC from being displayed. |
| 264 | + |
| 265 | +Here is the example front matter: |
| 266 | + |
| 267 | +``` |
| 268 | +--- |
| 269 | +title: "Permalinks" |
| 270 | +date: "2013-11-18" |
| 271 | +aliases: |
| 272 | + - "/doc/permalinks/" |
| 273 | +groups: ["extras"] |
| 274 | +groups_weight: 30 |
| 275 | +notoc: true |
| 276 | +--- |
| 277 | +``` |
| 278 | + |
| 279 | +Here is the corresponding code inside of the template: |
| 280 | + |
| 281 | + {{ if not .Params.notoc }} |
| 282 | + <div id="toc" class="well col-md-4 col-sm-6"> |
| 283 | + {{ .TableOfContents }} |
| 284 | + </div> |
| 285 | + {{ end }} |
| 286 | + |
| 287 | + |
| 288 | + |
| 289 | +## Using Site (config) Parameters |
| 290 | +In your top-level configuration file (eg, `config.yaml`) you can define site |
| 291 | +parameters, which are values which will be available to you in chrome. |
| 292 | + |
| 293 | +For instance, you might declare: |
| 294 | + |
| 295 | +```yaml |
| 296 | +params: |
| 297 | + CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved." |
| 298 | + TwitterUser: "spf13" |
| 299 | + SidebarRecentLimit: 5 |
| 300 | +``` |
| 301 | +
|
| 302 | +Within a footer layout, you might then declare a `<footer>` which is only |
| 303 | +provided if the `CopyrightHTML` parameter is provided, and if it is given, |
| 304 | +you would declare it to be HTML-safe, so that the HTML entity is not escaped |
| 305 | +again. This would let you easily update just your top-level config file each |
| 306 | +January 1st, instead of hunting through your templates. |
| 307 | + |
| 308 | +``` |
| 309 | +{{if .Site.Params.CopyrightHTML}}<footer> |
| 310 | +<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div> |
| 311 | +</footer>{{end}} |
| 312 | +``` |
| 313 | +
|
| 314 | +An alternative way of writing the "if" and then referencing the same value |
| 315 | +is to use "with" instead. With rebinds the context `.` within its scope, |
| 316 | +and skips the block if the variable is absent: |
| 317 | +
|
| 318 | +``` |
| 319 | +{{with .Site.Params.TwitterUser}}<span class="twitter"> |
| 320 | +<a href="https://twitter.com/{{.}}" rel="author"> |
| 321 | +<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}" |
| 322 | + alt="Twitter"></a> |
| 323 | +</span>{{end}} |
| 324 | +``` |
| 325 | +
|
| 326 | +Finally, if you want to pull "magic constants" out of your layouts, you can do |
| 327 | +so, such as in this example: |
| 328 | +
|
| 329 | +``` |
| 330 | +<nav class="recent"> |
| 331 | + <h1>Recent Posts</h1> |
| 332 | + <ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}} |
| 333 | + <li><a href="{{.RelPermalink}}">{{.Title}}</a></li> |
| 334 | + {{end}}</ul> |
| 335 | +</nav> |
| 336 | +``` |
| 337 | +
|
| 338 | +
|
| 339 | +[go]: <http://golang.org/> |
| 340 | +[gohtmltemplate]: <http://golang.org/pkg/html/template/> |
0 commit comments