【Shopify Liquid】ページネーションを自作する paginate

ShopifyのLiquidでページネーションは、以下のようなコードで簡単に実装できます。

{%- paginate blog.articles by 5 -%}
// ページネーション対象要素...
{%- endpaginate -%}

{%- if paginate.pages > 1 -%}
  {%- render 'pagination', paginate: paginate -%}
{%- endif -%}

{%- paginate xxx -%}~{%- endpaginate -%}で囲まれた要素がページネーションの対象となります。
指定した要素数を超えたら{%- render 'pagination', paginate: paginate -%}によりページネーションが表示されます。この方法ではテーマ固有のデザインが当てられます。

数字や矢印などの各要素に独自のCSSを適用したい場合はページネーションを自作する必要があります。

ページネーション自作

paginate オブジェクトを使ってページネーションを自作していきます。
hogeというブログのページネーションを想定しています。

最初のページ　◀◀

最初のページへのリンクはオブジェクトを使わず以下のように設定します。
記述の通りhogeの１ページ目を指定しています。

href="/blogs/hoge?page=1"

前のページ　◀

現在のページから一つ前のページへのリンクはpaginate.previous.urlで取得できます。

href="{{ paginate.previous.url }}"

次のページ　▶

現在のページから次のページへのリンクはpaginate.next.urlで取得できます。

href="{{ paginate.next.url }}"

最後のページ　▶▶

paginate.pagesはpaginationタグによって生成されたページ数を取得できます。これを使うと最後のページへのリンクを作成できます。

href="/blogs/hoge?page={{ paginate.pages }}"

例えばページ数が5だとしたら、href="/blogs/hoge?page=5"というリンクになります。

ページ番号の表示 1 2 3...

生成されたページ数分のページ番号を表示させるため、paginate.pagesを使ってforを記述します。

{%- for page_number in (1..paginate.pages) -%}

上記ループの中でページ番号とそのページへのリンクを記述します。
また、カレントページを判断するためifで条件分岐します。
paginate.current_pageを使うと現在のページ番号を取得できますので、これを使用します。

{%- if page_number == paginate.current_page -%}
  <span class="pagination-current">{{ page_number }}</span>
{%- else -%}
  <a class="pagination-link" href="/blogs/hoge?page={{ page_number }}">{{ page_number }}</a>
{%- endif -%}

完成　◀◀ ◀　1 2 3 4 5 ▶ ▶▶

<nav class="pagination">
  <ul class="pagination-list">
　　// 最初のページへのリンク
    <li class="pagination-item"><a class="pagination-link pagination-link--first" href="/blogs/hoge?page=1"></a></li>
　　// 前のページヘのリンク
    <li class="pagination-item"><a class="pagination-link pagination-link--prev" href="{{ paginate.previous.url }}"></a></li>

    {%- for page_number in (1..paginate.pages) -%}
    <li class="pagination-item">
      {%- if page_number == paginate.current_page -%}
　　　　 // カレントページ
        <span class="pagination-current">{{ page_number }}</span>
      {%- else -%}
        // 各ページ番号へのリンク
        <a class="pagination-link" href="/blogs/hoge?page={{ page_number }}">{{ page_number }}</a>
      {%- endif -%}
    </li>

    {%- endfor -%}
　　// 次のページへのリンク
    <li class="pagination-item"><a class="pagination-link pagination-link--next" href="{{ paginate.next.url }}"></a></li>
　　// 最後のページへのリンク
    <li class="pagination-item"><a class="pagination-link pagination-link--last" href="/blogs/hoge?page={{ paginate.pages }}"></a></li>
  </ul>
</nav>