• SIS Lab
  • >
  • Blog
  • >
  • Jekyllでページ分割する -pagenation-

Jekyllでページ分割する -pagenation-

更新日:2019.04.27 作成日:2014.10.21
#Jekyll

Jekyllでやりたいこと

Jekyllを使っていて、トップページにすべての記事が出てくるのもうっとおしい。 トップページの表示記事を5〜10件にして、そのほかの記事を「次へ」、「戻る」で遷移させたい。

解決策

ページネーションを利用する。

1. _config.ymlに以下の文言を追加する

paginate: 10

何件で分割するかを pagenate に指定する。

2. index.htmlの site.posts としている部分を paginator.postsに変更する

---

---

<div class="home">
  <h1>Posts</h1>

  <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>
      {{ "{% for tag in post.tags " }}%}
      <a href="/blog/tag/{{tag}}">{{ tag }}</a>
      {{ "{% endfor " }}%}
      {% raw %}<p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>{% endraw %}
    </li>
    {{ "{% endfor " }}%}
  </ul>


  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>

</div>

覚えたliquidタグ

for文の中でのカウンタ

forloop.index

liquidタグのエスケープ

  • {{ "{% raw " }}%}{{ "{% endraw " }}%}
  • rowタグそのもののエスケープには、｛｛ “, " ｝｝を利用する (利用する際は、全角を半角に変換してください)

liquidタグを含んだhtmlをシンタックスハイライトを効かせるには、以下のとおり、rawタグで括る

{{ "{% raw %" }}}
liquidタグを含むHTML
{{ "{% endraw %" }}}

参考

Related contents