647 lines
37 KiB
HTML
647 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="author" content="map[name:Hugo Authors]">
|
|
<meta name="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. The Go docs provide more details.
|
|
" />
|
|
<meta name="keywords" content=", go, golang, templates, themes, development" />
|
|
<meta name="robots" content="noodp" />
|
|
<meta name="theme-color" content="" />
|
|
<link rel="canonical" href="http://localhost:1313/posts/2014/04/hugo-template-primer/" />
|
|
|
|
|
|
<title>
|
|
|
|
(Hu)go Template Primer :: Northside Studio Achim — Hello Friend NG Theme
|
|
|
|
</title>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="http://localhost:1313/main.min.7289daf2e88ea2c7b253a51cc5794c7cc17e7aeb7295a19d978db764a5862f25.css" integrity="sha256-cona8uiOoseyU6UcxXlMfMF+eutylaGdl423ZKWGLyU=" crossorigin="anonymous">
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:1313/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:1313/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:1313/favicon-16x16.png">
|
|
<link rel="manifest" href="http://localhost:1313/site.webmanifest">
|
|
<link rel="mask-icon" href="http://localhost:1313/safari-pinned-tab.svg" color="">
|
|
<link rel="shortcut icon" href="http://localhost:1313/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="">
|
|
|
|
|
|
|
|
<meta itemprop="name" content="(Hu)go Template Primer">
|
|
<meta 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. The Go docs provide more details.">
|
|
<meta itemprop="datePublished" content="2014-04-02T00:00:00+00:00">
|
|
<meta itemprop="dateModified" content="2014-04-02T00:00:00+00:00">
|
|
<meta itemprop="wordCount" content="1487">
|
|
<meta itemprop="image" content="http://localhost:1313/">
|
|
<meta itemprop="keywords" content="Go,Golang,Templates,Themes,Development">
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="http://localhost:1313/">
|
|
<meta name="twitter:title" content="(Hu)go Template Primer">
|
|
<meta name="twitter: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. The Go docs provide more details.">
|
|
|
|
|
|
|
|
<meta property="og:url" content="http://localhost:1313/posts/2014/04/hugo-template-primer/">
|
|
<meta property="og:site_name" content="Northside Studio Achim">
|
|
<meta property="og:title" content="(Hu)go Template Primer">
|
|
<meta property="og: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. The Go docs provide more details.">
|
|
<meta property="og:locale" content="en_us">
|
|
<meta property="og:type" content="article">
|
|
<meta property="article:section" content="posts">
|
|
<meta property="article:published_time" content="2014-04-02T00:00:00+00:00">
|
|
<meta property="article:modified_time" content="2014-04-02T00:00:00+00:00">
|
|
<meta property="article:tag" content="Go">
|
|
<meta property="article:tag" content="Golang">
|
|
<meta property="article:tag" content="Templates">
|
|
<meta property="article:tag" content="Themes">
|
|
<meta property="article:tag" content="Development">
|
|
<meta property="og:image" content="http://localhost:1313/">
|
|
<meta property="og:see_also" content="http://localhost:1313/posts/2014/09/creating-a-new-theme/">
|
|
<meta property="og:see_also" content="http://localhost:1313/posts/2014/03/migrate-to-hugo-from-jekyll/">
|
|
<meta property="og:see_also" content="http://localhost:1313/posts/2014/04/getting-started-with-hugo/">
|
|
|
|
|
|
|
|
|
|
<meta property="article:section" content="Development" />
|
|
|
|
<meta property="article:section" content="golang" />
|
|
|
|
|
|
|
|
<meta property="article:published_time" content="2014-04-02 00:00:00 +0000 UTC" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
<header class="header">
|
|
<span class="header__inner">
|
|
<a href="http://localhost:1313/" style="text-decoration: none;">
|
|
<div class="logo">
|
|
|
|
<span class="logo__mark">></span>
|
|
<span class="logo__text ">
|
|
$ cd /home/</span>
|
|
<span class="logo__cursor" style=
|
|
"
|
|
|
|
">
|
|
</span>
|
|
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<span class="header__right">
|
|
<nav class="menu">
|
|
<ul class="menu__inner">
|
|
<div class="submenu">
|
|
<li class="dropdown">
|
|
<a href="javascript:void(0)" class="dropbtn">About</a>
|
|
<div class="dropdown-content">
|
|
|
|
<a href="about/me/">About Me</a>
|
|
|
|
</div>
|
|
</li>
|
|
</div>
|
|
|
|
<li><a href="http://localhost:1313/posts/">Posts</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
|
|
<span class="menu-trigger">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M0 0h24v24H0z" fill="none"/>
|
|
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</header>
|
|
|
|
|
|
|
|
<div class="content">
|
|
<main class="post">
|
|
|
|
<div class="post-info">
|
|
<p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
7 minutes
|
|
|
|
|
|
| Also available in
|
|
|
|
<a href="http://localhost:1313/fr/posts/2014/04/introduction-aux-mod%C3%A8les-hugo/"><span class="flag fi fi-fr"></span></a>
|
|
|
|
|
|
</p>
|
|
</div>
|
|
|
|
<article>
|
|
<h1 class="post-title">
|
|
<a href="http://localhost:1313/posts/2014/04/hugo-template-primer/">(Hu)go Template Primer</a>
|
|
</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="post-content">
|
|
<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="http://localhost:1313/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="http://localhost:1313/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="http://localhost:1313/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 tabindex="0"><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 tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">CopyrightHTML</span>: <span style="color:#e6db74">"Copyright &#xA9; 2013 John Doe. All Rights Reserved."</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">TwitterUser</span>: <span style="color:#e6db74">"spf13"</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#f92672">SidebarRecentLimit</span>: <span style="color:#ae81ff">5</span>
|
|
</span></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 tabindex="0"><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 tabindex="0"><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 tabindex="0"><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>
|
|
</div>
|
|
</article>
|
|
|
|
<hr />
|
|
|
|
<div class="post-info">
|
|
|
|
<p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag meta-icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7" y2="7"></line></svg>
|
|
|
|
<span class="tag"><a href="http://localhost:1313/tags/go/">go</a></span>
|
|
<span class="tag"><a href="http://localhost:1313/tags/golang/">golang</a></span>
|
|
<span class="tag"><a href="http://localhost:1313/tags/templates/">templates</a></span>
|
|
<span class="tag"><a href="http://localhost:1313/tags/themes/">themes</a></span>
|
|
<span class="tag"><a href="http://localhost:1313/tags/development/">development</a></span>
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder meta-icon"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
|
|
|
|
<span class="tag"><a href="http://localhost:1313/categories/development/">Development</a></span>
|
|
<span class="tag"><a href="http://localhost:1313/categories/golang/">golang</a></span>
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
<line x1="16" y1="13" x2="8" y2="13"></line>
|
|
<line x1="16" y1="17" x2="8" y2="17"></line>
|
|
<polyline points="10 9 9 9 8 9"></polyline>
|
|
</svg>
|
|
1487 Words
|
|
</p>
|
|
|
|
<p>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|
</svg>
|
|
|
|
2014-04-02 02:00
|
|
|
|
|
|
|
|
|
|
|
|
</p>
|
|
</div>
|
|
<hr />
|
|
<div class="sharing-buttons">
|
|
|
|
<a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_blank" rel="noopener" aria-label="" title="Share on facebook">
|
|
<div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?url=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_blank" rel="noopener" aria-label="" title="Share on twitter">
|
|
<div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small">
|
|
<div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&title=%28Hu%29go%20Template%20Primer&caption=%28Hu%29go%20Template%20Primer&canonicalUrl=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_blank" rel="noopener" aria-label="" title="Share on tumblr">
|
|
<div class="resp-sharing-button resp-sharing-button--tumblr resp-sharing-button--small">
|
|
<div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.563 24c-5.093 0-7.031-3.756-7.031-6.411V9.747H5.116V6.648c3.63-1.313 4.512-4.596 4.71-6.469C9.84.051 9.941 0 9.999 0h3.517v6.114h4.801v3.633h-4.82v7.47c.016 1.001.375 2.371 2.207 2.371h.09c.631-.02 1.486-.205 1.936-.419l1.156 3.425c-.436.636-2.4 1.374-4.156 1.404h-.178l.011.002z"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="mailto:?subject=%28Hu%29go%20Template%20Primer&body=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_self" rel="noopener" aria-label="" title="Share via email">
|
|
<div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f&media=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f;description=%28Hu%29go%20Template%20Primer" target="_blank" rel="noopener" aria-label="" title="Share on pinterest">
|
|
<div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://www.linkedin.com/shareArticle?mini=true&url=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f&title=%28Hu%29go%20Template%20Primer&summary=%28Hu%29go%20Template%20Primer&source=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_blank" rel="noopener" aria-label="" title="Share on linkedin">
|
|
<div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://reddit.com/submit/?url=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f&resubmit=true&title=%28Hu%29go%20Template%20Primer" target="_blank" rel="noopener" aria-label="" title="Share on reddit">
|
|
<div class="resp-sharing-button resp-sharing-button--reddit resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://www.xing.com/app/user?op=share;url=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f;title=%28Hu%29go%20Template%20Primer" target="_blank" rel="noopener" aria-label="" title="Share on xing">
|
|
<div class="resp-sharing-button resp-sharing-button--xing resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="whatsapp://send?text=%28Hu%29go%20Template%20Primer%20http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_blank" rel="noopener" aria-label="" title="Share on whatsapp">
|
|
<div class="resp-sharing-button resp-sharing-button--whatsapp resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://news.ycombinator.com/submitlink?u=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f&t=%28Hu%29go%20Template%20Primer" target="_blank" rel="noopener" aria-label="" title="Share on hacker news">
|
|
<div class="resp-sharing-button resp-sharing-button--hackernews resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M0 24V0h24v24H0zM6.951 5.896l4.112 7.708v5.064h1.583v-4.972l4.148-7.799h-1.749l-2.457 4.875c-.372.745-.688 1.434-.688 1.434s-.297-.708-.651-1.434L8.831 5.896h-1.88z"/></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<a class="resp-sharing-button__link" href="https://telegram.me/share/url?text=%28Hu%29go%20Template%20Primer&url=http%3a%2f%2flocalhost%3a1313%2fposts%2f2014%2f04%2fhugo-template-primer%2f" target="_blank" rel="noopener" aria-label="" title="Share on telegram">
|
|
<div class="resp-sharing-button resp-sharing-button--telegram resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="pagination">
|
|
|
|
|
|
<div class="pagination__buttons">
|
|
|
|
<span class="button previous">
|
|
<a href="http://localhost:1313/posts/2014/03/migrate-to-hugo-from-jekyll/">
|
|
<span class="button__icon">←</span>
|
|
<span class="button__text">Migrate to Hugo from Jekyll</span>
|
|
</a>
|
|
</span>
|
|
|
|
|
|
|
|
<span class="button next">
|
|
<a href="http://localhost:1313/posts/2014/04/getting-started-with-hugo/">
|
|
<span class="button__text">Getting Started with Hugo</span>
|
|
<span class="button__icon">→</span>
|
|
</a>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</main>
|
|
</div>
|
|
|
|
|
|
|
|
<footer class="footer">
|
|
|
|
<div class="footer__inner">
|
|
<div class="footer__content">
|
|
<span>© 2026</span>
|
|
<span><a href="http://localhost:1313/">Thomas Sindt</a></span>
|
|
<span><a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC 4.0</a></span>
|
|
<span><a href="http://localhost:1313/posts/index.xml" target="_blank" title="rss"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a></span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="footer__inner">
|
|
<div class="footer__content">
|
|
<span>Powered by <a href="http://gohugo.io">Hugo</a> and the Hello Friend NG Theme</span><span>Made with ❤ by <a href="https://thomassindt.de">Thomas Sindt</a></span>
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="http://localhost:1313/bundle.min.08b680078a3cf9c69e3dd217a5aa52cfddd4a1d850f8cdff127fdd7421a71f8b2b474be69386f67819edace92273916e7230c9054f38107db9dc6730b3530ab5.js" integrity="sha512-CLaAB4o8+caePdIXpapSz93UodhQ+M3/En/ddCGnH4srR0vmk4b2eBntrOkic5FucjDJBU84EH253Gcws1MKtQ=="></script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|