章节页面模板

Section Page Templates - 章节页面模板

https://gohugo.io/templates/section-templates/

​ 用于章节页面的模板是列表,因此具有所有可用于列举页面的变量和方法。

向章节模板添加内容和前置元数据

​ 为了有效利用章节页面模板,您应首先了解Hugo的内容组织方式,特别是添加内容和前置元数据到章节和其他列表页面的_index.md文件的目的。

章节模板查找顺序

​ 请参见模板查找

页面种类

​ Hugo 中的每个Page都有一个 .Kind 属性。

KindDescriptionExample
home主页的着陆页/index.html
page指定页面的着陆页my-post page (/posts/my-post/index.html)
section指定章节的着陆页posts section (/posts/index.html)
taxonomy分类的着陆页tags taxonomy (/tags/index.html)
term某一分类条目的着陆页term awesome in tags taxonomy (/tags/awesome/index.html)

.Site.GetPage with Sections

.Kind可以轻松地与模板中的where函数结合使用,创建特定类型的内容列表。这种方法非常适合创建列表,但有时您可能想通过章节的路径获取单个章节的索引页面。

.GetPage函数查找给定Kindpath的索引页。

​ 您可以使用两个参数调用.Site.GetPagekind(上述有效Kind之一)和kind value

例如:

  • {{ .Site.GetPage "section" "posts" }}
  • {{ .Site.GetPage "page" "search" }}

示例:创建默认章节模板

layouts/_default/section.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{{ define "main" }}
  <main>
      {{ .Content }}
          <ul class="contents">
          {{ range .Paginator.Pages }}
              <li>{{ .Title }}
                  <div>
                    {{ partial "summary.html" . }}
                  </div>
              </li>
          {{ end }}
          </ul>
      {{ partial "pagination.html" . }}
  </main>
{{ end }}

示例:使用 .Site.GetPage

.Site.GetPage 的示例假设有以下项目目录结构:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.
└── content
    ├── blog
    │   ├── _index.md # "title: My Hugo Blog" in the front matter
    │   ├── post-1.md
    │   ├── post-2.md
    │   └── post-3.md
    └── events #Note there is no _index.md file in "events"
        ├── event-1.md
        └── event-2.md

​ 如果没有找到 _index.md 页面,则 .Site.GetPage 将返回 nil。因此,如果 content/blog/_index.md 不存在,则该模板将输出该章节的名称:

1
<h1>{{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}</h1>

​ 由于 blog 有一个带有前置元数据的章节索引页位于 content/blog/_index.md,因此上述代码将返回以下结果:

1
<h1>My Hugo Blog</h1>

​ 但如果我们尝试在 events 章节使用相同的代码,则 Hugo 会默认使用章节标题,因为没有 content/events/_index.md 可供提取内容和前置元数据:

1
<h1>{{ with .Site.GetPage "section" "events" }}{{ .Title }}{{ end }}</h1>

​ 然后返回以下结果:

1
<h1>Events</h1>

另请参阅

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