Hugo 分页
在列表页面上显示大量页面对用户不友好:
- 庞大的列表可能令人生畏且难以导航。用户可能会迷失在大量的信息中。
- 大型页面加载时间较长,可能会让用户感到沮丧并导致他们离开网站。
- 如果没有过滤或组织,查找特定项目变成一项乏味的滚动练习。
通过分页 home、section、taxonomy 和 term 页面来改善可用性。
与分页相关的最常见模板错误是对给定列表页面调用分页多次。请参阅下面的 缓存 部分。
术语
- paginate(分页)
- 将 列表页面 分割为两个或多个子集。
- pagination(分页)
- 分页列表页面的过程。
- pager(分页器)
- 在分页期间创建,分页器包含列表页面的子集和指向其他分页器的导航链接。
- paginator(分页器集合)
- 分页器的集合。
配置
请参阅 配置分页。
方法
要在相应模板中的 home、section、taxonomy 或 term 页面上分页,请在 Page 对象上调用以下任一方法:
Paginate 方法更灵活,允许您:
- 分页任何页面集合
- 过滤、排序和分组页面集合
- 覆盖站点配置中定义的每个分页器的页面数量
相比之下,Paginator 方法分页传递给模板的页面集合,您无法覆盖每个分页器的页面数量。
示例
要使用 Paginate 方法分页列表页面:
{{ $pages := where site.RegularPages "Type" "posts" }}
{{ $paginator := .Paginate $pages.ByTitle 7 }}
{{ range $paginator.Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ partial "pagination.html" . }}在上面的示例中,我们:
- 构建页面集合
- 按标题排序页面集合
- 分页页面集合,每个分页器 7 页
- 遍历分页的页面集合,渲染指向每个页面的链接
- 调用嵌入式分页模板以在分页器之间创建导航链接
要使用 Paginator 方法分页列表页面:
{{ range .Paginator.Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ partial "pagination.html" . }}在上面的示例中,我们:
- 分页传递给模板的页面集合,使用默认的每个分页器页面数量
- 遍历分页的页面集合,渲染指向每个页面的链接
- 调用嵌入式分页模板以在分页器之间创建导航链接
缓存
与分页相关的最常见模板错误是对给定列表页面调用分页多次。
无论使用何种分页方法,初始调用都会被缓存且无法更改。如果您对给定列表页面调用分页多次,后续调用将使用缓存的结果。这意味着后续调用不会按编写的那样工作。
在有条件地分页时,不要使用 compare.Conditional 函数,因为它会急切地评估参数。而是使用 if-else 结构。
分组
将分页与任何 分组方法 一起使用。例如:
{{ $pages := where site.RegularPages "Type" "posts" }}
{{ $paginator := .Paginate ($pages.GroupByDate "Jan 2006") }}
{{ range $paginator.PageGroups }}
<h2>{{ .Key }}</h2>
{{ range .Pages }}
<h3><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h3>
{{ end }}
{{ end }}
{{ partial "pagination.html" . }}导航
如上面的示例所示,在分页器之间添加导航的最简单方法是使用 Hugo 的嵌入式分页模板:
{{ partial "pagination.html" . }}嵌入式分页模板有两种格式:default 和 terse。上面等同于:
{{ partial "pagination.html" (dict "page" . "format" "default") }}terse 格式具有较少的控件和页面槽,在样式化为水平列表时占用较少的空间。要使用 terse 格式:
{{ partial "pagination.html" (dict "page" . "format" "terse") }}使用任何 Pager 方法创建自定义导航组件:
- First
- 返回分页器集合中的第一个分页器。
- HasNext
- 报告当前分页器之后是否有分页器。
- Last
- 返回分页器集合中的最后一个分页器。
- Next
- 返回分页器集合中的下一个分页器。
- NumberOfElements
- 返回当前分页器中的页面数量。
- PageGroups
- 返回当前分页器中的页面分组。
- PageNumber
- 返回当前分页器在分页器集合中的编号。
- Pagers
- 返回分页器集合中的所有分页器。
- PagerSize
- 返回每个分页器中的页面数量。
- Pages
- 返回当前分页器中的页面。
- PageSize
- 返回每个分页器的页面数量。
- Prev
- 返回分页器集合中的上一个分页器。
- TotalNumberOfElements
- 返回分页器集合中的页面数量。
- TotalPages
- 返回分页器集合中的分页器数量。
- URL
- 返回当前分页器相对于站点根目录的 URL。
结构
下面的示例描述了分页列表页面时已发布站点的结构。
使用此内容:
content/
├── posts/
│ ├── _index.md
│ ├── post-1.md
│ ├── post-2.md
│ ├── post-3.md
│ └── post-4.md
└── _index.md使用此站点配置:
pagination:
disableAliases: false
pagerSize: 2
path: page
[pagination]
disableAliases = false
pagerSize = 2
path = 'page'
{
"pagination": {
"disableAliases": false,
"pagerSize": 2,
"path": "page"
}
}
使用此 部分 模板:
{{ range (.Paginate .Pages).Pages }}
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{{ partial "pagination.html" . }}已发布的站点具有以下结构:
public/
├── posts/
│ ├── page/
│ │ ├── 1/
│ │ │ └── index.html <-- 指向 public/posts/index.html 的别名
│ │ └── 2/
│ │ └── index.html
│ ├── post-1/
│ │ └── index.html
│ ├── post-2/
│ │ └── index.html
│ ├── post-3/
│ │ └── index.html
│ ├── post-4/
│ │ └── index.html
│ └── index.html
└── index.html要禁用第一个分页器的别名生成,请更改站点配置:
pagination:
disableAliases: true
pagerSize: 2
path: page
[pagination]
disableAliases = true
pagerSize = 2
path = 'page'
{
"pagination": {
"disableAliases": true,
"pagerSize": 2,
"path": "page"
}
}
现在已发布的站点将具有以下结构:
public/
├── posts/
│ ├── page/
│ │ └── 2/
│ │ └── index.html
│ ├── post-1/
│ │ └── index.html
│ ├── post-2/
│ │ └── index.html
│ ├── post-3/
│ │ └── index.html
│ ├── post-4/
│ │ └── index.html
│ └── index.html
└── index.html