HUGO
+++
Hugo为其模板引擎使用了出色的Go html / template库。它是一种非常轻量级的引擎,提供了非常少量的逻辑。根据我们的经验,创建一个好的静态网站只是适当的逻辑量。如果您使用了来自不同语言或框架的其他模板系统,则会在Go模板中发现很多相似之处。
本文档是使用Go模板的简要入门。在围棋文档 提供更多的细节。gohtmltemplate提供更多的细节。
Go模板简介
Go模板提供了一种非常简单的模板语言。它坚持认为,只有最基本的逻辑属于模板或视图层。这种简单性的结果是Go模板可以非常快速地进行解析。
Go模板的独特之处在于它们具有内容意识。变量和内容将根据使用环境进行清理。可以在Go docs中找到更多详细信息。
基本语法
Golang模板是HTML文件,带有变量和函数。
Go变量和函数可在{{}}中访问
访问预定义变量“foo”:
{{ foo }}
参数之间用空格分隔
用输入1、2调用add函数:
{{ add 1 2 }}
通过点表示法访问方法和字段
访问页面参数“栏”
{{ .Params.bar }}
括号可用于将项目分组在一起
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
变数
每个Go模板都有一个可用的结构(对象)。在hugo中,每个模板都将传递页面或节点结构,具体取决于您呈现的页面类型。有关更多详细信息,请参见variables页面。
通过引用变量名称来访问变量。
<title>{{ .Title }}</title>
也可以定义和引用变量。
{{ $address := "123 Main St."}}
{{ $address }}
功能
Go模板附带了一些提供基本功能的功能。Go模板系统还为应用程序提供了一种机制,以扩展其自身的可用功能。 Hugo template
functions 提供了一些我们认为对构建网站有用的附加功能。通过使用函数名称,然后以空格分隔所需的参数来调用函数。如果不重新编译hugo,则无法添加模板功能。
例:
{{ add 1 2 }}
包括
当包含另一个模板时,您将向其传递可以访问的数据。要传递当前上下文,请记住要包含尾随点。模板位置将始终从Hugo的/ layout /目录开始。
例:
{{ template "chrome/header.html" . }}
逻辑
Go模板提供了最基本的迭代和条件逻辑。
迭代
就像在Go中一样,Go模板大量使用范围来遍历地图,数组或切片。以下是如何使用范围的不同示例。
示例1:使用上下文
{{ range array }}
{{ . }}
{{ end }}
示例2:声明值变量名称
{{range $element := array}}
{{ $element }}
{{ end }}
示例2:声明键和值变量名称
{{range $index, $element := array}}
{{ $index }}
{{ $element }}
{{ end }}
有条件的
If,else,with,or&和提供在Go Templates中处理条件逻辑的框架。像范围一样,每个语句都用结束 end
.
Go Templates将以下值视为false:
- false
- 0
- 长度为零的任何数组,切片,映射或字符串
示例1: If
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
示例2:If -> Else
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{else}}
{{ index .Params "caption" }}
{{ end }}
示例3: And & Or
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
示例4: With
编写“ if”然后引用相同值的另一种方法是使用“ with”代替。With将上下文重新绑定.
在其范围内,如果不存在变量,则跳过该块。
上面的第一个示例可以简化为:
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
示例5: If -> Else If
{{ if isset .Params "alt" }}
{{ index .Params "alt" }}
{{ else if isset .Params "caption" }}
{{ index .Params "caption" }}
{{ end }}
Pipes
Go模板最强大的组件之一就是能够一次又一次地堆叠操作。这是通过使用管道完成的。从unix管道借用的概念很简单,每个管道的输出都成为下一个管道的输入。
由于Go模板的语法非常简单,因此管道对于将函数调用链接在一起至关重要。管道的一个限制是它们只能使用单个值,并且该值成为下一个管道的最后一个参数。
一些简单的示例应有助于传达如何使用管道。
范例1:
{{ if eq 1 1 }} Same {{ end }}
是相同的
{{ eq 1 1 | if }} Same {{ end }}
将if放在末尾看起来确实很奇怪,但是确实提供了如何使用管道的很好说明。
范例2:
{{ index .Params "disqus_url" | html }}
访问称为“ disqus_url”的页面参数并转义HTML。
例子3:
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
Stuff Here
{{ end }}
可以改写为
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
Stuff Here
{{ end }}
Context (aka. the dot)
关于Go模板,最容易理解的概念是{{。}}始终指当前上下文。在模板的顶层,这将是可供使用的数据集。在迭代内部,它将具有当前项目的值。在循环内部时,上下文已更改。。将不再引用整个页面可用的数据。如果需要从循环中访问它,则可能需要将其设置为变量,而不是取决于上下文。
例:
{{ $title := .Site.Title }}
{{ range .Params.tags }}
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
{{ end }}
注意一旦进入循环,{{的值。}} 已经改变。我们在循环外部定义了一个变量,因此我们可以从循环内部访问它。
Hugo 参数
Hugo提供了通过站点配置(用于站点范围的值)或每个特定内容的元数据将值传递给模板语言的选项。您可以定义任何类型的任何值(前端事务/配置格式支持),并在模板内部使用它们。
使用内容(页面)参数
在每个内容中,您都可以提供模板要使用的变量。这发生在 front matter.
此文档站点中使用了一个示例。大多数页面都受益于提供的目录。有时,TOC并没有多大意义。我们在某些页面的开头定义了一个变量,以关闭TOC的显示。
这是示例示例:
---
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 }}
使用站点(配置)参数
在*配置文件(例如,config.yaml
)中,您可以定义站点参数,这些参数将是您可以在chrome中使用的值。
例如,您可以声明:
params:
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
TwitterUser: "spf13"
SidebarRecentLimit: 5
然后,在页脚布局中,您可能会声明 <footer>
仅当提供了 CopyrightHTML
参数时才提供的,如果已提供参数,则将其声明为HTML安全的,这样就不会再次对HTML实体进行转义。这样一来,您可以在每年1月1日轻松地仅更新*配置文件,而不必遍历模板。
{{if .Site.Params.CopyrightHTML}}<footer>
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
</footer>{{end}}
编写“ if”然后引用相同值的另一种方法是使用“ with”代替。随着重新绑定上下文.在其范围内,如果变量不存在,则跳过该块:
{{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}}
最后,如果要从布局中提取“魔术常数”,则可以这样做,例如在以下示例中:
<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>