GO-Hugo模块

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 &#xA9; 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>
上一篇:js基础梳理-如何理解作用域和作用域链?


下一篇:使用Hugo框架搭建博客的过程 - 部署