(Hu)go模板入门
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>
- go语言快速入门:模板应用(13)
- go语言快速入门:模板应用(14)
- go语言快速入门:模板应用(15)
- go语言快速入门:template模板(12)
- go beego模板嵌套list
- Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates
- Go语言入门之字符串的截取和常用函数
- Go Revel - Templates(模板)
- Flask框架从入门到精通之模板表单(二十)
- T4模板生成代码入门1
- go语言入门<一>go语言安装
- go入门开始
- Smarty模板快速入门
- Smarty中文手册,Smarty教程,Smarty模板的入门教材
- Vue.js——60分钟webpack项目模板快速入门【8】
- go从入门到猝死 学习笔记 day3
- [前端] nodejs之express框架和ejs模板引擎的入门
- Go入门(五)-函数
- Go 编程语言入门教程 (二)
- VS2010/MFC编程入门之六(对话框:创建对话框模板和修改对话框属性)