ブログ記事一覧に「ページネーション」を実装する方法について簡単に実装できる方法をサンプルコードとともに解説します。
Shopifyでブログ一覧を作る方法について以前別の記事でまとめました。
気になる方はぜひご一読ください。
Shopify 自作で「ブログ記事一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定
今回は、ブログ記事一覧に「ページネーション」を実装する方法について簡単に実装できるコードを解説します。
ページネーションとは
ページネーション(pagenation)とは、複数のページに分けて表示することです。記事の数が多いメディアサイトやブログでよく見かけるそれです。
では、さっそくLiquidコードを見てみましょう。
ページネーションのサンプルコード
{%- paginate blog.articles by 4 -%}
<div>
<ul>
{% for article in blog.articles %}
<li class="news-list-item">
<a href="{{ article.url }}">
{ article.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{%- endpaginate -%}少し長いコードになりましたが、ページネーションの実装は、以下の構文があれば可能です。
{%- paginate blog.articles by 4 -%}
{%- endpaginate -%}
この構文は、記事４つごとにページネーションを作るというコードになります。
中のコードは、「for文」を使ってブログ記事のループを実行しています。
{%- if paginate.pages > 1 -%}/code>
{%- render 'pagination', paginate: paginate -%}/code>
{%- endif -%}
これは「ページが1ページより多かったら」という条件分岐。すなわち、2ページ以上(ここでは5記事以上)であれば、記事一覧の下に「1、2、3」のようにページ番号が表示するようにという構文です。
{%- render 'pagination', paginate: paginate -%}
のrenderは、Shopifyのパーツテンプレートをレンダリングする役割を持っています。後ろのpaginate: paginateは、現在のページや全体のページ数、次のページや前のページへのリンクなどを取得・表示する役割を持っています。
以上、自作のブログ記事に「ページネーション」を実装する方法でした。
関連記事：ページネーション付きの「コレクション商品一覧」
ブログ記事一覧のページネーション作成について紹介しましたが、コレクションページでの商品一覧にページネーションを実装する方法は以下の記事をご参照ください。
