{{ end }}
127 |
128 | {{ end }}
129 |
130 |
131 |
132 | ### Usage
133 | I simply changed:
134 |
135 | {% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
136 |
137 | to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`):
138 |
139 | {{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}}
140 |
141 | As a bonus, the shortcode named parameters are, arguably, more readable.
142 |
143 | ## Finishing touches
144 | ### Fix content
145 | Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that `hugo server --watch` is your friend. Test your changes and fix errors as needed.
146 |
147 | ### Clean up
148 | You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it.
149 |
150 | ## A practical example in a diff
151 | [Hey, it's Alex](http://heyitsalex.net/) was migrated in less than a _father-with-kids day_ from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this [diff](https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610).
--------------------------------------------------------------------------------
/assets/scss/cayman.scss:
--------------------------------------------------------------------------------
1 | // Breakpoints
2 | $large-breakpoint: {{ $.Site.Params.large_breakpoint | default "64em" }} !default;
3 | $medium-breakpoint: {{ $.Site.Params.medium_breakpoint | default "42em" }} !default;
4 |
5 | // Headers
6 | $header-heading-color: {{ $.Site.Params.header_heading_color | default "#fff" }} !default;
7 | $header-bg-color: {{ $.Site.Params.header_background_color | default "#159957" }} !default;
8 | $header-bg-color-secondary: {{ $.Site.Params.header_background_color_secondary | default "#155799" }} !default;
9 |
10 | // Text
11 | $section-headings-color: {{ $.Site.Params.section_headings_color | default "#159957" }} !default;
12 | $body-text-color: {{ $.Site.Params.body_text_color | default "#606c71" }} !default;
13 | $body-link-color: {{ $.Site.Params.body_link_color | default "#1e6bb8" }} !default;
14 | $blockquote-text-color: {{ $.Site.Params.blockquote_text_color | default "#819198" }} !default;
15 |
16 | // Code
17 | $code-bg-color: {{ $.Site.Params.code_background_color | default "#f3f6fa" }} !default;
18 | $code-text-color: {{ $.Site.Params.code_text_color | default "#567482" }} !default;
19 |
20 | // Borders
21 | $border-color: {{ $.Site.Params.border_color | default "#dce6f0" }} !default;
22 | $table-border-color: {{ $.Site.Params.table_border_color | default "#e9ebec" }} !default;
23 | $hr-border-color: {{ $.Site.Params.hr_border_color | default "#eff0f1" }} !default;
24 |
25 | @mixin large {
26 | @media screen and (min-width: #{$large-breakpoint}) {
27 | @content;
28 | }
29 | }
30 |
31 | @mixin medium {
32 | @media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {
33 | @content;
34 | }
35 | }
36 |
37 | @mixin small {
38 | @media screen and (max-width: #{$medium-breakpoint}) {
39 | @content;
40 | }
41 | }
42 |
43 | * {
44 | box-sizing: border-box;
45 | }
46 |
47 | body {
48 | padding: 0;
49 | margin: 0;
50 | font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
51 | font-size: 16px;
52 | line-height: 1.5;
53 | color: $body-text-color;
54 | }
55 |
56 | a {
57 | color: $body-link-color;
58 | text-decoration: none;
59 |
60 | &:hover {
61 | text-decoration: underline;
62 | }
63 | }
64 |
65 | .btn {
66 | display: inline-block;
67 | margin-bottom: 1rem;
68 | color: rgba(255, 255, 255, 0.7);
69 | background-color: rgba(255, 255, 255, 0.08);
70 | border-color: rgba(255, 255, 255, 0.2);
71 | border-style: solid;
72 | border-width: 1px;
73 | border-radius: 0.3rem;
74 | transition: color 0.2s, background-color 0.2s, border-color 0.2s;
75 |
76 | &:hover {
77 | color: rgba(255, 255, 255, 0.8);
78 | text-decoration: none;
79 | background-color: rgba(255, 255, 255, 0.2);
80 | border-color: rgba(255, 255, 255, 0.3);
81 | }
82 |
83 | + .btn {
84 | margin-left: 1rem;
85 | }
86 |
87 | @include large {
88 | padding: 0.75rem 1rem;
89 | }
90 |
91 | @include medium {
92 | padding: 0.6rem 0.9rem;
93 | font-size: 0.9rem;
94 | }
95 |
96 | @include small {
97 | padding: 0.75rem;
98 | font-size: 0.9rem;
99 | }
100 | }
101 |
102 | .page-header {
103 | color: $header-heading-color;
104 | text-align: center;
105 | background-color: $header-bg-color;
106 | background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
107 |
108 | @include large {
109 | padding: 5rem 6rem;
110 | }
111 |
112 | @include medium {
113 | padding: 3rem 4rem;
114 | }
115 |
116 | @include small {
117 | padding: 2rem 1rem;
118 | }
119 | }
120 |
121 | .project-name {
122 | margin-top: 0;
123 | margin-bottom: 0.1rem;
124 |
125 | @include large {
126 | font-size: 3.25rem;
127 | }
128 |
129 | @include medium {
130 | font-size: 2.25rem;
131 | }
132 |
133 | @include small {
134 | font-size: 1.75rem;
135 | }
136 | }
137 |
138 | .project-tagline {
139 | margin-bottom: 2rem;
140 | font-weight: normal;
141 | opacity: 0.7;
142 |
143 | @include large {
144 | font-size: 1.25rem;
145 | }
146 |
147 | @include medium {
148 | font-size: 1.15rem;
149 | }
150 |
151 | @include small {
152 | font-size: 1rem;
153 | }
154 | }
155 |
156 | .main-content {
157 | word-wrap: break-word;
158 |
159 | :first-child {
160 | margin-top: 0;
161 | }
162 |
163 | @include large {
164 | max-width: 64rem;
165 | padding: 2rem 6rem;
166 | margin: 0 auto;
167 | font-size: 1.1rem;
168 | }
169 |
170 | @include medium {
171 | padding: 2rem 4rem;
172 | font-size: 1.1rem;
173 | }
174 |
175 | @include small {
176 | padding: 2rem 1rem;
177 | font-size: 1rem;
178 | }
179 |
180 | img {
181 | max-width: 100%;
182 | }
183 |
184 | h1,
185 | h2,
186 | h3,
187 | h4,
188 | h5,
189 | h6 {
190 | margin-top: 2rem;
191 | margin-bottom: 1rem;
192 | font-weight: normal;
193 | color: $section-headings-color;
194 | }
195 |
196 | p {
197 | margin-bottom: 1em;
198 | }
199 |
200 | code {
201 | padding: 2px 4px;
202 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
203 | font-size: 0.9em;
204 | color: $code-text-color;
205 | background-color: $code-bg-color;
206 | border-radius: 0.3rem;
207 | }
208 |
209 | pre {
210 | padding: 0.8rem;
211 | margin-top: 0;
212 | margin-bottom: 1rem;
213 | font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
214 | color: $code-text-color;
215 | word-wrap: normal;
216 | background-color: $code-bg-color;
217 | border: solid 1px $border-color;
218 | border-radius: 0.3rem;
219 |
220 | > code {
221 | padding: 0;
222 | margin: 0;
223 | font-size: 0.9rem;
224 | color: $code-text-color;
225 | word-break: normal;
226 | white-space: pre;
227 | background: transparent;
228 | border: 0;
229 | }
230 | }
231 |
232 | .highlight {
233 | margin-bottom: 1rem;
234 |
235 | pre {
236 | margin-bottom: 0;
237 | word-break: normal;
238 | }
239 | }
240 |
241 | .highlight pre,
242 | pre {
243 | padding: 0.8rem;
244 | overflow: auto;
245 | font-size: 0.9rem;
246 | line-height: 1.45;
247 | border-radius: 0.3rem;
248 | -webkit-overflow-scrolling: touch;
249 | }
250 |
251 | pre code,
252 | pre tt {
253 | display: inline;
254 | max-width: initial;
255 | padding: 0;
256 | margin: 0;
257 | overflow: initial;
258 | line-height: inherit;
259 | word-wrap: normal;
260 | background-color: transparent;
261 | border: 0;
262 |
263 | &:before,
264 | &:after {
265 | content: normal;
266 | }
267 | }
268 |
269 | ul,
270 | ol {
271 | margin-top: 0;
272 | }
273 |
274 | blockquote {
275 | padding: 0 1rem;
276 | margin-left: 0;
277 | color: $blockquote-text-color;
278 | border-left: 0.3rem solid $border-color;
279 |
280 | > :first-child {
281 | margin-top: 0;
282 | }
283 |
284 | > :last-child {
285 | margin-bottom: 0;
286 | }
287 | }
288 |
289 | table {
290 | display: block;
291 | width: 100%;
292 | overflow: auto;
293 | word-break: normal;
294 | word-break: keep-all; // For Firefox to horizontally scroll wider tables.
295 | -webkit-overflow-scrolling: touch;
296 |
297 | th {
298 | font-weight: bold;
299 | }
300 |
301 | th,
302 | td {
303 | padding: 0.5rem 1rem;
304 | border: 1px solid $table-border-color;
305 | }
306 | }
307 |
308 | dl {
309 | padding: 0;
310 |
311 | dt {
312 | padding: 0;
313 | margin-top: 1rem;
314 | font-size: 1rem;
315 | font-weight: bold;
316 | }
317 |
318 | dd {
319 | padding: 0;
320 | margin-bottom: 1rem;
321 | }
322 | }
323 |
324 | hr {
325 | height: 2px;
326 | padding: 0;
327 | margin: 1rem 0;
328 | background-color: $hr-border-color;
329 | border: 0;
330 | }
331 | }
332 |
333 | .site-footer {
334 | padding-top: 2rem;
335 | margin-top: 2rem;
336 | border-top: solid 1px $hr-border-color;
337 |
338 | @include large {
339 | font-size: 1rem;
340 | }
341 |
342 | @include medium {
343 | font-size: 1rem;
344 | }
345 |
346 | @include small {
347 | font-size: 0.9rem;
348 | }
349 | }
350 |
351 | .site-footer-owner {
352 | display: block;
353 | font-weight: bold;
354 | }
355 |
356 | .site-footer-credits {
357 | color: $blockquote-text-color;
358 | }
359 |
--------------------------------------------------------------------------------
/static/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability when focused and also mouse hovered in all browsers.
95 | */
96 |
97 | a:active,
98 | a:hover {
99 | outline: 0;
100 | }
101 |
102 | /* Text-level semantics
103 | ========================================================================== */
104 |
105 | /**
106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 | */
108 |
109 | abbr[title] {
110 | border-bottom: 1px dotted;
111 | }
112 |
113 | /**
114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 | */
116 |
117 | b,
118 | strong {
119 | font-weight: bold;
120 | }
121 |
122 | /**
123 | * Address styling not present in Safari and Chrome.
124 | */
125 |
126 | dfn {
127 | font-style: italic;
128 | }
129 |
130 | /**
131 | * Address variable `h1` font-size and margin within `section` and `article`
132 | * contexts in Firefox 4+, Safari, and Chrome.
133 | */
134 |
135 | h1 {
136 | font-size: 2em;
137 | margin: 0.67em 0;
138 | }
139 |
140 | /**
141 | * Address styling not present in IE 8/9.
142 | */
143 |
144 | mark {
145 | background: #ff0;
146 | color: #000;
147 | }
148 |
149 | /**
150 | * Address inconsistent and variable font size in all browsers.
151 | */
152 |
153 | small {
154 | font-size: 80%;
155 | }
156 |
157 | /**
158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 | */
160 |
161 | sub,
162 | sup {
163 | font-size: 75%;
164 | line-height: 0;
165 | position: relative;
166 | vertical-align: baseline;
167 | }
168 |
169 | sup {
170 | top: -0.5em;
171 | }
172 |
173 | sub {
174 | bottom: -0.25em;
175 | }
176 |
177 | /* Embedded content
178 | ========================================================================== */
179 |
180 | /**
181 | * Remove border when inside `a` element in IE 8/9/10.
182 | */
183 |
184 | img {
185 | border: 0;
186 | }
187 |
188 | /**
189 | * Correct overflow not hidden in IE 9/10/11.
190 | */
191 |
192 | svg:not(:root) {
193 | overflow: hidden;
194 | }
195 |
196 | /* Grouping content
197 | ========================================================================== */
198 |
199 | /**
200 | * Address margin not present in IE 8/9 and Safari.
201 | */
202 |
203 | figure {
204 | margin: 1em 40px;
205 | }
206 |
207 | /**
208 | * Address differences between Firefox and other browsers.
209 | */
210 |
211 | hr {
212 | box-sizing: content-box;
213 | height: 0;
214 | }
215 |
216 | /**
217 | * Contain overflow in all browsers.
218 | */
219 |
220 | pre {
221 | overflow: auto;
222 | }
223 |
224 | /**
225 | * Address odd `em`-unit font size rendering in all browsers.
226 | */
227 |
228 | code,
229 | kbd,
230 | pre,
231 | samp {
232 | font-family: monospace, monospace;
233 | font-size: 1em;
234 | }
235 |
236 | /* Forms
237 | ========================================================================== */
238 |
239 | /**
240 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
241 | * styling of `select`, unless a `border` property is set.
242 | */
243 |
244 | /**
245 | * 1. Correct color not being inherited.
246 | * Known issue: affects color of disabled elements.
247 | * 2. Correct font properties not being inherited.
248 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
249 | */
250 |
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 | color: inherit; /* 1 */
257 | font: inherit; /* 2 */
258 | margin: 0; /* 3 */
259 | }
260 |
261 | /**
262 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
263 | */
264 |
265 | button {
266 | overflow: visible;
267 | }
268 |
269 | /**
270 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 | * All other form control elements do not inherit `text-transform` values.
272 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
273 | * Correct `select` style inheritance in Firefox.
274 | */
275 |
276 | button,
277 | select {
278 | text-transform: none;
279 | }
280 |
281 | /**
282 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 | * and `video` controls.
284 | * 2. Correct inability to style clickable `input` types in iOS.
285 | * 3. Improve usability and consistency of cursor style between image-type
286 | * `input` and others.
287 | */
288 |
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 | -webkit-appearance: button; /* 2 */
294 | cursor: pointer; /* 3 */
295 | }
296 |
297 | /**
298 | * Re-set default cursor for disabled elements.
299 | */
300 |
301 | button[disabled],
302 | html input[disabled] {
303 | cursor: default;
304 | }
305 |
306 | /**
307 | * Remove inner padding and border in Firefox 4+.
308 | */
309 |
310 | button::-moz-focus-inner,
311 | input::-moz-focus-inner {
312 | border: 0;
313 | padding: 0;
314 | }
315 |
316 | /**
317 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
318 | * the UA stylesheet.
319 | */
320 |
321 | input {
322 | line-height: normal;
323 | }
324 |
325 | /**
326 | * It's recommended that you don't attempt to style these elements.
327 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
328 | *
329 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
330 | * 2. Remove excess padding in IE 8/9/10.
331 | */
332 |
333 | input[type="checkbox"],
334 | input[type="radio"] {
335 | box-sizing: border-box; /* 1 */
336 | padding: 0; /* 2 */
337 | }
338 |
339 | /**
340 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
341 | * `font-size` values of the `input`, it causes the cursor style of the
342 | * decrement button to change from `default` to `text`.
343 | */
344 |
345 | input[type="number"]::-webkit-inner-spin-button,
346 | input[type="number"]::-webkit-outer-spin-button {
347 | height: auto;
348 | }
349 |
350 | /**
351 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
352 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
353 | * (include `-moz` to future-proof).
354 | */
355 |
356 | input[type="search"] {
357 | -webkit-appearance: textfield; /* 1 */ /* 2 */
358 | box-sizing: content-box;
359 | }
360 |
361 | /**
362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 | * Safari (but not Chrome) clips the cancel button when the search input has
364 | * padding (and `textfield` appearance).
365 | */
366 |
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 | -webkit-appearance: none;
370 | }
371 |
372 | /**
373 | * Define consistent border, margin, and padding.
374 | */
375 |
376 | fieldset {
377 | border: 1px solid #c0c0c0;
378 | margin: 0 2px;
379 | padding: 0.35em 0.625em 0.75em;
380 | }
381 |
382 | /**
383 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 | */
386 |
387 | legend {
388 | border: 0; /* 1 */
389 | padding: 0; /* 2 */
390 | }
391 |
392 | /**
393 | * Remove default vertical scrollbar in IE 8/9/10/11.
394 | */
395 |
396 | textarea {
397 | overflow: auto;
398 | }
399 |
400 | /**
401 | * Don't inherit the `font-weight` (applied by a rule above).
402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 | */
404 |
405 | optgroup {
406 | font-weight: bold;
407 | }
408 |
409 | /* Tables
410 | ========================================================================== */
411 |
412 | /**
413 | * Remove most spacing between table cells.
414 | */
415 |
416 | table {
417 | border-collapse: collapse;
418 | border-spacing: 0;
419 | }
420 |
421 | td,
422 | th {
423 | padding: 0;
424 | }
425 |
--------------------------------------------------------------------------------
/exampleSite/content/post/hugo-template-primer/index.md:
--------------------------------------------------------------------------------
1 | +++
2 | title = "(Hu)go Template Primer"
3 | date = "2014-04-02"
4 | tags = [
5 | "go",
6 | "golang",
7 | "hugo",
8 | "templates",
9 | "themes",
10 | "development",
11 | ]
12 | +++
13 |
14 | Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for
15 | its template engine. It is an extremely lightweight engine that provides a very
16 | small amount of logic. In our experience that it is just the right amount of
17 | logic to be able to create a good static website. If you have used other
18 | template systems from different languages or frameworks you will find a lot of
19 | similarities in Go templates.
20 |
21 | This document is a brief primer on using Go templates. The [Go docs][gohtmltemplate]
22 | provide more details.
23 |
24 | ## Introduction to Go Templates
25 |
26 | Go templates provide an extremely simple template language. It adheres to the
27 | belief that only the most basic of logic belongs in the template or view layer.
28 | One consequence of this simplicity is that Go templates parse very quickly.
29 |
30 | A unique characteristic of Go templates is they are content aware. Variables and
31 | content will be sanitized depending on the context of where they are used. More
32 | details can be found in the [Go docs][gohtmltemplate].
33 |
34 | ## Basic Syntax
35 |
36 | Golang templates are HTML files with the addition of variables and
37 | functions.
38 |
39 | **Go variables and functions are accessible within {{ }}**
40 |
41 | Accessing a predefined variable "foo":
42 |
43 | {{ foo }}
44 |
45 | **Parameters are separated using spaces**
46 |
47 | Calling the add function with input of 1, 2:
48 |
49 | {{ add 1 2 }}
50 |
51 | **Methods and fields are accessed via dot notation**
52 |
53 | Accessing the Page Parameter "bar"
54 |
55 | {{ .Params.bar }}
56 |
57 | **Parentheses can be used to group items together**
58 |
59 | {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
60 |
61 |
62 | ## Variables
63 |
64 | Each Go template has a struct (object) made available to it. In hugo each
65 | template is passed either a page or a node struct depending on which type of
66 | page you are rendering. More details are available on the
67 | [variables](/layout/variables) page.
68 |
69 | A variable is accessed by referencing the variable name.
70 |
71 | {{ .Title }}
72 |
73 | Variables can also be defined and referenced.
74 |
75 | {{ $address := "123 Main St."}}
76 | {{ $address }}
77 |
78 |
79 | ## Functions
80 |
81 | Go template ship with a few functions which provide basic functionality. The Go
82 | template system also provides a mechanism for applications to extend the
83 | available functions with their own. [Hugo template
84 | functions](/layout/functions) provide some additional functionality we believe
85 | are useful for building websites. Functions are called by using their name
86 | followed by the required parameters separated by spaces. Template
87 | functions cannot be added without recompiling hugo.
88 |
89 | **Example:**
90 |
91 | {{ add 1 2 }}
92 |
93 | ## Includes
94 |
95 | When including another template you will pass to it the data it will be
96 | able to access. To pass along the current context please remember to
97 | include a trailing dot. The templates location will always be starting at
98 | the /layout/ directory within Hugo.
99 |
100 | **Example:**
101 |
102 | {{ template "chrome/header.html" . }}
103 |
104 |
105 | ## Logic
106 |
107 | Go templates provide the most basic iteration and conditional logic.
108 |
109 | ### Iteration
110 |
111 | Just like in Go, the Go templates make heavy use of range to iterate over
112 | a map, array or slice. The following are different examples of how to use
113 | range.
114 |
115 | **Example 1: Using Context**
116 |
117 | {{ range array }}
118 | {{ . }}
119 | {{ end }}
120 |
121 | **Example 2: Declaring value variable name**
122 |
123 | {{range $element := array}}
124 | {{ $element }}
125 | {{ end }}
126 |
127 | **Example 2: Declaring key and value variable name**
128 |
129 | {{range $index, $element := array}}
130 | {{ $index }}
131 | {{ $element }}
132 | {{ end }}
133 |
134 | ### Conditionals
135 |
136 | If, else, with, or, & and provide the framework for handling conditional
137 | logic in Go Templates. Like range, each statement is closed with `end`.
138 |
139 |
140 | Go Templates treat the following values as false:
141 |
142 | * false
143 | * 0
144 | * any array, slice, map, or string of length zero
145 |
146 | **Example 1: If**
147 |
148 | {{ if isset .Params "title" }}
{{ index .Params "title" }}
{{ end }}
149 |
150 | **Example 2: If -> Else**
151 |
152 | {{ if isset .Params "alt" }}
153 | {{ index .Params "alt" }}
154 | {{else}}
155 | {{ index .Params "caption" }}
156 | {{ end }}
157 |
158 | **Example 3: And & Or**
159 |
160 | {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
161 |
162 | **Example 4: With**
163 |
164 | An alternative way of writing "if" and then referencing the same value
165 | is to use "with" instead. With rebinds the context `.` within its scope,
166 | and skips the block if the variable is absent.
167 |
168 | The first example above could be simplified as:
169 |
170 | {{ with .Params.title }}
{{ . }}
{{ end }}
171 |
172 | **Example 5: If -> Else If**
173 |
174 | {{ if isset .Params "alt" }}
175 | {{ index .Params "alt" }}
176 | {{ else if isset .Params "caption" }}
177 | {{ index .Params "caption" }}
178 | {{ end }}
179 |
180 | ## Pipes
181 |
182 | One of the most powerful components of Go templates is the ability to
183 | stack actions one after another. This is done by using pipes. Borrowed
184 | from unix pipes, the concept is simple, each pipeline's output becomes the
185 | input of the following pipe.
186 |
187 | Because of the very simple syntax of Go templates, the pipe is essential
188 | to being able to chain together function calls. One limitation of the
189 | pipes is that they only can work with a single value and that value
190 | becomes the last parameter of the next pipeline.
191 |
192 | A few simple examples should help convey how to use the pipe.
193 |
194 | **Example 1 :**
195 |
196 | {{ if eq 1 1 }} Same {{ end }}
197 |
198 | is the same as
199 |
200 | {{ eq 1 1 | if }} Same {{ end }}
201 |
202 | It does look odd to place the if at the end, but it does provide a good
203 | illustration of how to use the pipes.
204 |
205 | **Example 2 :**
206 |
207 | {{ index .Params "disqus_url" | html }}
208 |
209 | Access the page parameter called "disqus_url" and escape the HTML.
210 |
211 | **Example 3 :**
212 |
213 | {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
214 | Stuff Here
215 | {{ end }}
216 |
217 | Could be rewritten as
218 |
219 | {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
220 | Stuff Here
221 | {{ end }}
222 |
223 |
224 | ## Context (aka. the dot)
225 |
226 | The most easily overlooked concept to understand about Go templates is that {{ . }}
227 | always refers to the current context. In the top level of your template this
228 | will be the data set made available to it. Inside of a iteration it will have
229 | the value of the current item. When inside of a loop the context has changed. .
230 | will no longer refer to the data available to the entire page. If you need to
231 | access this from within the loop you will likely want to set it to a variable
232 | instead of depending on the context.
233 |
234 | **Example:**
235 |
236 | {{ $title := .Site.Title }}
237 | {{ range .Params.tags }}
238 |
239 | {{ end }}
240 |
241 | Notice how once we have entered the loop the value of {{ . }} has changed. We
242 | have defined a variable outside of the loop so we have access to it from within
243 | the loop.
244 |
245 | # Hugo Parameters
246 |
247 | Hugo provides the option of passing values to the template language
248 | through the site configuration (for sitewide values), or through the meta
249 | data of each specific piece of content. You can define any values of any
250 | type (supported by your front matter/config format) and use them however
251 | you want to inside of your templates.
252 |
253 |
254 | ## Using Content (page) Parameters
255 |
256 | In each piece of content you can provide variables to be used by the
257 | templates. This happens in the [front matter](/content/front-matter).
258 |
259 | An example of this is used in this documentation site. Most of the pages
260 | benefit from having the table of contents provided. Sometimes the TOC just
261 | doesn't make a lot of sense. We've defined a variable in our front matter
262 | of some pages to turn off the TOC from being displayed.
263 |
264 | Here is the example front matter:
265 |
266 | ```
267 | ---
268 | title: "Permalinks"
269 | date: "2013-11-18"
270 | aliases:
271 | - "/doc/permalinks/"
272 | groups: ["extras"]
273 | groups_weight: 30
274 | notoc: true
275 | ---
276 | ```
277 |
278 | Here is the corresponding code inside of the template:
279 |
280 | {{ if not .Params.notoc }}
281 |