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

Hugo 模板基础知识

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

注释内容

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

声明变量和修改变量的值

  • 声明变量:{{- $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.htmllayouts/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>

相关链接

  • [模板hugo](https://gohugo.io/templates/introduction/)

回到顶部

Copyright © 2017-2024 1px.run (像素教程) Distributed by an MIT license.

Site updated at 2024-05-27 10:25