模板类型
结构
在项目根目录下的 layouts 目录中创建模板。
尽管您的站点可能不需要所有这些模板，但下面的示例对于中等复杂度的站点来说是典型的。
layouts/
├── _default/
│ ├── _markup/
│ │ ├── render-image.html <-- 渲染钩子
│ │ └── render-link.html <-- 渲染钩子
│ ├── baseof.html
│ ├── home.html
│ ├── section.html
│ ├── single.html
│ ├── taxonomy.html
│ └── term.html
├── articles/
│ └── card.html <-- 内容视图
├── partials/
│ ├── footer.html
│ └── header.html
└── shortcodes/
├── audio.html
└── video.html
Hugo 的 模板查找顺序 决定了模板路径，允许您为任何页面创建唯一的模板。
下面描述每种模板类型的用途。
基础模板
基础模板通过在 shell 内包装其他模板来减少重复代码。
例如，下面的基础模板调用 局部模板 函数包含每个页面的 head 、 header 和 footer 元素的局部模板，并使用 block 函数在每个页面的 main 元素内包含 home 、 single 、 section 、 taxonomy 和 term 模板。
<!DOCTYPE html>
<html lang="{{ or site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
{{ partial "head.html" . }}
</head>
<body>
<header>
{{ partial "header.html" . }}
</header>
<main>
{{ block "main" . }}{{ end }}
</main>
<footer>
{{ partial "footer.html" . }}
</footer>
</body>
</html>了解更多关于 基础模板 的信息。
首页模板
首页模板渲染您站点的首页。对于单页站点，这是唯一必需的模板。
例如，下面的首页模板从基础模板继承站点的 shell，并使用页面列表渲染首页内容。
{{ define "main" }}
{{ .Content }}
{{ range site.RegularPages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}了解更多关于 首页模板 的信息。
单页模板
单页模板渲染单个页面。
例如，下面的单页模板从基础模板继承站点的 shell，并渲染每个页面的标题和内容。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}了解更多关于 单页模板 的信息。
章节模板
章节模板通常渲染章节内的页面列表。
例如，下面的章节模板从基础模板继承站点的 shell，并渲染当前章节中的页面列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}了解更多关于 章节模板 的信息。
分类模板
分类模板渲染 分类 中的术语列表。
例如，下面的分类模板从基础模板继承站点的 shell，并渲染当前分类中的术语列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}了解更多关于 分类模板 的信息。
术语模板
术语模板渲染与 术语 关联的页面列表。
例如，下面的术语模板从基础模板继承站点的 shell，并渲染与当前术语关联的页面列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}了解更多关于 术语模板 的信息。
局部模板
局部模板通常用于渲染站点的组件，但您也可以创建返回值的局部模板。
例如，下面的局部模板渲染版权信息。
了解更多关于 局部模板 的信息。
内容视图
内容视图模板类似于局部模板，通过调用 Page 对象上的 Render 方法来调用。与局部模板不同，内容视图模板：
- 自动继承当前页面的上下文
- 遵循查找顺序，允许您定位给定的内容类型或章节
例如，下面的首页模板从基础模板继承站点的 shell，并为站点“articles”章节中的每个页面渲染一个卡片组件。
{{ define "main" }}
{{ .Content }}
<ul>
{{ range where site.RegularPages "Section" "articles" }}
{{ .Render "card" }}
{{ end }}
</ul>
{{ end }}<div class="card">
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
</div>了解更多关于 内容视图模板 的信息。
渲染钩子
渲染钩子模板覆盖 Markdown 到 HTML 的转换。
例如，下面的渲染钩子模板为外部链接添加 rel 属性。
{{- $u := urls.Parse .Destination -}}
<a href="{{ .Destination | safeURL }}"
{{- with .Title }} title="{{ . }}"{{ end -}}
{{- if $u.IsAbs }} rel="external"{{ end -}}
>
{{- with .Text | safeHTML }}{{ . }}{{ end -}}
</a>
{{- /* chomp trailing newline */ -}}了解更多关于 渲染钩子模板 的信息。
短代码
短代码模板用于渲染站点的组件。与局部模板不同，短代码模板是从内容页面调用的。
例如，下面的短代码模板从 全局资源 渲染音频元素。
{{ with resources.Get (.Get "src") }}
<audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
{{ end }}从您的内容页面调用短代码：
{{< audio src="audio/test.mp3" >}}了解更多关于 短代码模板 的信息。
其他
使用其他专用模板创建：