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"
}
}
使用此 部分 模板：
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