列表页用于在单个页面中集中展示某一类的信息, 如: 某个section下的所有文章, 或者 列出所有的tags, 又或者列出某个标签下的所有文章.

hugo中的列表类页面包括: site homepage(首页), section page(文章目录页), taxonomy list(某一分类的文章列表), taxonomy terms list(所有的分类)

一切皆页面

在hugo 0.18 版中提出了 “everything in Hugo is a Page” 的概念, 这意味着列表页面可以有关联的content files, 即_index.md文件. content目录下的_index.md和首页相关, 各个子目录下的_index.md和对应的section page相关, taxonomy list 和 taxonomy terms list需要在content目录下面创建特定名称的目录(tags或categories)并在里面添加_index.md文件

示例

1
2
3
4
5
6
7
8
├── content
|   ├── posts
|   |   ├── _index.md
|   |   ├── post-01.md
|   |   └── post-02.md
|   └── quote
|   |   ├── quote-01.md
|   |   └── quote-02.md

假设content/posts/_index.md具有以下内容

1
2
3
4
5
6
7
---
title: 新的开始
date: 2019-11-02
---
今天, 我开始了新的blog之旅

这得益于发现了hugo这么好的静态博客系统

现在可以在seciton模板中访问_index.md的内容

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
// 模板页的位置 layouts/_default/section.html 
{{ define "main" }}
<main>
    <article>
        <header>
            <h1>{{.Title}}</h1>
        </header>
        <!-- "{{.Content}}" 从posts/_index.md中读取内容 -->
        {{.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代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<main>
    <article>
        <header>
            <h1>新的开始</h1>
        </header>
        <p>今天, 我开始了新的blog之旅</p>
        <p>这得益于发现了hugo这么好的静态博客系统</p>
    </article>
    <ul>
        <li><a href="/posts/post-01/">Post 1</a></li>
        <li><a href="/posts/post-02/">Post 2</a></li>
    </ul>
</main>

注意: _index.md不是必须的, 如果没有找到_index.md,hugo会使用一些默认值

默认列表模板

这些列表页在layouts/_default/themes/<THEME>/layouts/_default/下都有自己专属的默认模板, 其中section page和taxonomy list还可以公用list.html模板.

1
2
3
4
layouts/_default/index.html       //  site homepage
layouts/_default/section.html     //  section page
layouts/_default/taxonomy.html    //  taxonomy list
layouts/_default/terms.html       //  taxonomy terms list

内容排序

列表页是对某一类信息集中展示, hugo提供了一些排序的方法. 下面列出一些比较常用的方法.

优先级: Weight > Date > LinkTitle > FilePath

By Weight

根据优先级排序, weight的值越小排序越靠前

By Date

更具创建日期排序, 最新创建的内容排在前面.

Reverse Order

倒序

1
2
3
4
5
6
7
8
<ul>
    {{ range .Pages.ByDate.Reverse }}
        <li>
            <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
            <time>{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
        </li>
    {{ end }}
</ul>