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>
これで以下のようにページング用のリンクが表示されるようになります。