Improve this page

Pagination（ページ分け）

多くのWebサイト、特にブログでは、ポストのリストをいくつかの小さなリストに分けて、複数のページに分けて表示することは一般的です。Jekyllにはページ分けプラグインがあり、ページ区切り付きリストに適切なファイルとフォルダを自動的に生成できます。

Jekyll 3では、jekyll-paginateプラグインが、Gemfileや_config.ymlのpluginsに含まれています。Jekyll 2ではスタンダードです。

ページ分けは、HTMLファイルでのみ働きます

ページ分けはJekyllサイトのMarkdownファイルでは機能しません。index.htmlという名前のHTMLファイルで呼び出されたときのみ機能します。paginate_path設定値でサブディレクトリ無いでページ分けを行うこともできます。

ページ分けの有効化

ブログでポストのページ分けを有効にするには、_config.ymlふぁいるに1ページに何個のアイテムを表示するかの設定を追加します。

paginate: 5

数字は、生成したサイトで1ページに表示するポストの最大数です。

ページ分けしたページの出力先も指定できます。

paginate_path: "/blog/page:num/"

これでblog/index.htmlを読み込み、paginatorとしてLiquidのページ分けしたページを送り、blog/page:num/に出力します。ここで:numには2から始まるページ番号が入ります。
paginate: 5の設定で12個のポストをページ分けした場合、Jekyllはblog/index.htmlには最初の5個、blog/page2/index.htmlには次の5個、blog/page3/index.htmlには最後の2個を出力します。

パーマリンクを設定しないでください

ブログページのfront matterにパーマリンクを設定すると、ページ分けが壊れます。パーマリンクは省いてください。

カテゴリやタグ、コレクションのページ分け

新しいjekyll-paginate-v2プラグインには更なる機能があります。 pagination examplesのリポジトリをご覧ください。このプラグインは、GitHub Pagesではサポートされていません。

利用可能なLiquid属性

ページ分けプラグインはpaginatorLiquidオブジェクト属性を利用できます。

変数	説明
paginator.page	現在のページ番号
paginator.per_page	1ページに表示するポストの数
paginator.posts	現在のページに表示されているポスト
paginator.total_posts	ポストの総数
paginator.total_pages	ページの総数
paginator.previous_page	前のページのページ番号。無い場合はnil。
paginator.previous_page_path	前のページへのパス。無い場合はnil。
paginator.next_page	次のページのページ番号。無い場合はnil。
paginator.next_page_path	次のページへのパス。無い場合はnil。

Paginationはタグやカテゴリをサポートしていません

front matterでhidden: trueでないポストを除き、全てのpostsのポストがページ分けされたページに出力されます。現在のページ分けは、同じタグやカテゴリでグループを作る機能はありません。またポストに限定されるため、コレクションのドキュメントは含まれません。

ページ分けしたポストのレンダリング

次にpaginator変数を使用してポストのリストを実際に表示する必要が出てくるでしょう。 おそらく、サイトのメインページで行いたいのでしょう。以下は、ページ分けされたポストをHTMLファイルにレンダリングする簡単な方法の一例です。

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

<!-- This loops through the paginated 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 %}

<!-- Pagination links -->
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" 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="{{ paginator.next_page_path }}" class="next">Next</a>
  {% else %}
    <span class="next ">Next</span>
  {% endif %}
</div>

端のページに注意してください

Jekyllは‘page1’フォルダを生成しませんので、上記のコードは/page1へのリンクが作成されたときには機能しません。これが問題でしたら、処理方法については下記をご覧ください。

次のHTMLはページ1を処理し、現在のページを除く全てのページへのリンクをレンダリングします。

{% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | relative_url }}">&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="{{ paginator.previous_page_path | relative_url }}">{{ page }}</a>
    {% else %}
      <a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
  {% endfor %}

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | relative_url }}">Next &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}