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

ページネーションアクション(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()
各ページへのリンクリストを作成するための情報を返します。
引数:なし
返り値:リンク情報を配列で返します。