Jekyllでページング

GitBucket NewsはGitHub Pagesを使ってJekyllで運用しているのですが、エントリ数もそこそこ増えてきたので記事の一覧画面をページングするようにしてみました。

まずは_config.ymlに以下の設定を追加します。

paginate: 10

index.htmlを以下のように書き換えます。記事の一覧はsite.postsを使ってループしていた部分をpaginator.postsを使うように書き換えています。また、paginatorの各種プロパティを使ってページング用のリンクを生成しています。

<!-- This loops through the paginated posts -->
<ul class="posts">
  {% for post in paginator.posts %}
    <li>
      <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
      <a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
    </li>
  {% endfor %}
</ul>

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

これで以下のようにページング用のリンクが表示されるようになります。