Hugo 模板的原理及使用

原理概述

Hugo 的模板功能大大简化了对网站页面中重复元素的编辑，同时也能更方便的实现整个网站的视觉统一，他将页面中多次出现的部分独立成各个功能模块，每个模块都相当于一道「菜」，每个页面则通过不同的「菜单」来实现个性化的布局。

这当中的「菜」就是 Hugo layouts/partials/路径下的各个组件。而「菜单」则是layouts/_default/路径下的模板文件。

基本构成

下面是 Hugo 常见的模板及组件搭配，它包含了一个404.html404页面模板、一个index.html首页模板、一个_default文件夹内的三个默认页面模板及partials文件夹内的footer.html、header.html、head.html三个最基本的页面组件。

themes
└── XXX
    └── layouts
        ├── 404.html
        ├── _default
        │   ├── baseof.html
        │   ├── list.html 
        │   └── single.html
        ├── index.html
        └── partials
            ├── head.html
            ├── header.html
            └── footer.html

整体策略

当我们在建立多页面的网站时，首先要对整个网站的构成和布局有个大体概念，首先对各页面分类，找出布局相同的页面，给他们指定相同的页面模板。

在具体操作环节，初学者可先不做组件独立，直接在页面模板中编辑出页面所要展示的全部内容，待该页面调整完毕，做其他页面模板时，如果用到了之前页面的某个元素，则将之前页面模板的该元素独立出来做成组件，然后引用进这两个页面模板。

然后再找出那些在不同页面中重复出现的相同元素，进一步分类，把他们单独摘出来做成独立的组件，这样不同的页面就能通过页面模板提取组件。

自定义页面模板

在将页面分好类后，就要给他们定制专属页面模板了。

在模板文件中使用下述代码导入组件，其中组件名为header，以.html为后缀名。

{{ partial "header.html" . }}

下面是一组较基本的 Hugo 模板配置，他包含baseof.html、list.html、single.html、terms.html四个页面模板。

//baseof.html

{{ partial "header.html" . }}

{{ .Content }}

{{ partial "footer.html" . }}

//list.html
{{ partial "header.html" . }}

{{ .Content }}

<ul>
  {{ $pages := .Pages }}
  {{ if .IsHome }}{{ $pages = .Site.RegularPages }}{{ end }}
  {{ range (where $pages "Section" "!=" "") }}
  <li>
    <span class="date">{{ .Date.Format "2006/01/02" }}</span>
    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
  </li>
  {{ end }}
</ul>

{{ partial "footer.html" . }}

//single.html
{{ partial "header.html" . }}

<h1>{{ .Title | markdownify }}</h1>

{{ .Content }}

{{ partial "footer.html" . }}

//terms.html
{{ partial "header.html" . }}

<h1>{{ .Title }}</h1>

<ul class="terms">
  {{ range .Data.Terms }}
  <li>
    <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a> ({{ .Count }})
  </li>
  {{ end }}
</ul>

{{ partial "footer.html" . }}

基本语法介绍

循环

{{ range 变量}} 内容 {{ end }}

//遍历「变量」，输出「内容」。

条件判断

{{ if 条件 }} 结果 {{ end }}

//如果「条件」成立则输出「结果」，否则不输出。


{{ if not 条件 }} 结果 {{ end }}

//如果「条件」不成立则输出「结果」，否则不输出。


{{ if 条件 }} 结果1 {{else}} 结果2 {{end}}

//如果「条件」成立则输出「结果1」，否则输出「结果2」。

通过简单的「条件判断」可将上文提到的基本模板中的前两个合二为一，当页面为首页时使用baseof.html模板，否则使用list.html模板，写法如下。

{{ partial "header.html" . }}

{{if not .IsHome }}
<h1>{{ .Title | markdownify }}</h1>
{{ end }}

{{ .Content }}

<ul>
  {{ $pages := .Pages }}
  {{ if .IsHome }}{{ $pages = .Site.RegularPages }}{{ end }}
  {{ range (where $pages "Section" "!=" "") }}
  <li>
    <span class="date">{{ .Date.Format "2006/01/02" }}</span>
    <a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
  </li>
  {{ end }}
</ul>

{{ partial "footer.html" . }}

注释写法

{{/* 注释 */}}