ページネーション

ページネーションアクション

ページネーションアクション（pagination）は、ページやコレクションコンテンツをページ送り（ページング）で表示したい場合に使用します。

ページネーションの例

設定

ページネーションは、クエリ機能を使って取得したコンテンツを対象としてページ送りを行います。

はじめに、対象コンテンツを取得するためのクエリを設定します。
クエリ設定例（query.php）：

    'product_pagination' => [
        'type' => 'product_item',
        'base_type' => 'page',
        'order' => 'updated_at',
        'sort' => 'desc',
    ],

その次に、ページコンテンツタイプの設定項目 action に 'pagination' を指定して、オプションの query 項目に事前に作成したクエリ名を指定します。さらに、options 項目にアクションの設定を定義します。
オプション設定（pages.php）：

項目	例	説明
query	product_pagination	クエリ設定（query.php）で定義したクエリの名前を指定します。
route	/products/list_{page_no}.html	2ページ目以降のパスを定義します。パスに {page_no} を定義してページ番号を受け取れるようにします。
per_page	15	1ページに表示する対象コンテンツ数を指定します。無指定の場合のデフォルト値は15です。
mid_size	7	ページ送りリンクの中央部分のリンク数を指定します。
end_size	1	ページ送りリンクの前端・後端部分のリンク数を指定します。
current_class	active	現在ページを示すためのクラス名を指定します。
link_class	link	ページ番号リストにリンクがある場合のクラス名を指定します。
ellipsis_class	disabled	ページ番号リストの範囲外のページを省略していること示すクラス名を指定します。
ellipsis_text	...	ページ番号リストの範囲外のページを省略していること表すテキストを指定します。

設定例（pages.php）：

    'product_list' => [
        'label' => '製品一覧',
        'outline' => '製品一覧をページネーションで表示します。',
        'dir' => '/products/',
        'action' => 'pagination',
        'options' => [
            'query' => 'product_pagination',
            'route' => '/products/list_{page_no}.html',
            'per_page' => 2,
        ],
        'fields' => [
            'content' => [
                'label' => 'コンテンツ',
                'type' => 'content',
            ],
        ],
    ],

ページテンプレート

テンプレートにはページネーションに関する情報が pagination 変数で渡されます。

pagination.items で現在ページ番号の対象コンテンツを取り出せます。for 文で次のように展開して表示することができます。

<ul>
  {% for item in pagination.items %}
    <li>
      <a href="{{ item.path }}">
        <img src="{{ item.fields.image.src|resize('thumb') }}">
        {{ item.name }}
      </a>
    </li>
  {% endfor %}
</ul>

ページ送り部品テンプレート

ページ送り部品テンプレートは、各ページ番号のリンクと「前へ」や「次へ」へのリンクを持つ部分的なテンプレートのことです。 CMSに用意されているテンプレートを読み込んで利用することができます。あるいは、独自にページ送りテンプレートを作成することも可能です。

ページテンプレートで読み込む例：

{% include('core/views/partials/pagination.twig') %}

ページ送り部品テンプレートの例：

{% if pagination is defined %}
  <nav>
    <ul class="pagination">
      {% if pagination.hasPrev() %}
        <li class="page-item"><a class="page-link" href="{{ pagination.prevUrl() }}">前へ</a></li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">前へ</span></li>
      {% endif %}
      {% for link in pagination.links() %}
        <li class="page-item {{ link.class }}"><a class="page-link" href="{{ link.url }}">{{ link.text }}</a></li>
      {% endfor %}
      {% if pagination.hasNext() %}
        <li class="page-item"><a class="page-link" href="{{ pagination.nextUrl() }}">次へ</a></li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">次へ</span></li>
      {% endif %}
    </ul>
  </nav>
{% endif %}

この例は public/themes/core/views/partials/pagination.twig ファイルの内容です。ページ送り部品の表示を変えたい場合は、サイトテーマ内にこのファイルをコピーして調整してください。

Pagination クラス

ページテンプレートに渡される pagination 変数は Pagination クラスのオブジェクトです。 Pagination クラスでは次のメソッドを利用できます。

hasPrev(): 前ページがあるかどうかを確認する
引数：なし
返り値：ブール値。前ページがある場合は true を返す。
hasNext(): 次ページがあるかどうかを確認する
引数：なし
返り値：ブール値。次ページがある場合は true を返す。
prevUrl(): 前ページのURLを返す。
引数：なし
返り値：前ページのURLを文字列で返す。前ページが無い場合は '#' を返します。
nextUrl(): 次ページのURLを返す。
引数：なし
返り値：次ページのURLを文字列で返す。次ページが無い場合は '#' を返します。
url(): 指定ページ番号のURLを返す。
引数：ページ番号を指定します。"" や '' で囲わずに 3 のように数値だけを指定します。
返り値：指定ページのURLを文字列で返します。
links(): 各ページへのリンクリストを作成するための情報を返します。
引数：なし
返り値：リンク情報を配列で返します。