bata's log

フロントエンド系のTipsとかメモ

Jekyllで「前の記事」「次の記事」を簡単に表示する方法

ブログとかによくある記事送りのページネーションを簡単に実装する方法。

page.previous ,page.nextでそれぞれ前の記事、次の記事に関する情報を取得できます。

{% if page.previous %}
#前の記事がある場合この中身が表示される
{% endif %}

そしてページネーションに必要な各要素を取得します。

#前のページのURLを取得する場合
{{ page.previous.url }}

#次のページのタイトルを取得する場合
{{ page.next.title }}

page変数で取得できる各項目は下記参照

Page Variables
http://jekyllrb.com/docs/variables/#page-variables

  

書き方例

{% if page.previous %}
    &lt;&lt; <a href="/blog_jekyll/_site{{ page.previous.url }}">{{ page.previous.title }}</a>
{% endif %}
    |
{% if page.next %}
    <a href="/blog_jekyll/_site{{ page.next.url }}">{{ page.next.title }}</a> &gt;&gt;
{% endif %}