Jekyll Paginate V2 Plugin setup

Nov 15, 2021 - 3 min read

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
Section titled “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
Section titled “Layouts - note.html”

Add {% include pagination-post.html %} to note.html , so it looks like this:
_layouts/note.html
```
# 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.