ページネーション

はじめに

Hugoのページネーションの使い方をまとめます。

利用可能なページ種別

ページネーションは、ホームページとセクション、タクソノミー(taxonomy)の各ページで利用することができます。

使い方

設定

設定ファイルでは、以下の変数が設定できます。

項目 意味 デフォルト値
Pagenate ページネーションでの、1ページあたりの要素数。 10
paginatePath ページネーションで利用されるパス名。 “page”

テンプレート

ページネーションを使うには、大きく2つの方法があります。

  1. .Paginator.Pagesを使う方法
  2. .Paginate を使う方法

.Paginator.Pagesを使う方法

.Paginator.Pagesには、そのセクション内のページに関する情報が設定されています。例えば、下記では、セクション内のページのタイトルをPagenate個(デフォルトは10個)ずつ表示するページを生成します。

1
2
3

{{ range .Paginator.Pages }}
   {{ .Title }}
{{ end }}

このとき、以下のようなページが生成されます。

  • section/index.html
  • section/page/1/index.html ⇒ section/index.html にリダイレクト
  • section/page/2/index.html
  • …

.Paginateを使う方法

.Paginateは、自分でページネーションする対象のデータを作成する方法です。このサイト内のArduinoメモで利用しています。

このページでの利用例を示します。セクション配下の全てのページ(.RegularPagesRecursive)を対象に、日付ごとにグループ化(GroupByDate “2006-01-02”)し、最初の30日分(first 30)を取得しています。その後、その日付内のページのコンテンツを表示するようにしています。

1
2
3
4
5
6
7
8

{{ range (.Paginate (first 30 ((.RegularPagesRecursive).GroupByDate "2006-01-02"))).PageGroups }}
<h2>{{ .Key }}</h2>
{{ range .Pages }}
<div>
    {{ .Content }}
</div>
{{ end }}
{{ end }}

生成されるページは、.Paginatorを使ったときと同じで、以下のようなページが生成されます。

  • section/index.html
  • section/page/1/index.html ⇒ section/index.html にリダイレクト
  • section/page/2/index.html
  • …

ナビゲーションの表示

上記のページをナビゲートするためのリンクを作成するための内蔵テンプレートが、Hugoでは提供されています。

1

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

これにより、各ページへのリンク(ナビゲーションボタン)が生成されます。生成されるのは、Unordered Listです。以下に、Arduinoメモでの例を示します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<ul class="pagination">
  <li class="page-item">
    <a href="/arduino/memorandum/" class="page-link" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
  </li>
  <li class="page-item disabled">
    <a  class="page-link" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="/arduino/memorandum/">1</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="/arduino/memorandum/page/2/">2</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="/arduino/memorandum/page/3/">3</a>
  </li>
  <li class="page-item">
    <a class="page-link" href="/arduino/memorandum/page/4/">4</a>
  </li>
  <li class="page-item">
    <a href="/arduino/memorandum/page/2/" class="page-link" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
  </li>
  <li class="page-item">
    <a href="/arduino/memorandum/page/4/" class="page-link" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
  </li>
</ul>

_internal/pagination.htmlでは、.Paginatorというオブジェクトを基にHTMLを生成しています。このため、ナビゲーションボタンをコンテンツより先に表示したい場合は、事前に、.Paginatorを作成しておく必要があります。

最終更新日

January 23, 2021

inserted by FC2 system