Skip to content

Instantly share code, notes, and snippets.

@Phlow
Last active October 13, 2023 03:10
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save Phlow/5613fb3f18946f577f071e2a258749a3 to your computer and use it in GitHub Desktop.
Save Phlow/5613fb3f18946f577f071e2a258749a3 to your computer and use it in GitHub Desktop.
If you need pagination for a collection in a Jekyll theme, you can use the following Liquid logic which works also on Github pages
{% comment %}
#
# I modified the original code from http://anjesh.github.io/2015/01/25/collection-pagination-working-github-pages/
#
# Make a collection in _config.yml and create the folder _your_collection in your root.
#
# collections:
# your_collection:
# output: true
# permalink: /:collection/:title/
#
#
#
{% endcomment %}
{% for c in site.your_collection %}
{% if c.title == page.title %}
{% assign thisPost = c %}
{% if forloop.index == 1 %}
{% assign prevflag = 0 %}
{% assign nextflag = 1 %}
{% elsif forloop.index == forloop.length %}
{% assign prevflag = 1 %}
{% assign nextflag = 0 %}
{% else %}
{% assign prevflag = 1 %}
{% assign nextflag = 1 %}
{% endif %}
{% endif %}
{% endfor %}
{% for c in site.your_collection %}
{% if c.title == page.title %}
{% assign prevflag = 0 %}
{% endif %}
{% if prevflag == 1 %}
{% assign prevPost = c %}
{% assign page.previous = c %}
{% endif %}
{% endfor %}
{% if nextflag == 1 %}
{% for c in site.your_collection %}
{% if foundPost == 1 %}
{% assign getNext = 1 %}
{% endif %}
{% if c.title == page.title %}
{% assign foundPost = 1 %}
{% endif %}
{% if getNext == 1%}
{% assign nextPost = c %}
{% assign page.next = c %}
{% assign foundPost = 0 %}
{% assign getNext = 0 %}
{% endif %}
{% endfor %}
{% endif %}
<div id="post-nav">
{% if prevPost.url %}
<a class="prev" rel="prev" href="{{ prevPost.url }}">
<span>&lt; {{ prevPost.title }}</span>
</a>
{% endif %}
{% if nextPost.url %}
<a class="next" rel="next" href="{{ nextPost.url }}">
<span>{{ nextPost.title }} &gt;</span>
</a>
{% endif %}
</div>
@vdeep
Copy link

vdeep commented Mar 12, 2018

A little cleaner version (no HTML included):
Note: Tested only on jekyll

{% assign prevflag = 1 %}
{% assign nextflag = 1 %}

{% for c in site.your_collection %}
  {% if c.title == page.title %}
    {% assign currentItemIndex = forloop.index0 %}
    {% if forloop.index == 1 %}
      {% assign prevflag = 0 %}
      {% assign nextflag = 1 %}
    {% elsif forloop.index == forloop.length %}
      {% assign prevflag = 1 %}
      {% assign nextflag = 0 %}
    {% endif %}
  {% endif %}
{% endfor %}

{% if prevflag == 1 %}
  {% assign prevItemIndex = currentItemIndex | minus: 1 %}
  {% assign prevPost = site.your_collection[prevItemIndex] %}
{% endif %}

{% if nextflag == 1 %}
  {% assign nextItemIndex = currentItemIndex | plus: 1 %}
  {% assign nextPost = site.your_collection[nextItemIndex] %}
{% endif %}

@kyleroden
Copy link

Thank you @Phlow

@Phlow
Copy link
Author

Phlow commented Feb 14, 2020

@kyleroden You‘re welcome 😁

@inetbiz
Copy link

inetbiz commented Jul 31, 2020

@Phlow

What if I want to display the previous page and next page title links on every page? If there isn't a previous, rewind. Last becomes previous.

@lostmonster
Copy link

A little cleaner version (no HTML included): Note: Tested only on jekyll

{% assign prevflag = 1 %}
{% assign nextflag = 1 %}

{% for c in site.your_collection %}
  {% if c.title == page.title %}
    {% assign currentItemIndex = forloop.index0 %}
    {% if forloop.index == 1 %}
      {% assign prevflag = 0 %}
      {% assign nextflag = 1 %}
    {% elsif forloop.index == forloop.length %}
      {% assign prevflag = 1 %}
      {% assign nextflag = 0 %}
    {% endif %}
  {% endif %}
{% endfor %}

{% if prevflag == 1 %}
  {% assign prevItemIndex = currentItemIndex | minus: 1 %}
  {% assign prevPost = site.your_collection[prevItemIndex] %}
{% endif %}

{% if nextflag == 1 %}
  {% assign nextItemIndex = currentItemIndex | plus: 1 %}
  {% assign nextPost = site.your_collection[nextItemIndex] %}
{% endif %}

what does "c" mean in this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment