ブログなどでよく見かける「一覧ページを複数ページに分割する方法」です。ページャー (pager)についても解説します。
ページャーとは
ページャーとは、Googleの検索結果のページ下部に表示される下記のようなものです。
ページが縦に長くなり過ぎないように一覧ページを複数のページに分割することで、閲覧者の利便性を向上させることがその目的です。
一覧ページを分割数する
Hugoで一覧ページを分割するのは非常に簡単です。もっともシンプルな実装はこんな感じになるでしょう。
<ul>
{{- range .Paginator.Pages }}
<li><a href="{{ .RelPermalink }}">{{ .Title }}</a>
{{- end }}
</ul>
.Paginator.Pagesを{{ range }} で回すだけです。
デフォルトでは、10記事ごとの一覧ページが作成されるようになっています。
これを20記事ずつに変更するには、設定ファイルである config.toml に、Paginate = 20を追記するだけです。
これだけだと生成されるHTMLは{{ range first 10 }}と同であり、次のページに移動することができません。
したがって、分割したそれぞれのページに移動できる仕組みを作る必要があります。
ページネーションの実装
これには2つのやり方があります。
- Hugoの機能を使う
- 自分で実装する
HugoのPagination機能を使う
{{ template "_internal/pagination.html" . }}を呼び出すだけで、以下の様なHTMLが生成されます。
<ul class="pagination">
<li class="page-item">
<a href="/" class="page-link" aria-label="First"><span aria-hidden="true">««</span></a>
</li>
<li class="page-item disabled">
<a class="page-link" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li class="page-item active">
<a class="page-link" href="/">1</a>
</li>
<li class="page-item">
<a class="page-link" href="/page/2/">2</a>
</li>
<li class="page-item">
<a class="page-link" href="/page/3/">3</a>
</li>
<li class="page-item">
<a href="/page/2/" class="page-link" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
<li class="page-item">
<a href="/page/3/" class="page-link" aria-label="Last"><span aria-hidden="true">»»</span></a>
</li>
</ul>
後は、それぞれのクラスにCSSを当てるだけです。
自分でページネーションを実装する
これを自分で作るとなるとかなり複雑なロジックを組まないとなりません。下記のページが参考になるかと思います。
How to build custom Hugo pagination
使いまわし
作成したコードを、「layout」➡「partials」にpagination.htmlという名前で保存します。
そうすれば、index.htmlだけでなくlist.htmlなどでも、
{{- partial "pagination.html" . -}}
を呼び出すことでペジネーションの使いまわしが可能です。
ページネーションに固定ページが含まれてしまう場合
Build Optionを設定することで、特定のページをペジネーションの対象から除外することが出来ます。
