Hugo 模板常用参数

Hugo 主题模板语言使用的就是 Go 模板语言，所以语法基本是一样的

Hugo 模板基础知识

模板标签由两个花括号构成，{{ }}
.表示当前对象，比如.Title
和 HTML 一起输出一个变量，比如 <h1>{{ .Title }}</h1>
在花括号内侧加 - 可清除左右侧的任何空白不可见字符：比如<h1> {{- .Title -}} </h1>
if、range、with 代码块中定义的变量仅在代码块中引用
if、range、with 代码块中引用全局变量需要加前缀$

注释内容

{{/* 被注释的内容 */}}

声明变量和修改变量的值

声明变量：{{- $name := "变量的值" -}}
修改变量的值：{{- $name = "被修改的变量值" -}}

with 关键字

with 判断变量是否存在，如果存在就执行 with 内代码
with 内代码可以用 . 点表示当前对象

{{- with .Params.image -}}
    <img src="{{ . }}" alt="1px Image">
{{- end -}}

变量判断、逻辑判断

判断是否是首页，假设站点标题（site tile）是像素教程，页面标题(title)是如何使用Hugo 模板写主题
- 是首页显示：像素教程
- 不是首页显示：如何使用Hugo 模板写主题 - 像素教程

{{- if .IsHome -}}
    {{- .Site.Title }}
{{- else -}}
    {{- .Title }} - {{ .Site.Title -}}
{{- end -}}

其实示例

文章中 image 有配置时显示图片，无显示文字 no image

  {{ if .Params.image }}
    <img src="{{ .Params.image }}" alt="{{ .Title }}">
  {{ else }}
    no image
  {{ end }}

if 逻辑判断

eq：等于
- 站点标题是否是像素教程：{{- if eq .Site.Title "像素教程" -}}
ne：不等于
lt：小于
le：小于等于
gt：大于
- $page_view 是否大于2 ：{{- if gt $page_view 2 -}}
ge：大于等于
and：逻辑与
or：逻辑或
not：逻辑非
多个逻辑
- $page_view 是否大于2 小于5 ：{{- if and (gt $page_view 2) (lt $page_view 5) -}}

模板引入文件（共用模块）

以下实例中，header.html 是 layouts/partials 中的一个文件

{{ partial "header.html" . }}

循环遍历

{{- range .Site.Pages -}}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{- end -}}

range first 只取几条数据

以下案例，取站点页面，只取2条数据

{{- range first .2 .Site.Pages -}}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
{{- end -}}

relURL 使用示例

relURL 会转换成站点网址，假设站点网址是https://1px.run/，以下案例输出结果为 https://1px.run/hugo/template/

<a href="{{ relURL "hugo/template/" }}">Hugo 模板教程</a>

truncate 函数截取文字

以下案例截取长度为5，最后只输出前5个字，后面自动加上...，以下案例输出结果为像素教程的...

{{- "像素教程的标题" | truncate 5 -}}

主题模板文件结构

layouts
- _default
  - baseof.html
  - list.html 全部列表页
  - single.html 内容页（文章）
  - home.html 首页
  - term.html 标签（某个标签有哪些内容）
  - terms.html 全部标签（列出全部标签）
- partials
  - footer.html
  - head.html
  - header.html
- 404.html
当 home、term、terms等文件不存在时默认使用 list.html ，如果存在则跳过 list.html 使用对应的。
- 如果仅使用 list
  - list 没有包含针对 terms 的代码，则无法正常显示

列表

列出站点全部标签tags（创建标签云）

<ul class="tags-list">
  {{ range .Site.Taxonomies.tags }}
          <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> {{ .Count }}</li>
  {{ end }}
</ul>

调用当前文章内容的全部标签tag

<p>
{{ range .Params.tags }} {{ $href := print (absURL "tags/") (urlize .) }}
  <a href="{{ $href }}/">{{ . }}</a>
{{ end }}
</p>