ページネーション

多くのウェブサイト、とりわけブログにおいては、メインの投稿リストを小さなリストに分割して 複数のページにわたって表示させることがごく一般的に行われています。 Jekyllはページネーションを組み込んでおり、リストのページ分割のために必要となる 適切なファイルとフォルダを自動生成できます。

ページネーションはHTMLファイル内でのみ動作します

ページネーションはJekyllサイトのMarkdownファイルやTextileファイルでは動作しません。 HTMLファイルの中で使用された場合のみ動作します。おそらくページネーションは postsのリストを作成するために使われるでしょうから、このことは問題にならないでしょう。

ページネーションを有効にする

ブログでページネーションを有効にするには、1ページあたりの表示アイテム数の指定を _config.yml に追記します。

paginate: 5

生成されたサイトの1ページに表示させたいpost数の最大値を指定してください。

ページネーションを行うページの生成先を指定することもできます:

paginate_path: "blog/page:num"

この指定は、blog/index.html を読み込み、それをLiquidの各分割ページに paginator として送り、 出力を blog/page:num に書き込みます。ここで :num2 から始まるページ番号です。 もしサイトに12のpostsがあり、 paginate: 5 が指定されていた場合、 Jekyllは blog/index.html に最初の5件を、 blog/page2/index.html に次の5件を、 blog/page3/index.html に最後の2件を書き込んで出力先ディレクトリに配置します。

利用できるLiquidの属性

ページネーションプラグインは paginator Liquidオブジェクトに下記の属性を付与します。

ページネーションはタグとカテゴリをサポートしていません

ページネーションでは、各ページのYAML Front Matterにどのような変数が 指定されているかには関知せず、サイトの posts 全部をページ分割します。 現在のところ、共通のタグやカテゴリで紐付けられたグループごとでの ページネーションはできません。posts に限定されているため、ドキュメントの 任意のコレクションを含めることはできません。 ## 分割されたページのレンダリング `paginator` 変数が使えるようになったので、次は、 これを使って実際のpostの一覧を表示させます。 おそらくあなたはサイトのメインページのひとつでリストを表示させたいと思うでしょう。 ページ分割されたpostsを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>
1ページ目のエッジケースに注意

Jekyllは‘page1’フォルダを作らないので、上記のコードはもし /page1 リンクが生成された場合は動きません。もしこれが問題になるようであれば、 扱い方について以下を参照してください。

以下のHTMLは1ページ目をうまく取り扱い、現在のページ以外の全ページそれぞれの リンクの一覧をレンダリングします。
{% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
  {% else %}
    <span>&laquo; Prev</span>
  {% endif %}

  {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      <em>{{ page }}</em>
    {% elsif page == 1 %}
      <a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
  {% endfor %}

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}

属性 内容

page

現在のページ番号

per_page

ページあたりのpostの件数

posts

現在のページのpostのリスト

total_posts

サイトのpostの総件数

total_pages

分割されたページの総数

previous_page

前ページのページ番号。 前ページがない場合はnil

previous_page_path

前ページのパス。 前ページがない場合はnil

next_page

次ページのページ番号。 次ページがない場合はnil

next_page_path

次ページのパス。 次ページがない場合はnil