Jekyllのページネーションを設定する

Jekyllに用意されているページネーション機能を利用する

ページネーション

Jekyllのコンフィグ(_config.yml)にページネーション時のアイテム数を設定する

paginate: 5

トップページに設定する

<article class="top-content">
    <ul class="posts">
        {% raw %}{% for post in paginator.posts %}{% endraw %}
        <li>
            <a class="post-title" href="{% raw %}{{ post.url | prepend: site.baseurl }}{% endraw %}">
                {% raw %}{{ post.title }}{% endraw %}
            </a>
            <p class="post-excerpt">
                {% raw %}{{ post.excerpt }}{% endraw %}
            </p>
        </li>
        {% raw %}{% endfor %}{% endraw %}
    </ul>
    {% raw %}{% if paginator.total_pages > 1 %}{% endraw %}
        <div class="pagenation">
            {% raw %}{% if paginator.previous_page %}{% endraw %}
                <a href="{% raw %}{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}{% endraw %}">&laquo; Prev</a>
            {% raw %}{% else %}{% endraw %}
                <span>&laquo; Prev</span>
            {% raw %}{% endif %}{% endraw %}
            {% raw %}{% for page in (1..paginator.total_pages) %}{% endraw %}
                {% raw %}{% if page == paginator.page %}{% endraw %}
                    <em>{% raw %}{{ page }}{% endraw %}</em>
                {% raw %}{% elsif page == 1 %}{% endraw %}
                    <a href="{% raw %}{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}{% endraw %}">{% raw %}{{ page }}{% endraw %}</a>
                {% raw %}{% else %}{% endraw %}
                    <a href="{% raw %}{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}{% endraw %}">{% raw %}{{ page }}{% endraw %}</a>
                {% raw %}{% endif %}{% endraw %}
            {% raw %}{% endfor %}{% endraw %}
            {% raw %}{% if paginator.next_page %}{% endraw %}
                <a href="{% raw %}{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}{% endraw %}">Next &raquo;</a>
            {% raw %}{% else %}{% endraw %}
                <span>Next &raquo;</span>
            {% raw %}{% endif %}{% endraw %}
        </div>
    {% raw %}{% endif %}{% endraw %}
</article>
tags: ,