このページを改善する

ページネーション

多くのウェブサイト、特にブログでは、投稿のメインリストを小さなリストに分割して複数のページに表示するのが一般的です。Jekyllはページネーションプラグインを提供しているため、ページ分割されたリストに必要なファイルとフォルダを自動的に生成できます。

Jekyll 3以降では、Gemfileと`_config.yml`の`plugins`に`jekyll-paginate`プラグインを含めます。Jekyll 2では、これは標準です。

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

ページネーションは、JekyllサイトのMarkdownファイル内からは機能しません。ページネーションは、`index.html`という名前のHTMLファイル内から呼び出された場合に機能します。このファイルは、必要に応じてサブディレクトリ内に存在し、`paginate_path`設定値を使用してサブディレクトリ内からページネーションを生成できます。

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

ブログの投稿のページネーションを有効にするには、`_config.yml`ファイルに、1ページあたりに表示するアイテム数を指定する行を追加します。

paginate: 5

この数値は、生成されたサイトで1ページあたりに表示する投稿の最大数にする必要があります。

ページネーションページの出力先を指定することもできます

paginate_path: "/blog/page:num/"

これは、`blog/index.html`を読み込み、各ページネーションページをLiquidで`paginator`として送信し、出力を`blog/page:num/`に書き込みます。ここで、`:num`はページネーションのページ番号で、`2`から始まります。
サイトに12件の投稿があり、`paginate: 5`と指定されている場合、Jekyllは最初の5件の投稿を含む`blog/index.html`、次の5件の投稿を含む`blog/page2/index.html`、最後の2件の投稿を含む`blog/page3/index.html`を出力ディレクトリに書き込みます。

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

ブログページのフロントマターにパーマリンクを設定すると、ページネーションが壊れます。パーマリンクは省略してください。

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

最新のjekyll-paginate-v2プラグインは、より多くの機能をサポートしています。リポジトリのページネーションの例を参照してください。 **このプラグインはGitHub Pagesではサポートされていません**。

利用可能なLiquid属性

ページネーションプラグインは、以下の属性を持つ`paginator` Liquidオブジェクトを公開します

変数	説明
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`

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

ページネーションは、投稿のフロントマターに`hidden: true`がない限り、`posts`変数のすべての投稿をページングします。現在、共通のタグまたはカテゴリによってリンクされた投稿のグループに対するページングは許可されていません。投稿に制限されているため、ドキュメントのコレクションを含めることはできません。

ページ分割された投稿をレンダリングする

次に、利用可能になった`paginator`変数を使用して、投稿をリストに実際に表示する必要があります。おそらく、サイトのメインページの1つでこれを実行したいと思うでしょう。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>

ページ1のエッジケースに注意してください

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="{{ '/' | 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 %}