2013年11月17日, 編集履歴

JekyllのPagination設定（2013年11月30日追記）

　JekyllのPaginationとは、一ページ中にブログ記事がいくつか羅列してあり、一番下まで行くと「前の記事へ」「次の記事へ」などと前後の記事羅列ページへのリンクが貼ってあり、当該前後ページでまた記事が羅列されているという、よくあるアレである。

`_config.yml`の設定

　Paginationを設定するにはまず_config.ymlに、

paginate: 5
paginate_path: "blog/page:num"

のように記述する。上記の場合、一ページ中に羅列される記事数は5件。paginate_path: "blog/page:num"で指定したblogディレクトリィの中にあるindex.htmlファイルが最初のページとなる。blog/index.html内では変数paginatorを使い、記事羅列ページを作成する（したがって、blog/index.htmlはJekyll（Liquid）の変換対象ファイルでなければならないので、YAML Front-matterが必要となる）。
　以降のページは、そのblog/index.htmlがテンプレート的な扱いとなり、blog/page2/index.html、blog/page3/index.html、…と作られる（page1は作られないことに注意）。

記事の出力

　paginatorはposts変数を持っており、そのページ内で羅列される件数分（この場合は5件）の記事情報が保持されている。blog/index.html内で以下のように記述すれば、5件分の記事が出力される。

{% for post in paginator.posts %}
<article>
  <p class="date">{{ post.date | date: "%Y年%m月%d日" }}</p>
  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
  {{ post.content }}
</article>
{% endfor %}

　上記は各記事の全文を出力している。全文が必要ない場合はpost.contentの代わりにpost.excerptを使う。

　blog/page2/index.html以降ではblog/index.htmlがテンプレート的に使われて同じ形態のファイルが出力される。paginator.postsには、そのページが出力するべき記事情報が入っている。全記事数が12件でpaginate: 5指定の場合、最初のページ（blog/index.html）では最新5件分、2ページ目（blog/page2/index.html）で次の5件分、3ページ目（blog/page3/index.html）で最後の2件分がpaginator.postsに入っている。paginatorが持つその他の変数も出力するページにあわせて変化する。

前後ページへのリンク出力

　前後ページへのリンクにはpaginator.previous_page、paginator.next_pageを使う。これらには前後のページ番号（なければnil）が入っている。以下のようにblog/index.htmlに書いた場合、前後ページへのリンクのリストが出力される。

<ul>
  {% if paginator.previous_page %}<li><a href="/blog/{% if paginator.previous_page != 1 %}page{{ paginator.previous_page }}/{% endif %}">前の記事</a></li>{% endif %}
  {% if paginator.next_page %}<li><a href="/blog/page{{ paginator.next_page }}/">次の記事</a></li>{% endif %}
</ul>

　ひとつ注意が必要なのは、2ページ目以降のパスはblog/page2/index.html、…であるが、最初のページのパスはblog/index.htmlであって、blog/page1/index.htmlではないということである。したがって、paginator.previous_pageが1のときとそれ以外で処理を分ける必要がある。

追記（2013年11月30日）

　前節「前後ページへのリンク出力」について、previous_pageは日付上では新しい方向のページ番号を、next_pageは古い方向のページ番号を意味する。前節のように、変数名に合わせてそれぞれのリンク文字列を「前の〜」「次の〜」とすると、（考え方にもよるが、私は）気持ち悪い。
　なので、リンク文字列をそれぞれ「新しい〜」「古い〜」と改めた。