基础模板和块

2 分钟阅读

Base Templates and Blocks - 基础模板和块

https://gohugo.io/templates/base/

基本模板和块结构允许您定义主模板的外壳（即页面的Chrome）。

block关键字允许您定义页面一个或多个主模板的外壳，然后根据需要填充或覆盖部分（portions ）。

基础模板查找顺序

基础模板查找顺序紧跟它所应用的模板的查找顺序（例如，_default/list.html）。

有关详细信息和示例，请参见模板查找顺序。

定义基础模板

以下定义了一个简单的基础模板 _default/baseof.html。作为默认模板，它是从所有页面渲染的外壳，除非您在查找顺序的开头指定另一个*baseof.html。

layouts/_default/baseof.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      <!-- Blocks may include default content. -->
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <!-- Code that all your templates share, like a header -->
    {{ block "main" . }}
      <!-- The part of the page that begins to differ between templates -->
    {{ end }}
    {{ block "footer" . }}
    <!-- More shared code, perhaps a footer but that can be overridden if need be in  -->
    {{ end }}
  </body>
</html>

覆盖基础模板

从上面的基本模板，您可以定义默认的列表模板。默认的列表模板将继承上面定义的所有代码，然后可以根据需要实现自己的"main"块：

layouts/_default/list.html

1
2
3
4
5
6
7
8
9
{{ define "main" }}
  <h1>Posts</h1>
  {{ range .Pages }}
    <article>
      <h2>{{ .Title }}</h2>
      {{ .Content }}
    </article>
  {{ end }}
{{ end }}

这将用实际有用的内容替换我们（基本上为空的）"main"块的内容，对于列表中的内容，我们没有定义"title"块，因此在列表中保留了来自基础模板的内容。

放置在块定义之外的代码会破坏您的布局，这甚至包括HTML注释。例如：

1
2
3
4
<!-- Seemingly harmless HTML comment..that will break your layout at build -->
{{ define "main" }}
...your code here
{{ end }}

请参见Hugo讨论论坛中的此主题。

以下显示了如何使用特定于默认单个页面模板的代码覆盖基础模板的"main"和"title"块区域：

layouts/_default/single.html

1
2
3
4
5
6
7
8
{{ define "title" }}
  <!-- This will override the default value set in baseof.html; i.e., "{{ .Site.Title }}" in the original example-->
  {{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

另请参阅

最后修改 May 22, 2023: 第一次提交 (9f24e27)