Jekyll Paginate V2 Plugin setup
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"
toGemfile
, for me it looks like this:../Gemfile # To edit use your text editor application, for example Nanogroup :jekyll_plugins dogem "jekyll-paginate-v2"gem "jekyll-feed"endRemove
Gemfile.lock
once. This is automatically created again. -
_config.yml
Add the following to
_config.yml
:_config.yml # To edit use your text editor application, for example Nanopagination:enabled: truedebug: falsecollection: 'notes'per_page: 6permalink: '/page/:num.html'title: ':title - page :num of :max'sort_field: 'date'sort_reverse: trueautopages:enabled: truecategories: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:_includes/pagination.html # 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: '//', '/' }}">← Previous Page</a>{% endif %}{% if paginator.next_page %}<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next Page →</a>{% endif %}{% endif %}</div> -
Includes - notes.html
Create
_includes/notes.html
and add the following:_includes/notes.html # 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 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:_includes/pagination-post.html # 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:_layouts/autopage_category.html # To create this file use your text editor application, for example Nano---layout: pagepagination:enabled: trueper_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:_layouts/autopage_collection.html # To create this file use your text editor application, for example Nano---layout: pagepagination:enabled: trueper_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:_layouts/autopage_tags.html # To create this file use your text editor application, for example Nano---layout: pagepagination:enabled: trueper_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 %}
tonote.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 toindex.html
.Add the following to
index.html
: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 ofindex.html
:./index.html # To edit use your text editor application, for example Nano---layout: pagetitle: Homeid: homepermalink: /published: truepagination:enabled: true---
No comments found for this note.
Join the discussion for this note on Github. Comments appear on this page instantly.