分页
当使用 where
函数及其类似 SQL 的操作符 first
、last
和 after
与 Hugo 的分页功能结合使用时,可以充分发挥 Hugo 分页功能的实力。您还可以按照自己在 Hugo 中习惯的方式对内容进行 排序 。
配置分页
在您的网站配置中进行分页配置:
paginate
- 默认值为
10
。此设置可以在模板中进行覆盖。 paginatePath
- 默认值为
page
。允许您为分页页面设置不同的路径。
将 paginate
设置为正数将会将主页、部分页面和分类列表的分页为指定大小的块。但请注意,对于部分、分类和主页的分页页面的生成是懒加载的—只有在.Paginator
(参见下文)引用时才会创建这些页面。
paginatePath
用于调整分页导航器中的 URL(默认设置将会生成类似于 /page/1/
的 URL)。
列表分页页面
有两种配置和使用.Paginator
的方式:
- 最简单的方法就是在模板中调用
.Paginator.Pages
。它将包含该页面的分页页面。 - 使用可用的模板函数和排序选项选择其他一组页面,并将切片传递给
.Paginate
,例如:{{ range (.Paginate ( first 50 .Pages.ByTitle )).Pages }}
或{{ range (.Paginate .RegularPagesRecursive).Pages }}
。
对于给定的页面,它是上述选项之一。.Paginator
是静态的,一旦创建,就无法更改。
如果在同一页上多次调用.Paginator
或.Paginate
,则应确保所有调用相同。一旦生成页面时调用了.Paginator
或.Paginate
中的任何一个,其结果将被缓存,并且任何后续的类似调用将重用缓存的结果。这意味着不匹配第一个调用的任何此类调用将不会按照所编写的方式运行。
(请记住,函数参数是急切求值的,例如 $paginator := cond x .Paginator (.Paginate .RegularPagesRecursive)
这样的调用是一个您不应该使用的示例。请使用 if
/else
来确保仅执行一次求值。)
全局页面大小设置(Paginate
)可以通过在最后一个参数中提供正整数来覆盖。下面的示例将为每页显示五个项目:
{{ range (.Paginator 5).Pages }}
{{ $paginator := .Paginate (where .Pages "Type" "posts") 5 }}
还可以结合分页使用 GroupBy
函数:
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
构建导航
.Paginator
包含足够的信息来构建一个分页界面。
将以下内置模板(使用Bootstrap
兼容样式)添加到您的页面是最简单的方法:
{{ template "_internal/pagination.html" . }}
以下示例演示了如何在使用.Paginator
之前创建它:
{{ $paginator := .Paginate (where .Pages "Type" "posts") }}
{{ template "_internal/pagination.html" . }}
{{ range $paginator.Pages }}
{{ .Title }}
{{ end }}
如果没有 where
过滤器,上述示例会更简单:
{{ template "_internal/pagination.html" . }}
{{ range .Paginator.Pages }}
{{ .Title }}
{{ end }}
如果要构建自定义导航,可以使用 .Paginator
对象。该对象包括以下属性:
PageNumber
- 当前页在分页序列中的页码
URL
- 当前页的相对 URL
Pages
- 当前分页中的页面
NumberOfElements
- 本页上的元素数量
HasPrev
- 当前页之前是否有页
Prev
- 上一页的分页器
HasNext
- 当前页之后是否有页
Next
- 下一页的分页器
First
- 第一页的分页器
Last
- 最后一页的分页器
Pagers
- 可用于构建分页菜单的分页器列表
PageSize
- 每个分页器的大小
TotalPages
- 分页器中的页面数量
TotalNumberOfElements
- 此分页器中所有页面上的元素数量
附加信息
页面的生成遵循以下形式(BLANK
表示无值):
[部分/分类/空]/index.html
[部分/分类/空]/page/1/index.html => 重定向到 [部分/分类/空]/index.html
[部分/分类/空]/page/2/index.html
....