Hugo中的内容列表
什么是列表页面模板?
列表页面模板是一种用于在单个HTML页面中呈现多个内容的模板。唯一的例外是首页,它仍然是一个列表,但有自己的专用模板。
Hugo在真实意义上使用了“列表”这个术语,即按字母或数字顺序进行的连续排列的材料。Hugo在传统上将内容以列表方式列出的任何输出HTML页面上使用列表模板:
有关模板查找顺序,请参见模板查找顺序。
列表页面的概念来自于网络的层次结构心智模型,通过以下视觉方式最能直观地展示:
列表默认值
默认模板
由于部分列表和分类列表(不包括分类术语列表)在模板上都是列表,它们在查找顺序中都有相同的默认值 _default/list.html
或 themes/<THEME>/layouts/_default/list.html
。此外,部分列表和分类列表都有自己的默认模板_default
。
完整参考,请参阅模板查找顺序。
向列表页面添加内容和前置元数据
从v0.18开始,Hugo中的一切都是一个Page
。这意味着列表页面和首页可以拥有关联的内容文件(即_index.md
),其中包含页面的元数据(即前置元数据)和内容。
这个新的模型允许您通过.Params
在列表模板中包含列表特定的前置元数据,并且意味着列表模板(例如,layouts/_default/list.html
)可以访问所有的页面变量。
项目目录示例
以下是典型Hugo项目目录中content
的示例:
.
...
├── content
| ├── posts
| | ├── _index.md
| | ├── post-01.md
| | └── post-02.md
| └── quote
| | ├── quote-01.md
| | └── quote-02.md
...
使用上述示例,假设您在 content/posts/_index.md
中有以下内容:
---
title: 我的Go之旅
date: 2017-03-23
publishdate: 2017-03-24
---
我决定在2017年3月开始学习Go语言。
通过这个新博客,跟随我的旅程。
您现在可以在您的列表模板中访问这个_index.md
的内容:
{{ define "main" }}
<main>
<article>
<header>
<h1>{{ .Title }}</h1>
</header>
<!-- "{{ .Content }}" 从相应的 _index.md 的 markdown 内容中获取-->
{{ .Content }}
</article>
<ul>
<!-- 遍历 content/posts/*.md -->
{{ range .Pages }}
<li>
<a href="{{ .Permalink }}">{{ .Date.Format "2006-01-02" }} | {{ .Title }}</a>
</li>
{{ end }}
</ul>
</main>
{{ end }}
以上会输出以下HTML:
<!--你的baseof的顶部-->
<main>
<article>
<header>
<h1>我的Go之旅</h1>
</header>
<p>我决定在2017年3月开始学习Go语言。</p>
<p>通过这个新博客,跟随我的旅程。</p>
</article>
<ul>
<li><a href="/posts/post-01/">文章 1</a></li>
<li><a href="/posts/post-02/">文章 2</a></li>
</ul>
</main>
<!--你的baseof的底部-->
没有_index.md
的列表页面
您不需要为每个列表页面(即部分、分类、分类术语等)或首页创建一个_index.md
文件。如果在呈现列表模板时Hugo在相应的内容部分中找不到_index.md
文件,页面将被创建,但没有{{ .Content }}
,仅有.Title
等的默认值。
如果将相同的layouts/_default/list.html
模板应用于上面的quote
部分,将呈现以下输出。请注意, quote
没有_index.md
文件:
<!--your baseof-->
<main>
<article>
<header>
<!--由于没有内容文件可以提供“title:”字段,Hugo假设 .Title 是该部分的名称-->
<h1>Quotes</h1>
</header>
</article>
<ul>
<li><a href="https://example.org/quote/quotes-01/">Quotes 1</a></li>
<li><a href="https://example.org/quote/quotes-02/">Quotes 2</a></li>
</ul>
</main>
<!--your baseof-->
示例列表模板
部分模板
以下列表模板在spf13.com上的模板经过了轻微修改。它使用了partial模板作为页面渲染的外壳,而不是使用base模板。后续的示例还使用了内容展示模板 li.html
或 summary.html
。
{{ partial "header.html" . }}
{{ partial "subheader.html" . }}
<main>
<div>
<h1>{{ .Title }}</h1>
<ul>
<!--对每个content/posts/*.md渲染li.html文件-->
{{ range .Pages }}
{{ .Render "li" }}
{{ end }}
</ul>
</div>
</main>
{{ partial "footer.html" . }}
分类模板
{{ define "main" }}
<main>
<div>
<h1>{{ .Title }}</h1>
<!--遍历与特定分类术语关联的每个内容文件,并渲染summary.html内容视图-->
{{ range .Pages }}
{{ .Render "summary" }}
{{ end }}
</div>
</main>
{{ end }}
对内容进行排序
默认情况下,Hugo按以下顺序对页面集合进行排序:
- 页面 [权重(weight)][weight]
- 页面 [日期(date)](降序)
- 页面 [链接标题(linkTitle)],回退到页面 [标题(title)]
- 页面文件路径(如果页面由文件支持)
日期:(date) /zh/methods/pages_date 权重:(weight) /zh/methods/pages_weight 链接标题:(linkTitle) /zh/methods/pages_linktitle 标题:(title) /zh/methods/pages_title
使用下面任意方法之一更改排序顺序。
- .ByDate
- 返回按日期升序排序的给定页面集合。
- .ByLastmod
- 返回按照最后修改日期升序排序的给定页面集合。
- .ByParam
- 返回给定页面集合,按照给定参数以升序排序。
- .按标题排序
- 按标题以升序返回给定页面集合。
- .按发布日期排序
- 返回给定页面集合按发布日期升序排序的结果。
- .按权重排序
- 按照给定的页面集合以权重升序返回结果。
- .按语言排序
- 返回以升序排列的给定页面集合,按照语言排序。
- .按长度排序
- 以升序返回给定的页面集合,按内容长度排序。
- .反向
- 以反向顺序返回给定页面集合。
- .通过过期日期排序
- 返回给定页面集合,按照过期日期升序排序。
- .通过链接标题排序
- 返回按链接标题升序排列的给定页面集合,如果链接标题未定义,则回退到标题。
对内容进行分组
使用下面任意方法之一,根据字段、参数或日期对内容进行分组。
- .GroupBy
- 按给定字段将给定页面集合分组并按升序排列。
- .GroupByDate
- 返回给定页面集合按日期降序分组。
- .GroupByExpiryDate
- 根据到期日期将给定的页面集合进行分组,并按降序排列。
- .GroupByLastmod
- 返回按最后修改日期倒序分组的页面集合。
- .GroupByParam
- 按照给定的参数以升序返回给定的页面集合。
- .GroupByParamDate
- 按给定的日期参数对给定的页面集合进行分组,按降序排列。
- .GroupByPublishDate
- 返回按发布日期对给定页面集合进行分组的结果,按降序排列。
- .反向
- 以反向顺序返回给定页面集合。
过滤和限制列表
有时你只想列出可用内容中的一部分。一个常见的是只在博客首页上显示[主要部分]的帖子。