jekyll でページネーション

jekyll

Published: 2018-06-30

目的

jekyll でページネーションの実現方法について調べました。

方法

jekyll のバージョン確認

$ bundle list | grep jekyll
  * jekyll (3.5.2)
  * jekyll-feed (0.9.2)
  * jekyll-paginate (1.1.0)
  * jekyll-sass-converter (1.5.0)
  * jekyll-watch (1.5.0)

上記にあるように jekyll のバージョンは 3.5.2 です。

Gem ファイルに追記

$ vim Gemfile

gem "jekyll-paginate"

_config.yml に追記

$ vim _config.yml

paginate: 5
paginate_path: "page/:num"

ここまでで、反映されるか試してみます

$ bundle exec jekyll s

  Dependency Error: Yikes! It looks like you don't have jekyll-paginate or one of its dependencies installed. In order to use Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such file -- jekyll-paginate' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!

Gem ファイルに記載している jekyll-paginate が見つからないと言われているようです。

jekyll-paginate をインストールします。

jekyll-paginate のインストール

$ gem install jekyll-paginate

ローカルサーバーを立ち上げ直してみます。

$ bundle exec jekyll s

...
      Generating...
        Pagination: Pagination is enabled, but I couldn't find an index.html page to use as the pagination template. Skipping pagination.

エラーは出なくなりましたが、index.html を作成する必要があるようです。

index.htmlの用意

コードは、公式にあったものです。

---
layout: default
title: My Blog
---

<!-- ページ分割されたpostsに対してループ -->
{% for post in paginator.posts >}}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="author">
    <span class="date">{{ post.date }}</span>
  </p>
  <div class="content">
    {{ post.content }}
  </div>
{% endfor >}}

<!-- ページネーションリンク -->
<div class="pagination">
  {% if paginator.previous_page >}}
    <a href="/page{{ paginator.previous_page }}" class="previous">Previous</a>
  {% else >}}
    <span class="previous">Previous</span>
  {% endif >}}
  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
  {% if paginator.next_page >}}
    <a href="/page{{ paginator.next_page }}" class="next">Next</a>
  {% else >}}
    <span class="next ">Next</span>
  {% endif >}}
</div>

これでページングが実装されました。

しかし、このままだと 2ページ目に遷移しようとするとページが存在しないと言われてしまいます。

リンク先を _config.yml で設定したものに合わせます。

ページングの修正

index.html 内のページングのリンク先を下記のように置き換えます。

<a href="/page/{{ paginator.previous_page }}" class="previous">Previous</a>

さらに 2 ページ目から 1ページ目に戻るとき、ページが存在しないと言われてしまいました。

ここでは、条件分岐を書いて回避することにします。

最終的に、index.html のページング部分は下記のようになります。

<!-- ページ分割されたpostsに対してループ -->
{% for post in paginator.posts >}}
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  <p class="author">
    <span class="date">{{ post.date }}</span>
  </p>
  <div class="content">
    {{ post.content }}
  </div>
{% endfor >}}

<!-- ページネーションリンク -->
<div class="pagination">
  {% if paginator.previous_page >}}
    {% if paginator.previous_page == 1 >}}
        <a href="/" class="previous">Previous</a>
    {% else >}}
        <a href="/page/{{ paginator.previous_page }}" class="previous">Previous</a>
    {% endif >}}
  {% else >}}
    <span class="previous">Previous</span>
  {% endif >}}
  <span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
  {% if paginator.next_page >}}
    <a href="/page/{{ paginator.next_page }}" class="next">Next</a>
  {% else >}}
    <span class="next ">Next</span>
  {% endif >}}
</div>

参考

ページネーション