E


Today I noticed my list of posts was growing a bit long, so I decided to bite the bullet and put in pagination—something I've been putting off for a while. As it turns out, it was much easier than I thought it'd be.

Initial Steps

First I had to edit my _config.yml file to allow for pagination. To do this I had to add two lines:

	paginate: 20
paginate_path: "/archives/page/:num"
	

The first line dictates how many posts will be included per page. In my example, each page will have 20 posts. The second line dictates the path. Since my list of posts is in my archives section, which follows the path https://ericlagergren.com/archives, I use the relative path to tell Jekyll to reference the URL of each page back to my archives page.

/page/:num means after /archives the path will include /page and then :num where :num is the pagination number. The pagination number is sort of like a page number in a book. If :num is 3, then you have three pages worth of posts. Page one will be the initial page, so in my case it's simply https://ericlagergren.com/archives.

The HTML

Now you have to put in the HTML. Really, unless you want something super fancy, it's as simple as copying and pasting. Here's what I used, straight from Jekyll's docs:

	{% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a rel="prev" 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="{{ '/archives' | 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 rel="next" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &raquo;</a>
  {% else %}
    <span>Next &raquo;</span>
  {% endif %}
</div>
{% endif %}
  

This sets up the pagination buttons. In order to make the pagination actually work, you need to change {% for posts in site.posts %} to {% for posts in pagination.posts %} on the pages where you wish pagination to occur.

A bit of fiddling

Now, you may have noticed something going on with your URLS—the addition of index.html when you use the buttons to go back to the initial page. That's ugly.

Originally Jekyll uses this for pagination:

	    <a rel="prev" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
	

To clean it up, I inserted this line:

	| replace: 'index.html', '/'
	

So the code looks like this:

	    <a rel="prev" href="{{ paginator.previous_page_path | replace: 'index.html', '/' | prepend: site.baseurl | replace: '//', '/' }}">&laquo; Prev</a>
	

It's super simple—it just replaces index.html with a forward slash. Just note, however, that this won't work if you don't use pretty URLs (where each 'page' is actually an index.html inside a folder).

Hope this helps.

| |
comments powered by Disqus