Jekyll Paginate V2 Plugin setup

Nov 15, 2021

Introduction

The Paginate V2 plugin will have to work with the notes collection set by the Digital Garden Jekyll template.

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

Setup

Gemfile

Add gem "jekyll-paginate-v2" to Gemfile, for me it looks like this:.
./Gemfile
```
# To edit use your text editor application, for example Nano
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:

# To edit use your text editor application, for example Nano
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:

# To create this file use your text editor application, for example Nano
<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:

# To create this file use your text editor application, for example Nano
<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>

Includes - pagination-post.html

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

# To create this file use your text editor application, for example Nano
<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:

# To create this file use your text editor application, for example Nano
---
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:

# To create this file use your text editor application, for example Nano
---
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:

# To create this file use your text editor application, for example Nano
---
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 %} to note.html , so it looks like this:

# To edit use your text editor application, for example Nano
{{ content }}
<hr>
{% include pagination-post.html %}

index.html

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

Add the following to index.html:

# To edit use your text editor application, for example Nano
<h3>Notes - Page {{page.pagination_info.curr_page}} of {{page.pagination_info.total_pages}}</h3>

{% include notes.html %}

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

# To edit use your text editor application, for example Nano
---
layout: page
title: Home
id: home
permalink: /
published: true
pagination:
  enabled: true
---

Favorites

Paginate V2 plugin

Comments

No comments found for this note.

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