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.htmlHugo 的 模板查找顺序 确定模板路径,允许您为任何页面创建独特的模板。
在创建模板时,您必须彻底了解模板查找顺序。模板选择基于模板类型、页面种类、内容类型、部分、语言和输出格式。
下面描述了每种模板类型的目的。
基础
基础 模板作为其他模板可以构建的基础布局。它通常定义 HTML 的常见结构组件,如 html、head 和 body 元素。它还经常包括在网站多个页面中出现的重复功能,如页眉、页脚、导航和脚本引用。通过在 基础 模板中定义这些常见方面,您避免了冗余,确保了一致性,并简化了网站的维护。
Hugo 可以将 基础 模板应用于以下模板类型:home、page、section、taxonomy、term、single、list 和 all。当 Hugo 解析任何这些模板类型时,只有在被解析的模板满足这些特定条件时才会应用 基础 模板:
如果模板不符合所有这些标准,Hugo 会按原样执行它,而不应用 基础 模板。
当 Hugo 应用 基础 模板时,它会用应用于基础模板的模板中相应的 define 动作的内容替换其 block 动作。
例如,下面的 基础 模板调用 partial 函数来包含 head、header 和 footer 元素。block 动作充当占位符,其内容将被应用于基础模板的模板中匹配的 define 动作替换。
<!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>{{ define "main" }}
这将替换基础模板中 "block" 动作的内容。
{{ end }}Home(主页)
home 模板渲染网站的主页。
例如,Hugo 将 基础 模板应用于下面的 home 模板,然后渲染页面内容和网站常规页面的列表。
{{ define "main" }}
{{ .Content }}
{{ range .Site.RegularPages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。
Page(页面)
page 模板渲染常规页面。
例如,Hugo 将 基础 模板应用于下面的 page 模板,然后渲染页面标题和页面内容。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}Section(部分)
section 模板渲染 部分 内页面的列表。
例如,Hugo 将 基础 模板应用于下面的 section 模板,然后渲染页面标题、页面内容和当前部分中页面的列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。
Taxonomy(分类法)
taxonomy 模板渲染 分类法 中术语的列表。
例如,Hugo 将 基础 模板应用于下面的 taxonomy 模板,然后渲染页面标题、页面内容和当前分类法中 术语 的列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}页面集合快速参考指南 描述了过滤、排序和分组页面集合的方法和函数。
在 taxonomy 模板中,Data 对象提供这些特定于分类法的方法:
Terms 方法返回 分类法对象,允许您调用其任何方法,包括 Alphabetical 和 ByCount。例如,使用 ByCount 方法渲染按与每个术语关联的页面数量排序的术语列表:
{{ 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 模板,然后渲染页面标题、页面内容和与当前术语关联的页面列表。
{{ 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 模板,然后渲染页面标题和页面内容。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}List(列表)
list 模板是 home、section、taxonomy 和 term 模板的回退。如果这些模板类型之一不存在,Hugo 将查找 list 模板。
例如,Hugo 将 基础 模板应用于下面的 list 模板,然后渲染页面标题、页面内容和页面列表。
{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ range .Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ end }}All(全部)
all 模板是 home、page、section、taxonomy、term、single 和 list 模板的回退。如果这些模板类型之一不存在,Hugo 将查找 all 模板。
例如,Hugo 将 基础 模板应用于下面的 all 模板,然后根据其页面种类有条件地渲染页面。
{{ 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(部分)
部分 模板通常用于渲染网站的组件,尽管您也可以创建返回值的 部分 模板。
例如,下面的 部分 模板渲染版权信息:
<p>Copyright {{ now.Year }}。保留所有权利。</p>通过调用 partial 或 partialCached 函数执行 部分 模板,可选地将上下文作为第二个参数传递:
{{ partial "footer.html" . }}与其他模板类型不同,Hugo 在搜索匹配的 部分 模板时不考虑当前页面种类、内容类型、逻辑路径、语言或输出格式。但是,它确实应用了与其他模板类型相同的 名称 匹配逻辑。这意味着它首先尝试找到最具体的匹配,然后在找不到特定匹配时逐渐查找更通用的版本。
例如,使用此调用:
{{ partial "footer.section.de.html" . }}Hugo 使用此查找顺序来查找匹配的模板:
layouts/_partials/footer.section.de.htmllayouts/_partials/footer.section.htmllayouts/_partials/footer.de.htmllayouts/_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"部分中每个页面的卡片组件。
{{ define "main" }}
{{ .Content }}
<ul>
{{ range where site.RegularPages "Section" "films" }}
{{ .Render "view_card" }}
{{ end }}
</ul>
{{ end }}<div class="card">
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ .Summary }}
</div>在上面的示例中,内容视图模板的名称以 view_ 开头。虽然不是严格要求,但此命名约定有助于区分内容视图模板与同一目录中的其他模板,提高组织性和清晰度。
Render hook(渲染钩子)
渲染钩子 模板覆盖 Markdown 到 HTML 的转换。
例如,下面的 渲染钩子 模板在每个标题的右侧添加锚链接。
<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
{{ .Text }}
<a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>在 渲染钩子模板 中了解更多信息。
Shortcode(短代码)
短代码 模板用于渲染网站的组件。与 部分 或 内容视图 模板不同,短代码 模板从内容页面调用。
例如,下面的 短代码 模板从 全局资源 渲染音频元素。
{{ with resources.Get (.Get "src") }}
<audio controls preload="auto" src="{{ .RelPermalink }}"></audio>
{{ end }}然后在标记内调用短代码:
{{< audio src=/audio/test.mp3 >}}在 短代码模板 中了解更多信息。
Other(其他)
使用其他专用模板创建: