feat: add posts layout styles
feat: add sample pages
This commit is contained in:
parent
fe4876c747
commit
338a6fc456
|
@ -9,7 +9,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 400px;
|
max-width: 400px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: center;
|
margin-top: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#home-title {
|
#home-title {
|
||||||
|
@ -110,6 +110,23 @@
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-title {
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #252525;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: #151515;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.post-item {
|
.post-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
12
config.toml
12
config.toml
|
@ -8,7 +8,7 @@ pygmentsCodefences = true
|
||||||
pygmentsUseClasses = true
|
pygmentsUseClasses = true
|
||||||
|
|
||||||
rssLimit = 10 # Maximum number of items in the RSS feed.
|
rssLimit = 10 # Maximum number of items in the RSS feed.
|
||||||
enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/functions/emojify/
|
enableEmoji = true
|
||||||
|
|
||||||
[languages]
|
[languages]
|
||||||
[languages.tr]
|
[languages.tr]
|
||||||
|
@ -27,9 +27,6 @@ enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/func
|
||||||
title = 'Log101'
|
title = 'Log101'
|
||||||
weight = 20
|
weight = 20
|
||||||
|
|
||||||
[author]
|
|
||||||
name = "Furkan Erdem"
|
|
||||||
|
|
||||||
[taxonomies]
|
[taxonomies]
|
||||||
tag = "tags"
|
tag = "tags"
|
||||||
|
|
||||||
|
@ -40,10 +37,10 @@ enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/func
|
||||||
dateformNumTime = "2006-01-02 15:04 -0700"
|
dateformNumTime = "2006-01-02 15:04 -0700"
|
||||||
|
|
||||||
# Metadata mostly used in document's head
|
# Metadata mostly used in document's head
|
||||||
description = "log101's blog"
|
description = "log101'in sayfası"
|
||||||
themeColor = "#494f5c"
|
themeColor = "#494f5c"
|
||||||
|
|
||||||
homeSubtitle = "\"Orada, soğuk ve mütemadiyen dönen yaşlı başlı yıldızlar, önce gasp edilmiş sonra pislik içinde bırakılmış gezegenler, Kadimler mirası kuyruklu gök cisimleri vardı; birbirlerinden bağımız görünseler de modellenmesi neredeyse imkansız bir örgü içerisinde…\""
|
homeSubtitle = ""
|
||||||
|
|
||||||
# Toggling this option needs to rebuild SCSS, requires Hugo extended version
|
# Toggling this option needs to rebuild SCSS, requires Hugo extended version
|
||||||
justifyContent = false # Set "text-align: justify" to `.content`.
|
justifyContent = false # Set "text-align: justify" to `.content`.
|
||||||
|
@ -55,6 +52,9 @@ enableEmoji = true # Shorthand emojis in content files - https://gohugo.io/func
|
||||||
# Add custom css
|
# Add custom css
|
||||||
# customCSS = ["css/foo.css", "css/bar.css"]
|
# customCSS = ["css/foo.css", "css/bar.css"]
|
||||||
|
|
||||||
|
[[params.author]]
|
||||||
|
name = "Furkan Erdem"
|
||||||
|
|
||||||
# Social Icons
|
# Social Icons
|
||||||
# Check https://github.com/Track3/hermit#social-icons for more info.
|
# Check https://github.com/Track3/hermit#social-icons for more info.
|
||||||
[[params.social]]
|
[[params.social]]
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
+++
|
+++
|
||||||
title = "Yazmak Güzeldir"
|
title = "Lorem Ipsum"
|
||||||
tags = [
|
tags = [
|
||||||
"go",
|
"go",
|
||||||
"golang",
|
"golang",
|
339
content/posts/goisforlovers3.md
Normal file
339
content/posts/goisforlovers3.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "With The Help of God"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
339
content/posts/goisforlovers4.md
Normal file
339
content/posts/goisforlovers4.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "Dolor Sit Amet"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
339
content/posts/goisforlovers5.md
Normal file
339
content/posts/goisforlovers5.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "The Excellent Hugo"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
339
content/posts/goisforlovers6.md
Normal file
339
content/posts/goisforlovers6.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "Is There a Way Back?"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
339
content/posts/goisforlovers7.md
Normal file
339
content/posts/goisforlovers7.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "Forget About the Past"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
339
content/posts/goisforlovers8.md
Normal file
339
content/posts/goisforlovers8.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "Commemoration"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
339
content/posts/goisforlovers9.md
Normal file
339
content/posts/goisforlovers9.md
Normal file
|
@ -0,0 +1,339 @@
|
||||||
|
+++
|
||||||
|
title = "Internation Business"
|
||||||
|
tags = [
|
||||||
|
"go",
|
||||||
|
"golang",
|
||||||
|
"templates",
|
||||||
|
"themes",
|
||||||
|
"development",
|
||||||
|
]
|
||||||
|
date = "2014-04-02"
|
||||||
|
toc = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
Hugo uses the excellent [Go][] [html/template][gohtmltemplate] 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][gohtmltemplate]
|
||||||
|
provide more details.
|
||||||
|
|
||||||
|
## Introduction to Go Templates
|
||||||
|
|
||||||
|
Go templates provide an extremely simple template language. It adheres to the
|
||||||
|
belief that only the most basic of logic belongs in the template or view layer.
|
||||||
|
One consequence of this simplicity is that Go templates parse very quickly.
|
||||||
|
|
||||||
|
A unique characteristic of Go templates is they are content aware. Variables and
|
||||||
|
content will be sanitized depending on the context of where they are used. More
|
||||||
|
details can be found in the [Go docs][gohtmltemplate].
|
||||||
|
|
||||||
|
## Basic Syntax
|
||||||
|
|
||||||
|
Golang templates are HTML files with the addition of variables and
|
||||||
|
functions.
|
||||||
|
|
||||||
|
**Go variables and functions are accessible within {{ }}**
|
||||||
|
|
||||||
|
Accessing a predefined variable "foo":
|
||||||
|
|
||||||
|
{{ foo }}
|
||||||
|
|
||||||
|
**Parameters are separated using spaces**
|
||||||
|
|
||||||
|
Calling the add function with input of 1, 2:
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
**Methods and fields are accessed via dot notation**
|
||||||
|
|
||||||
|
Accessing the Page Parameter "bar"
|
||||||
|
|
||||||
|
{{ .Params.bar }}
|
||||||
|
|
||||||
|
**Parentheses can be used to group items together**
|
||||||
|
|
||||||
|
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Variables
|
||||||
|
|
||||||
|
Each Go template has a struct (object) made available to it. In hugo each
|
||||||
|
template is passed either a page or a node struct depending on which type of
|
||||||
|
page you are rendering. More details are available on the
|
||||||
|
[variables](/layout/variables) page.
|
||||||
|
|
||||||
|
A variable is accessed by referencing the variable name.
|
||||||
|
|
||||||
|
<title>{{ .Title }}</title>
|
||||||
|
|
||||||
|
Variables can also be defined and referenced.
|
||||||
|
|
||||||
|
{{ $address := "123 Main St."}}
|
||||||
|
{{ $address }}
|
||||||
|
|
||||||
|
|
||||||
|
## Functions
|
||||||
|
|
||||||
|
Go template ship with a few functions which provide basic functionality. The Go
|
||||||
|
template system also provides a mechanism for applications to extend the
|
||||||
|
available functions with their own. [Hugo template
|
||||||
|
functions](/layout/functions) provide some additional functionality we believe
|
||||||
|
are useful for building websites. Functions are called by using their name
|
||||||
|
followed by the required parameters separated by spaces. Template
|
||||||
|
functions cannot be added without recompiling hugo.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ add 1 2 }}
|
||||||
|
|
||||||
|
## Includes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ template "chrome/header.html" . }}
|
||||||
|
|
||||||
|
|
||||||
|
## Logic
|
||||||
|
|
||||||
|
Go templates provide the most basic iteration and conditional logic.
|
||||||
|
|
||||||
|
### Iteration
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example 1: Using Context**
|
||||||
|
|
||||||
|
{{ range array }}
|
||||||
|
{{ . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring value variable name**
|
||||||
|
|
||||||
|
{{range $element := array}}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 2: Declaring key and value variable name**
|
||||||
|
|
||||||
|
{{range $index, $element := array}}
|
||||||
|
{{ $index }}
|
||||||
|
{{ $element }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
### Conditionals
|
||||||
|
|
||||||
|
If, else, with, or, & and provide the framework for handling conditional
|
||||||
|
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||||
|
|
||||||
|
|
||||||
|
Go Templates treat the following values as false:
|
||||||
|
|
||||||
|
* false
|
||||||
|
* 0
|
||||||
|
* any array, slice, map, or string of length zero
|
||||||
|
|
||||||
|
**Example 1: If**
|
||||||
|
|
||||||
|
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 2: If -> Else**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{else}}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
**Example 3: And & Or**
|
||||||
|
|
||||||
|
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
|
||||||
|
**Example 4: With**
|
||||||
|
|
||||||
|
An alternative way of writing "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent.
|
||||||
|
|
||||||
|
The first example above could be simplified as:
|
||||||
|
|
||||||
|
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||||
|
|
||||||
|
**Example 5: If -> Else If**
|
||||||
|
|
||||||
|
{{ if isset .Params "alt" }}
|
||||||
|
{{ index .Params "alt" }}
|
||||||
|
{{ else if isset .Params "caption" }}
|
||||||
|
{{ index .Params "caption" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
## Pipes
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
A few simple examples should help convey how to use the pipe.
|
||||||
|
|
||||||
|
**Example 1 :**
|
||||||
|
|
||||||
|
{{ if eq 1 1 }} Same {{ end }}
|
||||||
|
|
||||||
|
is the same as
|
||||||
|
|
||||||
|
{{ eq 1 1 | if }} Same {{ end }}
|
||||||
|
|
||||||
|
It does look odd to place the if at the end, but it does provide a good
|
||||||
|
illustration of how to use the pipes.
|
||||||
|
|
||||||
|
**Example 2 :**
|
||||||
|
|
||||||
|
{{ index .Params "disqus_url" | html }}
|
||||||
|
|
||||||
|
Access the page parameter called "disqus_url" and escape the HTML.
|
||||||
|
|
||||||
|
**Example 3 :**
|
||||||
|
|
||||||
|
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
Could be rewritten as
|
||||||
|
|
||||||
|
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||||
|
Stuff Here
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
## Context (aka. the dot)
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Example:**
|
||||||
|
|
||||||
|
{{ $title := .Site.Title }}
|
||||||
|
{{ range .Params.tags }}
|
||||||
|
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
# Hugo Parameters
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
## Using Content (page) Parameters
|
||||||
|
|
||||||
|
In each piece of content you can provide variables to be used by the
|
||||||
|
templates. This happens in the [front matter](/content/front-matter).
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Here is the example front matter:
|
||||||
|
|
||||||
|
```
|
||||||
|
---
|
||||||
|
title: "Permalinks"
|
||||||
|
date: "2013-11-18"
|
||||||
|
aliases:
|
||||||
|
- "/doc/permalinks/"
|
||||||
|
groups: ["extras"]
|
||||||
|
groups_weight: 30
|
||||||
|
notoc: true
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is the corresponding code inside of the template:
|
||||||
|
|
||||||
|
{{ if not .Params.notoc }}
|
||||||
|
<div id="toc" class="well col-md-4 col-sm-6">
|
||||||
|
{{ .TableOfContents }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Using Site (config) Parameters
|
||||||
|
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||||
|
parameters, which are values which will be available to you in chrome.
|
||||||
|
|
||||||
|
For instance, you might declare:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
params:
|
||||||
|
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||||
|
TwitterUser: "spf13"
|
||||||
|
SidebarRecentLimit: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
Within a footer layout, you might then declare a `<footer>` which is only
|
||||||
|
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||||
|
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||||
|
again. This would let you easily update just your top-level config file each
|
||||||
|
January 1st, instead of hunting through your templates.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||||
|
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||||
|
</footer>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
An alternative way of writing the "if" and then referencing the same value
|
||||||
|
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||||
|
and skips the block if the variable is absent:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||||
|
<a href="https://twitter.com/{{.}}" rel="author">
|
||||||
|
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||||
|
alt="Twitter"></a>
|
||||||
|
</span>{{end}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||||
|
so, such as in this example:
|
||||||
|
|
||||||
|
```
|
||||||
|
<nav class="recent">
|
||||||
|
<h1>Recent Posts</h1>
|
||||||
|
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||||
|
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||||
|
{{end}}</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
[go]: https://golang.org/
|
||||||
|
[gohtmltemplate]: https://golang.org/pkg/html/template/
|
|
@ -1,2 +1,4 @@
|
||||||
- id: backTitle
|
- id: backTitle
|
||||||
translation: "🞀 Anasayfaya Dön"
|
translation: "🞀 Anasayfaya Dön"
|
||||||
|
- id: posts
|
||||||
|
translation: "Yazılar"
|
||||||
|
|
|
@ -50,7 +50,6 @@
|
||||||
<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
|
<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }} crossorigin="anonymous"></script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
{{- partial "analytics.html" . }}
|
|
||||||
{{- if templates.Exists "partials/extra-foot.html" -}}
|
{{- if templates.Exists "partials/extra-foot.html" -}}
|
||||||
{{ partial "extra-foot.html" . }}
|
{{ partial "extra-foot.html" . }}
|
||||||
{{- end }}
|
{{- end }}
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<main class="site-main">
|
<main class="site-main">
|
||||||
<h1 id="home-title">{{ .Title }}</h1>
|
|
||||||
{{- if .Content }}
|
{{- if .Content }}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
{{ template "_internal/google_analytics_async.html" . }}
|
|
|
@ -1,9 +1,8 @@
|
||||||
<header id="site-header" class="animated slideInUp">
|
<header id="site-header" class="animated slideInUp">
|
||||||
<div class="hdr-wrapper section-inner">
|
<div>
|
||||||
<div class="hdr-left">
|
<div class="back-title">
|
||||||
<div class="site-branding">
|
|
||||||
<a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
|
<a href="{{.Site.BaseURL}}">{{ i18n "backTitle" | safeHTML }}</a>
|
||||||
</div>
|
<h1 id="home-title">{{ i18n ( lower .Title ) }}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="hdr-right hdr-icons">
|
<div class="hdr-right hdr-icons">
|
||||||
{{ if (or .Params.images .Params.featuredImg) -}}
|
{{ if (or .Params.images .Params.featuredImg) -}}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
#page{height:100vh;margin:0}#spotlight{display:flex;min-height:100vh;flex-direction:column;align-items:start;justify-content:space-between;width:400px;margin:auto;font-size:1.5rem}@media(max-width:448px){#spotlight{margin-left:24px}}#home-center{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center}#home-title{color:#202020;font-family:Inter;font-size:48px;font-style:normal;font-weight:500;line-height:normal}#home-nav{display:flex;flex-direction:column}#home-nav a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}.post-item .post-day,.post-item a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}#site-footer,#home-footer{width:100%}#site-footer p,#home-footer p{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center}#site-footer a,#home-footer a{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center;text-decoration:none}#site-footer a:hover,#home-footer a:hover{text-decoration:underline}.posts-group{width:400px}.post-item{display:flex;justify-content:space-between;align-items:center;width:100%}.post-item a{font-size:30px}.post-item .post-day{font-size:30px;text-decoration:none;color:#787878}
|
#page{height:100vh;margin:0}#spotlight{display:flex;min-height:100vh;flex-direction:column;align-items:start;justify-content:space-between;max-width:400px;margin:auto;font-size:1.5rem}@media(max-width:448px){#spotlight{margin-left:24px}}#home-center{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;margin-top:10vh}#home-title{color:#202020;font-family:Inter;font-size:48px;font-style:normal;font-weight:500;line-height:normal}#home-nav{display:flex;flex-direction:column}#home-nav a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}.post-item .post-day,.post-item a{color:#252525;font-family:Inter;font-size:40px;font-style:normal;font-weight:400;line-height:150%;text-decoration-line:underline}#site-footer,#home-footer{width:100%}#site-footer p,#home-footer p{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center}#site-footer a,#home-footer a{color:#5c5c5c;font-family:Inter;font-size:20px;font-style:normal;font-weight:300;line-height:normal;display:flex;gap:8px;justify-content:center;text-decoration:none}#site-footer a:hover,#home-footer a:hover{text-decoration:underline}.posts-group{width:400px}.back-title{font-family:Inter;font-size:20px;font-style:normal;font-weight:400}.back-title a{text-decoration:none;color:#252525}.back-title a:hover{text-decoration:underline;color:#151515}.post-item{display:flex;justify-content:space-between;align-items:center;width:100%}.post-item a{font-size:30px}.post-item .post-day{font-size:30px;text-decoration:none;color:#787878}
|
|
@ -1 +1 @@
|
||||||
{"Target":"css/style.min.874b34949ea9c71723a116e0ec84bc0574d93ea8b368b26ebfc1979fcfc931b2.css","MediaType":"text/css","Data":{"Integrity":"sha256-h0s0lJ6pxxcjoRbg7IS8BXTZPqizaLJuv8GXn8/JMbI="}}
|
{"Target":"css/style.min.910364c57b3e8dcac2b40ba671bb4535eb005c27b07e67a0755ebc7b7c4d4b46.css","MediaType":"text/css","Data":{"Integrity":"sha256-kQNkxXs+jcrCtAumcbtFNesAXCewfmegdV68e3xNS0Y="}}
|
Loading…
Reference in New Issue
Block a user