698 lines
29 KiB
HTML
698 lines
29 KiB
HTML
|
<!doctype html>
|
||
|
<html lang="en">
|
||
|
<head>
|
||
|
<meta charset="utf-8" />
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
<title>(Hu)go Template Primer</title><meta name="description" itemprop="description" content="Hugo uses the excellent Go html/template library for its template engine. It is an extremely lightweight engine that provides a very small amount of logic. In our experience that it is just the right amount of logic to be able to create a good static website. If you have used other template systems from different languages or frameworks you will find a lot of similarities in Go templates. This document is a brief primer on using Go templates." id="desc"><meta name="generator" content="Hugo 0.55.6" /><meta name="keywords" itemprop="keywords" content="go,golang,templates,themes,development" id="keywords"><link rel="canonical" href="http://localhost:1313/post/goisforlovers/">
|
||
|
|
||
|
|
||
|
<link rel="dns-prefetch" href="https://use.fontawesome.com/" />
|
||
|
<link rel="preconnect" href="https://use.fontawesome.com/" />
|
||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
||
|
<script type="text/javascript" src="/js/foundation.min.js"></script>
|
||
|
<script type="text/javascript" src="/js/lunr.min.js"></script>
|
||
|
<link rel="stylesheet" type="text/css" href="/css/foundation.css">
|
||
|
<link rel="stylesheet" href="http://localhost:1313/css/dark.min.a2e0a27b84f040c06c153f1811086f6c2703f82371f3533c5ebb5617ad55f808.css" integrity="sha256-ouCie4TwQMBsFT8YEQhvbCcD+CNx81M8XrtWF61V+Ag="><link rel="stylesheet" href="/styles.css" >
|
||
|
<link rel="stylesheet" href="http://localhost:1313/css/reset.min.58d4832e34c59f168248179e8f6a0495f3f1ed2cb432fa09597f17f8d2916f62.css" integrity="sha256-WNSDLjTFnxaCSBeej2oElfPx7Sy0MvoJWX8X+NKRb2I="><link rel="stylesheet" href="http://localhost:1313/css/fonts.min.4ffd55649e797a49b8a6d3f70cdd1c97f25a942848a291346dd055c59bd4f010.css" integrity="sha256-T/1VZJ55ekm4ptP3DN0cl/JalChIopE0bdBVxZvU8BA="><link rel="stylesheet" href="http://localhost:1313/css/classes.min.717d03fc567fccb77be4ab35d1ac133e64e2cc160d72af4bf64a7ec26281238d.css" integrity="sha256-cX0D/FZ/zLd75Ks10awTPmTizBYNcq9L9kp+wmKBI40="><link rel="stylesheet" href="http://localhost:1313/css/pagination.min.1c019354f2098f0d34a80aa4c70a37ff5f5eb84a744f30e8af601fd877b142be.css" integrity="sha256-HAGTVPIJjw00qAqkxwo3/19euEp0TzDor2Af2HexQr4="><link rel="stylesheet" href="http://localhost:1313/css/page.min.16c3a4532fcc8cffaa9edb031826dbcfb1008775b0e8b08ada4c7d60aaaa2714.css" integrity="sha256-FsOkUy/MjP+qntsDGCbbz7EAh3Ww6LCK2kx9YKqqJxQ="><link rel="stylesheet" href="http://localhost:1313/css/widgets.min.f86a3fac609b70f8c8746e1a9bf0ee6d7030716a21281e29e0010bd19b4f22d0.css" integrity="sha256-+Go/rGCbcPjIdG4am/DubXAwcWohKB4p4AEL0ZtPItA=">
|
||
|
<link rel="stylesheet" href="http://localhost:1313/css/single.min.f8c42b40c9487fb9a57081e37af57fd067d349a6442c35c8b511a9d52a3bf502.css" integrity="sha256-+MQrQMlIf7mlcIHjevV/0GfTSaZELDXItRGp1So79QI=">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<link rel="preload" media="print" type="text/css" href="http://localhost:1313/css/print.min.2e0961e511885e38a09cc9a9ff3de5ce7d7d2186bb9ed98a61f176688d4ef61a.css" integrity="sha256-Lglh5RGIXjignMmp/z3lzn19IYa7ntmKYfF2aI1O9ho=" as="style"><link rel="dns-prefetch" href="https://cdnjs.cloudflare.com/" />
|
||
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com/" />
|
||
|
|
||
|
<link rel="preload" href="http://localhost:1313/index.json" as="fetch" />
|
||
|
|
||
|
<link rel="stylesheet" href="http://localhost:1313/css/widgets/search.min.5561d0b8fcf8e2a7d3d0fcbe830ba8a5743255be7f849e564d3849a7cc1ba725.css" integrity="sha256-VWHQuPz44qfT0Py+gwuopXQyVb5/hJ5WTThJp8wbpyU=">
|
||
|
<link rel="stylesheet" href="http://localhost:1313/css/widgets/taglist.min.59f177c0ac5a5ae6b88ede8a87029d4012b1bdf53e37d2ccf5873832626a77f3.css" integrity="sha256-WfF3wKxaWua4jt6KhwKdQBKxvfU+N9LM9Yc4MmJqd/M=">
|
||
|
|
||
|
<meta name="theme-color" content="#2073c9">
|
||
|
<meta name="apple-mobile-web-app-title" content="Example Site">
|
||
|
<meta name="application-name" content="Example Site">
|
||
|
|
||
|
</head>
|
||
|
<body itemscope itemtype="http://schema.org/WebPage">
|
||
|
<div class="off-canvas-wrapper">
|
||
|
<button id="off-canvas-toggle" type="button" class="button hide-for-medium" aria-label="Open Menu" data-toggle="main-nav-off-canvas">
|
||
|
<span class="fas fa-bars"></span>
|
||
|
</button>
|
||
|
<div class="off-canvas position-left" id="main-nav-off-canvas" data-off-canvas>
|
||
|
<nav>
|
||
|
<ul class="vertical menu drilldown" data-drilldown><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/post/" >
|
||
|
POSTS
|
||
|
</a></li><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/about/" >
|
||
|
ABOUT HUGO
|
||
|
</a></li><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/" >
|
||
|
TUTORIALS
|
||
|
</a><ul class="vertical menu">
|
||
|
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/post/creating-a-new-theme/" >
|
||
|
CREATING A NEW THEME
|
||
|
</a></li><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/post/migrate-from-jekyll/" >
|
||
|
MIGRATING FROM JEKYLL
|
||
|
</a></li>
|
||
|
</ul></li></ul>
|
||
|
</nav>
|
||
|
</div>
|
||
|
<div id="site-container" class="grid-container full off-canvas-content">
|
||
|
<div class="grid-x full grid-container data-off-canvas-content">
|
||
|
<div id="site-header" class="cell">
|
||
|
<a href="http://localhost:1313/">
|
||
|
<header class="small-text-center medium-text-left grid-x">
|
||
|
<div id="site-title-container" class="cell shrink grid-y">
|
||
|
<div id="site-title" class="cell shrink" itemprop="name">Example Site</div>
|
||
|
<div class="cell shrink" id="site-tagline">Using the Midnight theme</div>
|
||
|
</div>
|
||
|
</header>
|
||
|
</a>
|
||
|
<nav id="main-nav" class="small-hide">
|
||
|
<ul class="dropdown menu" data-dropdown-menu><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/post/" >
|
||
|
POSTS
|
||
|
</a></li><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/about/" >
|
||
|
ABOUT HUGO
|
||
|
</a></li><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/" >
|
||
|
TUTORIALS
|
||
|
</a><ul class="vertical menu">
|
||
|
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/post/creating-a-new-theme/" >
|
||
|
CREATING A NEW THEME
|
||
|
</a></li><li itemscope itemtype="http://schema.org/SiteNavigationElement">
|
||
|
<a class="main-nav button" tabindex="0" href="http://localhost:1313/post/migrate-from-jekyll/" >
|
||
|
MIGRATING FROM JEKYLL
|
||
|
</a></li>
|
||
|
</ul></li></ul>
|
||
|
</nav>
|
||
|
</div>
|
||
|
<div id="main-container" class="cell grid-x grid-padding-x grid-container" role="main" itemprop="mainContentOfPage">
|
||
|
|
||
|
<div class="callout cell text-center">
|
||
|
Interested in using Midnight? Check out the <a href="https://bluestnight.com/guides/midnight/getting-started/">getting started</a>
|
||
|
guide and the <a href="https://bluestnight.com/docs/midnight/users/">user documentation</a> for more information.
|
||
|
</div>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<main class="cell medium-8" >
|
||
|
<article id="post-article" itemscope itemtype="http://schema.org/Article" itemref="keywords desc">
|
||
|
<header id="page-header">
|
||
|
<h1 itemprop="headline">(Hu)go Template Primer</h1><p id="post-metadata" class="grid-x grid-padding-x"><span class="cell shrink">
|
||
|
<span class="far fa-clock fa-sm fa-fw" aria-hidden></span>
|
||
|
<strong>Published:</strong>
|
||
|
<time datetime="2014-04-02" content="2014-04-02" itemprop="datePublished">April 02, 2014</time>
|
||
|
</span><span class="cell shrink">
|
||
|
<span class="fas fa-folder fa-sm fa-fw" aria-hidden></span>
|
||
|
<span class="sr-text">Categories: </span>
|
||
|
|
||
|
<a href="http://localhost:1313/categories/development" rel="category">Development</a>,
|
||
|
<a href="http://localhost:1313/categories/golang" rel="category">Golang</a>
|
||
|
</span><span class="cell shrink">
|
||
|
<span class="fas fa-book fa-sm fa-fw" aria-hidden></span>
|
||
|
<strong>Estimated Reading Time:</strong>
|
||
|
~<span itemprop="timeRequired">7 minutes</span>
|
||
|
</span><span class="cell shrink">
|
||
|
<span class="fas fa-tags fa-sm fa-fw" aria-hidden></span>
|
||
|
|
||
|
|
||
|
<a itemprop="relatedUrl" itemscope itemtype="http://schema.org/URL" href="http://localhost:1313/tags/go" rel="tag" itemprop="url">go</a>
|
||
|
|
||
|
|
||
|
|
||
|
<a itemprop="relatedUrl" itemscope itemtype="http://schema.org/URL" href="http://localhost:1313/tags/golang" rel="tag" itemprop="url">golang</a>
|
||
|
|
||
|
|
||
|
|
||
|
<a itemprop="relatedUrl" itemscope itemtype="http://schema.org/URL" href="http://localhost:1313/tags/templates" rel="tag" itemprop="url">templates</a>
|
||
|
|
||
|
|
||
|
|
||
|
<a itemprop="relatedUrl" itemscope itemtype="http://schema.org/URL" href="http://localhost:1313/tags/themes" rel="tag" itemprop="url">themes</a>
|
||
|
|
||
|
|
||
|
|
||
|
<a itemprop="relatedUrl" itemscope itemtype="http://schema.org/URL" href="http://localhost:1313/tags/development" rel="tag" itemprop="url">development</a>
|
||
|
</span></p>
|
||
|
|
||
|
</header>
|
||
|
|
||
|
<div id="post-content"><span itemprop="articleBody">
|
||
|
|
||
|
<p>Hugo uses the excellent <a href="https://golang.org/">Go</a> <a href="https://golang.org/pkg/html/template/">html/template</a> library for
|
||
|
its template engine. It is an extremely lightweight engine that provides a very
|
||
|
small amount of logic. In our experience that it is just the right amount of
|
||
|
logic to be able to create a good static website. If you have used other
|
||
|
template systems from different languages or frameworks you will find a lot of
|
||
|
similarities in Go templates.</p>
|
||
|
|
||
|
<p>This document is a brief primer on using Go templates. The <a href="https://golang.org/pkg/html/template/">Go docs</a>
|
||
|
provide more details.</p>
|
||
|
|
||
|
<h2 id="introduction-to-go-templates">Introduction to Go Templates</h2>
|
||
|
|
||
|
<p>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.</p>
|
||
|
|
||
|
<p>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 <a href="https://golang.org/pkg/html/template/">Go docs</a>.</p>
|
||
|
|
||
|
<h2 id="basic-syntax">Basic Syntax</h2>
|
||
|
|
||
|
<p>Golang templates are HTML files with the addition of variables and
|
||
|
functions.</p>
|
||
|
|
||
|
<p><strong>Go variables and functions are accessible within {{ }}</strong></p>
|
||
|
|
||
|
<p>Accessing a predefined variable “foo”:</p>
|
||
|
|
||
|
<pre><code>{{ foo }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Parameters are separated using spaces</strong></p>
|
||
|
|
||
|
<p>Calling the add function with input of 1, 2:</p>
|
||
|
|
||
|
<pre><code>{{ add 1 2 }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Methods and fields are accessed via dot notation</strong></p>
|
||
|
|
||
|
<p>Accessing the Page Parameter “bar”</p>
|
||
|
|
||
|
<pre><code>{{ .Params.bar }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Parentheses can be used to group items together</strong></p>
|
||
|
|
||
|
<pre><code>{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="variables">Variables</h2>
|
||
|
|
||
|
<p>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
|
||
|
<a href="/layout/variables">variables</a> page.</p>
|
||
|
|
||
|
<p>A variable is accessed by referencing the variable name.</p>
|
||
|
|
||
|
<pre><code><title>{{ .Title }}</title>
|
||
|
</code></pre>
|
||
|
|
||
|
<p>Variables can also be defined and referenced.</p>
|
||
|
|
||
|
<pre><code>{{ $address := "123 Main St."}}
|
||
|
{{ $address }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="functions">Functions</h2>
|
||
|
|
||
|
<p>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. <a href="/layout/functions">Hugo template
|
||
|
functions</a> 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.</p>
|
||
|
|
||
|
<p><strong>Example:</strong></p>
|
||
|
|
||
|
<pre><code>{{ add 1 2 }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="includes">Includes</h2>
|
||
|
|
||
|
<p>When including another template you will pass to it the data it will be
|
||
|
able to access. To pass along the current context please remember to
|
||
|
include a trailing dot. The templates location will always be starting at
|
||
|
the /layout/ directory within Hugo.</p>
|
||
|
|
||
|
<p><strong>Example:</strong></p>
|
||
|
|
||
|
<pre><code>{{ template "chrome/header.html" . }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="logic">Logic</h2>
|
||
|
|
||
|
<p>Go templates provide the most basic iteration and conditional logic.</p>
|
||
|
|
||
|
<h3 id="iteration">Iteration</h3>
|
||
|
|
||
|
<p>Just like in Go, the Go templates make heavy use of range to iterate over
|
||
|
a map, array or slice. The following are different examples of how to use
|
||
|
range.</p>
|
||
|
|
||
|
<p><strong>Example 1: Using Context</strong></p>
|
||
|
|
||
|
<pre><code>{{ range array }}
|
||
|
{{ . }}
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Example 2: Declaring value variable name</strong></p>
|
||
|
|
||
|
<pre><code>{{range $element := array}}
|
||
|
{{ $element }}
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Example 2: Declaring key and value variable name</strong></p>
|
||
|
|
||
|
<pre><code>{{range $index, $element := array}}
|
||
|
{{ $index }}
|
||
|
{{ $element }}
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h3 id="conditionals">Conditionals</h3>
|
||
|
|
||
|
<p>If, else, with, or, & and provide the framework for handling conditional
|
||
|
logic in Go Templates. Like range, each statement is closed with <code>end</code>.</p>
|
||
|
|
||
|
<p>Go Templates treat the following values as false:</p>
|
||
|
|
||
|
<ul>
|
||
|
<li>false</li>
|
||
|
<li>0</li>
|
||
|
<li>any array, slice, map, or string of length zero</li>
|
||
|
</ul>
|
||
|
|
||
|
<p><strong>Example 1: If</strong></p>
|
||
|
|
||
|
<pre><code>{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Example 2: If -> Else</strong></p>
|
||
|
|
||
|
<pre><code>{{ if isset .Params "alt" }}
|
||
|
{{ index .Params "alt" }}
|
||
|
{{else}}
|
||
|
{{ index .Params "caption" }}
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Example 3: And & Or</strong></p>
|
||
|
|
||
|
<pre><code>{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Example 4: With</strong></p>
|
||
|
|
||
|
<p>An alternative way of writing “if” and then referencing the same value
|
||
|
is to use “with” instead. With rebinds the context <code>.</code> within its scope,
|
||
|
and skips the block if the variable is absent.</p>
|
||
|
|
||
|
<p>The first example above could be simplified as:</p>
|
||
|
|
||
|
<pre><code>{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p><strong>Example 5: If -> Else If</strong></p>
|
||
|
|
||
|
<pre><code>{{ if isset .Params "alt" }}
|
||
|
{{ index .Params "alt" }}
|
||
|
{{ else if isset .Params "caption" }}
|
||
|
{{ index .Params "caption" }}
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="pipes">Pipes</h2>
|
||
|
|
||
|
<p>One of the most powerful components of Go templates is the ability to
|
||
|
stack actions one after another. This is done by using pipes. Borrowed
|
||
|
from unix pipes, the concept is simple, each pipeline’s output becomes the
|
||
|
input of the following pipe.</p>
|
||
|
|
||
|
<p>Because of the very simple syntax of Go templates, the pipe is essential
|
||
|
to being able to chain together function calls. One limitation of the
|
||
|
pipes is that they only can work with a single value and that value
|
||
|
becomes the last parameter of the next pipeline.</p>
|
||
|
|
||
|
<p>A few simple examples should help convey how to use the pipe.</p>
|
||
|
|
||
|
<p><strong>Example 1 :</strong></p>
|
||
|
|
||
|
<pre><code>{{ if eq 1 1 }} Same {{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>is the same as</p>
|
||
|
|
||
|
<pre><code>{{ eq 1 1 | if }} Same {{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>It does look odd to place the if at the end, but it does provide a good
|
||
|
illustration of how to use the pipes.</p>
|
||
|
|
||
|
<p><strong>Example 2 :</strong></p>
|
||
|
|
||
|
<pre><code>{{ index .Params "disqus_url" | html }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>Access the page parameter called “disqus_url” and escape the HTML.</p>
|
||
|
|
||
|
<p><strong>Example 3 :</strong></p>
|
||
|
|
||
|
<pre><code>{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||
|
Stuff Here
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>Could be rewritten as</p>
|
||
|
|
||
|
<pre><code>{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||
|
Stuff Here
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="context-aka-the-dot">Context (aka. the dot)</h2>
|
||
|
|
||
|
<p>The most easily overlooked concept to understand about Go templates is that {{ . }}
|
||
|
always refers to the current context. In the top level of your template this
|
||
|
will be the data set made available to it. Inside of a iteration it will have
|
||
|
the value of the current item. When inside of a loop the context has changed. .
|
||
|
will no longer refer to the data available to the entire page. If you need to
|
||
|
access this from within the loop you will likely want to set it to a variable
|
||
|
instead of depending on the context.</p>
|
||
|
|
||
|
<p><strong>Example:</strong></p>
|
||
|
|
||
|
<pre><code> {{ $title := .Site.Title }}
|
||
|
{{ range .Params.tags }}
|
||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>Notice how once we have entered the loop the value of {{ . }} has changed. We
|
||
|
have defined a variable outside of the loop so we have access to it from within
|
||
|
the loop.</p>
|
||
|
|
||
|
<h1 id="hugo-parameters">Hugo Parameters</h1>
|
||
|
|
||
|
<p>Hugo provides the option of passing values to the template language
|
||
|
through the site configuration (for sitewide values), or through the meta
|
||
|
data of each specific piece of content. You can define any values of any
|
||
|
type (supported by your front matter/config format) and use them however
|
||
|
you want to inside of your templates.</p>
|
||
|
|
||
|
<h2 id="using-content-page-parameters">Using Content (page) Parameters</h2>
|
||
|
|
||
|
<p>In each piece of content you can provide variables to be used by the
|
||
|
templates. This happens in the <a href="/content/front-matter">front matter</a>.</p>
|
||
|
|
||
|
<p>An example of this is used in this documentation site. Most of the pages
|
||
|
benefit from having the table of contents provided. Sometimes the TOC just
|
||
|
doesn’t make a lot of sense. We’ve defined a variable in our front matter
|
||
|
of some pages to turn off the TOC from being displayed.</p>
|
||
|
|
||
|
<p>Here is the example front matter:</p>
|
||
|
|
||
|
<pre><code>---
|
||
|
title: "Permalinks"
|
||
|
date: "2013-11-18"
|
||
|
aliases:
|
||
|
- "/doc/permalinks/"
|
||
|
groups: ["extras"]
|
||
|
groups_weight: 30
|
||
|
notoc: true
|
||
|
---
|
||
|
</code></pre>
|
||
|
|
||
|
<p>Here is the corresponding code inside of the template:</p>
|
||
|
|
||
|
<pre><code> {{ if not .Params.notoc }}
|
||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||
|
{{ .TableOfContents }}
|
||
|
</div>
|
||
|
{{ end }}
|
||
|
</code></pre>
|
||
|
|
||
|
<h2 id="using-site-config-parameters">Using Site (config) Parameters</h2>
|
||
|
|
||
|
<p>In your top-level configuration file (eg, <code>config.yaml</code>) you can define site
|
||
|
parameters, which are values which will be available to you in chrome.</p>
|
||
|
|
||
|
<p>For instance, you might declare:</p>
|
||
|
<div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml">params<span class="p">:</span><span class="w">
|
||
|
</span><span class="w"> </span>CopyrightHTML<span class="p">:</span><span class="w"> </span><span class="s2">"Copyright &#xA9; 2013 John Doe. All Rights Reserved."</span><span class="w">
|
||
|
</span><span class="w"> </span>TwitterUser<span class="p">:</span><span class="w"> </span><span class="s2">"spf13"</span><span class="w">
|
||
|
</span><span class="w"> </span>SidebarRecentLimit<span class="p">:</span><span class="w"> </span><span class="m">5</span></code></pre></div>
|
||
|
<p>Within a footer layout, you might then declare a <code><footer></code> which is only
|
||
|
provided if the <code>CopyrightHTML</code> 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.</p>
|
||
|
|
||
|
<pre><code>{{if .Site.Params.CopyrightHTML}}<footer>
|
||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||
|
</footer>{{end}}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>An alternative way of writing the “if” and then referencing the same value
|
||
|
is to use “with” instead. With rebinds the context <code>.</code> within its scope,
|
||
|
and skips the block if the variable is absent:</p>
|
||
|
|
||
|
<pre><code>{{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}}
|
||
|
</code></pre>
|
||
|
|
||
|
<p>Finally, if you want to pull “magic constants” out of your layouts, you can do
|
||
|
so, such as in this example:</p>
|
||
|
|
||
|
<pre><code><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>
|
||
|
</code></pre>
|
||
|
|
||
|
</span>
|
||
|
</div></article>
|
||
|
|
||
|
<nav id="post-nav" aria-label="Pagination">
|
||
|
<ul class="pagination grid-x grid-x-padding full">
|
||
|
|
||
|
<li class="pagination-previous cell small-order-2 medium-5 medium-order-1">
|
||
|
<a class="button" href="http://localhost:1313/post/hugoisforlovers/" rel="prev">
|
||
|
<span class="sr-text">Previous:</span>
|
||
|
Getting Started with Hugo</a>
|
||
|
</li>
|
||
|
|
||
|
|
||
|
<li class="pagination-next cell small-order-1 medium-5 medium-order-2 medium-offset-2">
|
||
|
<a class="button" href="http://localhost:1313/post/migrate-from-jekyll/" rel="next">
|
||
|
<span class="sr-text">Next:</span>Migrating from Jekyll
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</nav>
|
||
|
|
||
|
|
||
|
</main>
|
||
|
|
||
|
<aside class="cell small-12 small-order-2 medium-4" itemscope itemtype="http://schema.org/WPSideBar"><div class="widget" id="search-container">
|
||
|
<header>
|
||
|
<span class="widget-header"><span class="fas fa-search fa-xs" aria-hidden></span> Search</span>
|
||
|
</header>
|
||
|
<input type="search" name="search" id="searchbox" placeholder="Search..." autocomplete="off"/>
|
||
|
<div id="search-results" class="grid-y hide"></div>
|
||
|
</div>
|
||
|
<div class="widget">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<header>
|
||
|
<span class="widget-header"><span class="fas fa-pencil-alt fa-xs" aria-hidden></span> <a href="http://localhost:1313/post/">Recent Posts</a></span>
|
||
|
</header>
|
||
|
|
||
|
<a class="widget-header-small button" href="http://localhost:1313/index.xml"><span class="fas fa-rss fa-xs" aria-hidden></span> Subscribe to the Site</a>
|
||
|
<a class="widget-header-small button" href="http://localhost:1313/post/index.xml"><span class="fas fa-rss fa-xs" aria-hidden></span> Subscribe to Posts</a><ul><li><a href="http://localhost:1313/post/creating-a-new-theme/">Creating a New Theme</a></li><li><a href="http://localhost:1313/post/migrate-from-jekyll/">Migrate to Hugo from Jekyll</a></li><li><a href="http://localhost:1313/post/goisforlovers/">(Hu)go Template Primer</a></li><li><a href="http://localhost:1313/post/hugoisforlovers/">Getting Started with Hugo</a></li></ul>
|
||
|
</div>
|
||
|
<div class="widget">
|
||
|
<header>
|
||
|
<span class="widget-header">
|
||
|
<span class="fas fa-folder fa-xs" aria-hidden></span>
|
||
|
<a href="http://localhost:1313/categories/">Categories</a>
|
||
|
</span>
|
||
|
</header>
|
||
|
<ul><li>
|
||
|
<a href="http://localhost:1313/categories/development/">
|
||
|
Development
|
||
|
</a>
|
||
|
</li>
|
||
|
<li>
|
||
|
<a href="http://localhost:1313/categories/golang/">
|
||
|
Golang
|
||
|
</a>
|
||
|
</li>
|
||
|
|
||
|
</ul>
|
||
|
</div>
|
||
|
<div class="widget">
|
||
|
<header>
|
||
|
<span class="widget-header"><span class="fas fa-tags fa-xs" aria-hidden></span> <a href="http://localhost:1313/tags/">Tags</a></span>
|
||
|
</header>
|
||
|
<div class="grid-x grid-padding-x" id="sidebar-tags"><a class="cell shrink" href="http://localhost:1313/tags/development/" title="development">
|
||
|
development
|
||
|
</a><a class="cell shrink" href="http://localhost:1313/tags/go/" title="go">
|
||
|
go
|
||
|
</a><a class="cell shrink" href="http://localhost:1313/tags/golang/" title="golang">
|
||
|
golang
|
||
|
</a><a class="cell shrink" href="http://localhost:1313/tags/hugo/" title="hugo">
|
||
|
hugo
|
||
|
</a><a class="cell shrink" href="http://localhost:1313/tags/templates/" title="templates">
|
||
|
templates
|
||
|
</a><a class="cell shrink" href="http://localhost:1313/tags/themes/" title="themes">
|
||
|
themes
|
||
|
</a></div>
|
||
|
</div>
|
||
|
</aside>
|
||
|
|
||
|
</div>
|
||
|
<footer class="cell grid-x full align-middle">
|
||
|
<div class="cell medium-4 small-text-center medium-text-left medium-left small-order-1 grid-x">
|
||
|
<div class="cell">
|
||
|
<small>
|
||
|
© 2019
|
||
|
<span itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||
|
<span itemprop="name">
|
||
|
Example Site.
|
||
|
</span>
|
||
|
</span>
|
||
|
</small>
|
||
|
</div>
|
||
|
<div class="cell">
|
||
|
<small>
|
||
|
Built with <a href="https://gohugo.io">Hugo</a> and <a href="https://bluestnight.com/products/midnight/">Midnight</a>.
|
||
|
</small>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
<div class="cell medium-4 small-text-center medium-text-center small-order-2 grid-x">
|
||
|
|
||
|
<div class="cell small-full small-text-center grid-x">
|
||
|
|
||
|
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
<div id="social-icons" class="grid-x cell medium-4 small-text-center small-order-3 medium-text-right">
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<a href="https://gitlab.com/BluestNight/Midnight" class="cell shrink" rel="me nofollow" title="GitLab" aria-title="Fork me on GitLab!">
|
||
|
|
||
|
<span class="fa-stack fa-xs">
|
||
|
<span class="fas fa-square fa-stack-2x"></span>
|
||
|
<span class="fab fa-gitlab fa-stack-1x fa-inverse"></span>
|
||
|
</span>
|
||
|
|
||
|
</a>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
</div>
|
||
|
</footer>
|
||
|
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<script type="text/javascript" src="http://localhost:1313/js/iubenda.min.e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js" integrity="sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU="></script>
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
<script type="text/javascript" src="http://localhost:1313/js/widgets/search.min.572f332ce215f4f16d9adc8643ebc2c193fcb351d506d92d1769efaf95230773.js" integrity="sha256-Vy8zLOIV9PFtmtyGQ+vCwZP8s1HVBtktF2nvr5UjB3M=" defer></script><script type="text/javascript" src="http://localhost:1313/js/index.min.e22883a04526785bb35feb658da4974c160999432286921d7df30235cc21e4f3.js" integrity="sha256-4iiDoEUmeFuzX+tljaSXTBYJmUMihpIdffMCNcwh5PM=" defer></script>
|
||
|
</div>
|
||
|
<script>
|
||
|
$(document).foundation();
|
||
|
</script>
|
||
|
<script data-no-instant>document.write('<script src="/livereload.js?port=1313&mindelay=10"></' + 'script>')</script></body>
|
||
|
</html>
|