HUGO
Menu
GitHub 87548 stars Mastodon

Hugo 模板类型

创建不同类型的模板来渲染您的内容、资源和数据。

结构

在项目的根目录中的 layouts 目录中创建模板。

虽然您的网站可能不需要每个这些模板,但下面的示例是中等复杂度网站的典型示例。

layouts/
├── _markup/
│   ├── render-image.html   <-- 渲染钩子
│   └── render-link.html    <-- 渲染钩子
├── _partials/
│   ├── footer.html
│   └── header.html
├── _shortcodes/
│   ├── audio.html
│   └── video.html
├── books/
│   ├── page.html
│   └── section.html
├── films/
│   ├── view_card.html      <-- 内容视图
│   ├── view_li.html        <-- 内容视图
│   ├── page.html
│   └── section.html
├── baseof.html
├── home.html
├── page.html
├── section.html
├── taxonomy.html
└── term.html

Hugo 的 模板查找顺序 确定模板路径,允许您为任何页面创建独特的模板。

在创建模板时,您必须彻底了解模板查找顺序。模板选择基于模板类型、页面种类、内容类型、部分、语言和输出格式。

下面描述了每种模板类型的目的。

基础

基础 模板作为其他模板可以构建的基础布局。它通常定义 HTML 的常见结构组件,如 htmlheadbody 元素。它还经常包括在网站多个页面中出现的重复功能,如页眉、页脚、导航和脚本引用。通过在 基础 模板中定义这些常见方面,您避免了冗余,确保了一致性,并简化了网站的维护。

Hugo 可以将 基础 模板应用于以下模板类型:homepagesectiontaxonomytermsinglelistall。当 Hugo 解析任何这些模板类型时,只有在被解析的模板满足这些特定条件时才会应用 基础 模板:

  • 它必须包含至少一个 define 动作
  • 它只能包含 define 动作、空白和 模板注释。不允许其他内容。

如果模板不符合所有这些标准,Hugo 会按原样执行它,而不应用 基础 模板。

当 Hugo 应用 基础 模板时,它会用应用于基础模板的模板中相应的 define 动作的内容替换其 block 动作。

例如,下面的 基础 模板调用 partial 函数来包含 headheaderfooter 元素。block 动作充当占位符,其内容将被应用于基础模板的模板中匹配的 define 动作替换。

layouts/baseof.html
<!DOCTYPE html>
<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <header>
    {{ partial "header.html" . }}
  </header>
  <main>
    {{ block "main" . }}
      这将被应用于基础模板的模板中
      相应的 "define" 动作的内容替换。
    {{ end }}
  </main>
  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>
layouts/home.html
{{ define "main" }}
  这将替换基础模板中 "block" 动作的内容。
{{ end }}

Home(主页)

home 模板渲染网站的主页。

例如,Hugo 将 基础 模板应用于下面的 home 模板,然后渲染页面内容和网站常规页面的列表。

layouts/home.html
{{ define "main" }}
  {{ .Content }}
  {{ range .Site.RegularPages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。

Page(页面)

page 模板渲染常规页面。

例如,Hugo 将 基础 模板应用于下面的 page 模板,然后渲染页面标题和页面内容。

layouts/page.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

Section(部分)

section 模板渲染 部分 内页面的列表。

例如,Hugo 将 基础 模板应用于下面的 section 模板,然后渲染页面标题、页面内容和当前部分中页面的列表。

layouts/section.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。

Taxonomy(分类法)

taxonomy 模板渲染 分类法 中术语的列表。

例如,Hugo 将 基础 模板应用于下面的 taxonomy 模板,然后渲染页面标题、页面内容和当前分类法中 术语 的列表。

layouts/taxonomy.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。

taxonomy 模板中,Data 对象提供这些特定于分类法的方法:

Terms 方法返回 分类法对象,允许您调用其任何方法,包括 AlphabeticalByCount。例如,使用 ByCount 方法渲染按与每个术语关联的页面数量排序的术语列表:

layouts/taxonomy.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Data.Terms.ByCount }}
    <h2><a href="{{ .Page.RelPermalink }}">{{ .Page.LinkTitle }}</a> ({{ .Count }})</h2>
  {{ end }}
{{ end }}

Term(术语)

term 模板渲染与 术语 关联的页面列表。

例如,Hugo 将 基础 模板应用于下面的 term 模板,然后渲染页面标题、页面内容和与当前术语关联的页面列表。

layouts/term.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。

term 模板中,Data 对象提供这些特定于术语的方法:

Single(单个)

single 模板是 page 模板的回退。如果 page 模板不存在,Hugo 将查找 single 模板。

例如,Hugo 将 基础 模板应用于下面的 single 模板,然后渲染页面标题和页面内容。

layouts/single.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
{{ end }}

List(列表)

list 模板是 homesectiontaxonomyterm 模板的回退。如果这些模板类型之一不存在,Hugo 将查找 list 模板。

例如,Hugo 将 基础 模板应用于下面的 list 模板,然后渲染页面标题、页面内容和页面列表。

layouts/list.html
{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ end }}
{{ end }}

All(全部)

all 模板是 homepagesectiontaxonomytermsinglelist 模板的回退。如果这些模板类型之一不存在,Hugo 将查找 all 模板。

例如,Hugo 将 基础 模板应用于下面的 all 模板,然后根据其页面种类有条件地渲染页面。

layouts/all.html
{{ define "main" }}
  {{ if eq .Kind "home" }}
    {{ .Content }}
    {{ range .Site.RegularPages }}
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ end }}
  {{ else if eq .Kind "page" }}
    <h1>{{ .Title }}</h1>
    {{ .Content }}
  {{ else if in (slice "section" "taxonomy" "term") .Kind }}
    <h1>{{ .Title }}</h1>
    {{ .Content }}
    {{ range .Pages }}
      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
    {{ end }}
  {{ else }}
    {{ errorf "不支持的页面种类:%s" .Kind }}
  {{ end }}
{{ end }}

Partial(部分)

部分 模板通常用于渲染网站的组件,尽管您也可以创建返回值的 部分 模板。

例如,下面的 部分 模板渲染版权信息:

layouts/_partials/footer.html
<p>Copyright {{ now.Year }}。保留所有权利。</p>

通过调用 partialpartialCached 函数执行 部分 模板,可选地将上下文作为第二个参数传递:

layouts/baseof.html
{{ partial "footer.html" . }}

与其他模板类型不同,Hugo 在搜索匹配的 部分 模板时不考虑当前页面种类、内容类型、逻辑路径、语言或输出格式。但是,它确实应用了与其他模板类型相同的 名称 匹配逻辑。这意味着它首先尝试找到最具体的匹配,然后在找不到特定匹配时逐渐查找更通用的版本。

例如,使用此调用:

layouts/baseof.html
{{ partial "footer.section.de.html" . }}

Hugo 使用此查找顺序来查找匹配的模板:

  1. layouts/_partials/footer.section.de.html
  2. layouts/_partials/footer.section.html
  3. layouts/_partials/footer.de.html
  4. layouts/_partials/footer.html

部分 模板也可以在另一个模板内内联定义。但是,需要注意的是模板命名空间是全局的;确保这些 部分 模板具有唯一的名称以防止冲突。

值:{{ partial "my-inline-partial.html" . }}

{{ define "_partials/my-inline-partial.html" }}
  {{ $value := 32 }}
  {{ return $value }}
{{ end }}

Content view(内容视图)

内容视图 模板类似于 部分 模板,通过调用 Page 对象上的 Render 方法调用。与 部分 模板不同,内容视图 模板:

  • 继承当前页面的上下文
  • 可以针对任何页面种类、内容类型、逻辑路径、语言或输出格式
  • 可以位于 layouts 目录内的任何级别

例如,Hugo 将 基础 模板应用于下面的 home 模板,然后渲染页面内容和网站"films"部分中每个页面的卡片组件。

layouts/home.html
{{ define "main" }}
  {{ .Content }}
  <ul>
    {{ range where site.RegularPages "Section" "films" }}
      {{ .Render "view_card" }}
    {{ end }}
  </ul>
{{ end }}
layouts/films/view_card.html
<div class="card">
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  {{ .Summary }}
</div>

在上面的示例中,内容视图模板的名称以 view_ 开头。虽然不是严格要求,但此命名约定有助于区分内容视图模板与同一目录中的其他模板,提高组织性和清晰度。

Render hook(渲染钩子)

渲染钩子 模板覆盖 Markdown 到 HTML 的转换。

例如,下面的 渲染钩子 模板在每个标题的右侧添加锚链接。

layouts/_markup/render-heading.html
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{ .Text }}
  <a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>

渲染钩子模板 中了解更多信息。

Shortcode(短代码)

短代码 模板用于渲染网站的组件。与 部分内容视图 模板不同,短代码 模板从内容页面调用。

例如,下面的 短代码 模板从 全局资源 渲染音频元素。

layouts/_shortcodes/audio.html
{{ with resources.Get (.Get "src") }}
  <audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
{{ end }}

然后在标记内调用短代码:

content/example.md
{{< audio src=/audio/test.mp3 >}}

短代码模板 中了解更多信息。

Other(其他)

使用其他专用模板创建:


Last updated: January 1, 0001
Improve this page