Hugoでwebサイト構築(9) リストのページネーション(Pagination)

written: kengo
tag:

1. リストのページネーション

Hugoで自動的に生成されるリストページではPagination(ページネーション)の機能が使えます。ページネーションとは名前通り、リストを一定件数ごとに区切って複数ページ化してくれる機能です。前回、記事を列挙する際に用いた.Paginatorがページネーションの機能になります。

前回のSectionリストページでは.Paginatorから記事情報を10件に絞る処理を入れていましたが、絞った10件以外の記事情報はリスト化できない状況でした。 そこで、前回のコードに10件ずつ記事情報を表示していき、かつ次の10件をみられるような「ページめくりリンク」機能を追加していきます。

layouts/section/Food.html

{{ partial "site_header.html" . }}

    {{ range (.Paginator 10).Pages }} {{ .Render "list" }} {{ end }}
{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
{{ end }}
{{ partial "site_footer.html" . }}

上記のコードは.Paginatorの記事情報を10件に絞っていますが、記事が11件以上であった場合、画面下部に次のページへのリンクが表示されます。 if文を用いて次ページや前ページが存在しない場合、ページネーションのリンクは表示されないようになっています。

2. .Paginatorを使いこなす

.Paginatorはリストページを作るたびに、自分が現在何ページ目で、次のページは存在するのか、前のページは存在するのか、などの情報を持っています。 これらの機能を用いることで、上記のようなリストページのナビゲーション機能を作ることができます。

References