8
votes

I have used the below code snippet from the Jekyll website to paginate Jekyll plog posts on my index.html page:

<div class="container">

         <ul class="post-list">
    <!-- This loops through the paginated posts -->
    {% for post in paginator.posts %}
      <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
      <p class="author">
        <span class="date">{{ post.date }}</span>
      </p>

      <div class="content">
        {{ post.content }}
      </div>
    {% endfor %}

      {% if paginator.total_pages > 1 %}
 <div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
  {% else %}
    <span>&laquo; Prev</span>
  {% endif %}

  {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      <em>{{ page }}</em>
    {% elsif page == 1 %}
      <a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
      <a href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
  {% endfor %}

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}

  </ul>

    </div>

However when I try to add this to a /pages/Blog.html page it does not work. It does not show any of the posts in my _posts directory and instead produces and empty container. I am assuming it is a path issue.

I have added the YAML header to the Blog.html file as required. When page is rendered it produces an empty container.

1

1 Answers

16
votes

If you want an url that looks like /pages/Blog/ for your posts listings :

  1. activate pagination by setting a paginate: 5 in _config.yml

  2. set paginate_path: pages/Blog/page:num in _config.yml

  3. rename /pages/Blog.html to pages/Blog/index.html