Jekyll - Setup Paginate V2 plugin

Here I describe how I added the Paginate V2 plugin to the Digital Garden Jekyll template. The Paginate V2 plugin will have to work with the notes collection set by the template.

This is just a summary of how I modified the code. For more explanation see the GitHub page of the plugin.

Gemfile

Add gem "jekyll-paginate-v2" to Gemfile, for me it looks like this:.

group :jekyll_plugins do
  gem "jekyll-paginate-v2"
  gem "jekyll-feed"
end

Remove Gemfile.lock once. This is automatically created again.

_config.yml

Add the following to _config.yml:

pagination:
  enabled: true
  debug: false
  collection: 'notes'
  per_page: 6
  permalink: '/page/:num.html'
  title: ':title - page :num of :max'
  sort_field: 'date'
  sort_reverse: true

autopages:
  enabled: true
  categories:
    title: 'Posts in category :cat'
  tags:
    title: 'Posts tagged with :tag'
  collections:
    title: 'Posts in collection :coll'

Includes - pagination.html

Create _includes/pagination.html and add the following:

<div class="pagination">
	{% if paginator.total_pages > 1 %}
 	 {% if paginator.previous_page %}
      <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Previous Page</a>
     {% endif %}
     {% if paginator.next_page %}
      <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next Page &rarr;</a>
     {% endif %}
  	{% endif %}
</div>

Includes - notes.html

Create _includes/notes.html and add the following:

<div class="posts-list">
  {% for note in paginator.posts %} <!-- site.notes -->
  <article class="post-preview">

    <h2 class="post-title">{{ note.title }}</h2>
    <p class="post-meta">
	  <time datetime="{{ note.date | date_to_xmlschema }}">{% if note.type != 'pages' %}
      Last updated on {{ note.date | date: "%B %-d, %Y" }}
      {% endif %}
    </time>
    </p>

    <div class="post-entry">
      {% assign excerpt_length = site.excerpt_length | default: 50 %}
      {{ note.excerpt | strip_html | truncatewords: excerpt_length }}
      {% assign excerpt_word_count = note.excerpt | number_of_words %}
      {% if note.content != note.excerpt or excerpt_word_count > excerpt_length %}
        <a href="{{ note.url }}">[Read&nbsp;More]</a>
      {% endif %}
    </div>

    {% if site.feed_show_tags != false and note.tags.size > 0 %}
    <div class="blog-tags">
      <span>Tags:</span>
      {% for tag in note.tags %}
		<a href="{{ '/tag/' | prepend: site.baseurl | replace: '//', '/' }}{{- tag -}}">{{- tag -}}</a>
      {% endfor %}
    </div>
    {% endif %}

  </article>
  {% endfor %}
  
  {% include pagination.html %}
</div>

I use note.date. I added the date to the frontmatter of each note

Includes - pagination-post.html

Create _includes/pagination-post.html and add the following:

<h3>Read other notes</h3>
<div class="pagination">
  {% if page.next.url %}
    <a href="{{ page.next.url }}" class="pagination__previous">
      <span class="pagination__previous-text">Previous</span>
    </a>
  {% else %}
    <span class="pagination__previous--edge">
      <span class="pagination__previous-text">Previous</span>
    </span>
  {% endif %}
  {% if page.previous.url %}
    <a href="{{ page.previous.url }}" class="pagination__next">
      <span class="pagination__next-text">Next</span>
    </a>
  {% else %}
    <span class="pagination__next--edge">
      <span class="pagination__next-text">Next</span>
    </span>
  {% endif %}
</div>

Layouts - autopage_category.html

Create _layouts/autopage_category.html and add the following:

---
layout: page
pagination: 
  enabled: true
  per_page: 10
---
<div style="margin-left: 5%; margin-right: 5%;">
<h3>Posts with Category <b>{% if page.autopages %}{{page.autopages.display_name | capitalize }}{% endif %}</b> - Page {{page.pagination_info.curr_page}} of {{page.pagination_info.total_pages}}</h3>
{% include notes.html %}

Layouts - autopage_collection.html

Create _layouts/autopage_collection.html and add the following:

---
layout: page
pagination: 
  enabled: true
  per_page: 10
---
<div style="margin-left: 5%; margin-right: 5%;">
<h3>Posts with Category <b>{% if page.autopages %}{{page.autopages.display_name | capitalize }}{% endif %}</b> Page {{page.pagination_info.curr_page}} of {{page.pagination_info.total_pages}}</h3>
{% include notes.html %}

Layouts - autopage_tags.html

Create _layouts/autopage_tags.html and add the following:

---
layout: page
pagination: 
  enabled: true
  per_page: 10
---
<div style="margin-left: 5%; margin-right: 5%;">
<h3>Notes with Tag <b>{% if page.autopages %}{{page.autopages.display_name | capitalize }}{% endif %}</b> - Page {{page.pagination_info.curr_page}} of {{page.pagination_info.total_pages}}</h3>
{% include notes.html %}

Layouts - note.html

Add {% include pagination-post.html %} under Content , so it looks like this:

{{ content }}
<hr>
{% include pagination-post.html %}

index.html

I moved index.md from the _notes directory to the root (ie wherever the _config.yml is) and renamed the file to index.html.

Add the following to index.html:

<h3>Notes - Page {{page.pagination_info.curr_page}} of {{page.pagination_info.total_pages}}</h3>

{% include notes.html %}

Don’t forget to add the pagination to the frontmatter of index.html:

pagination:
  enabled: true

Read other notes

Comments

    No comments found for this note.

    Join the discussion for this note on this ticket. Comments appear on this page instantly.

    Tags


    Notes mentioning this note


    Notes Graph