ページネーション (Pagination) を実装する。

メモ：2018-12-13 12:25:06 +0900 JST Category：hugo

BLOG 形式のホームページで使われるページネーションを実装します。

Paginator

リストテンプレートでセクション内のページを列挙する場合、 rang .Pages を使用しました。

{{ range .Pages }}
    {{ .Render "li" }}
{{ end }}

Hugo では、リストに含む単位を管理するために .Paginator というものが用意されています。

例えば、 (.Paginator 10) と指定することで10件ずつの塊を作成してくれます。この機能を使ってテンプレートに次のように記述すると10件のみの一覧が作成されます。

{{ range (.Paginator 10).Pages }}
    {{ .Render "li" }}
{{ end }}

この記述によりセクションに page ディレクトリを作成し指定した単位ずつのページを作成してくれます。例えば、25件の記事が存在する場合 Page ディレクトリの中に 1.html,2.html,3.html の3ページを作成します。

次に各ページへの移動手段が欲しくなると思います。 Hugo では、標準でページ移動用のテンプレートが用意されていますので特に変更する必要が無い場合は次のように指定します。

{{ template "_internal/pagination.html" . }}

.Paginator はリストページを作るたびに現在何ページ目で、次のページは存在するのか、前のページは存在するのか、などの情報を持っています。これらの機能使い独自のページネーションを作成することができます。

Hugo の組み込みテンプレートを参考することで独自のテンプレートを作成することもできそうです。