HUGO
Menu
GitHub 87548 stars Mastodon

Hugo 分页

将列表页面分割为两个或多个子集。

在列表页面上显示大量页面对用户不友好:

  • 庞大的列表可能令人生畏且难以导航。用户可能会迷失在大量的信息中。
  • 大型页面加载时间较长,可能会让用户感到沮丧并导致他们离开网站。
  • 如果没有过滤或组织,查找特定项目变成一项乏味的滚动练习。

通过分页 homesectiontaxonomyterm 页面来改善可用性。

与分页相关的最常见模板错误是对给定列表页面调用分页多次。请参阅下面的 缓存 部分。

术语

paginate(分页)
列表页面 分割为两个或多个子集。
pagination(分页)
分页列表页面的过程。
pager(分页器)
在分页期间创建,分页器包含列表页面的子集和指向其他分页器的导航链接。
paginator(分页器集合)
分页器的集合。

配置

请参阅 配置分页

方法

要在相应模板中的 homesectiontaxonomyterm 页面上分页,请在 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" . }}

在上面的示例中,我们:

  1. 构建页面集合
  2. 按标题排序页面集合
  3. 分页页面集合,每个分页器 7 页
  4. 遍历分页的页面集合,渲染指向每个页面的链接
  5. 调用嵌入式分页模板以在分页器之间创建导航链接

要使用 Paginator 方法分页列表页面:

{{ range .Paginator.Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}

{{ partial "pagination.html" . }}

在上面的示例中,我们:

  1. 分页传递给模板的页面集合,使用默认的每个分页器页面数量
  2. 遍历分页的页面集合,渲染指向每个页面的链接
  3. 调用嵌入式分页模板以在分页器之间创建导航链接

缓存

与分页相关的最常见模板错误是对给定列表页面调用分页多次。

无论使用何种分页方法,初始调用都会被缓存且无法更改。如果您对给定列表页面调用分页多次,后续调用将使用缓存的结果。这意味着后续调用不会按编写的那样工作。

在有条件地分页时,不要使用 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" . }}

嵌入式分页模板有两种格式:defaultterse。上面等同于:

{{ partial "pagination.html" (dict "page" . "format" "default") }}

terse 格式具有较少的控件和页面槽,在样式化为水平列表时占用较少的空间。要使用 terse 格式:

{{ partial "pagination.html" (dict "page" . "format" "terse") }}

要覆盖 Hugo 的嵌入式分页模板,请将 源代码 复制到 layouts/_partials 目录中同名的文件,然后在模板中使用 partial 函数调用它:

{{ partial "pagination.html" . }}

使用任何 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"
   }
}

使用此 部分 模板:

layouts/section.html
{{ 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

Last updated: January 1, 0001
Improve this page