Skip to content

Instantly share code, notes, and snippets.

@budparr
Last active September 29, 2021 10:55
Show Gist options
  • Save budparr/3e637e575471401d01ec to your computer and use it in GitHub Desktop.
Save budparr/3e637e575471401d01ec to your computer and use it in GitHub Desktop.
Previous Next Links for Jekyll Collections
{% capture the_collection %}{{page.collection}}{% endcapture %}
{% if page.collection %}
{% assign document = site[the_collection] %}
{% endif %}
<h1>TITLE: {{ page.title }}</h1>
{% for links in document %}
{% if links.title == page.title %}
{% unless forloop.first %}
{% assign prevurl = prev.url %}
{% endunless %}
{% unless forloop.last %}
{% assign next = document[forloop.index] %}
{% assign nexturl = next.url %}
{% endunless %}
{% endif %}
{% assign prev = links %}
{% endfor %}
<script>
document.body.onkeyup = function(e){
if (e.keyCode == '37') { window.location = '{{prevurl}}'; }
if (e.keyCode == '39') { window.location = '{{nexturl}}'; }
};
</script>
{% if prevurl %}<a href="{{prevurl}}" class="prev">PREV {{prevurl}}</a>{% endif %}<br />
{% if nexturl %}<a href="{{nexturl}}" class="nxt">Next {{nexturl}}</a>{% endif %}
@rdwatters
Copy link

This is great, Bud. You may have inadvertently become my SSG sensei. I appreciate the knowledge, here and at other places. Cheers.

@josephcoombes
Copy link

This is amazing. Thank-you!

@andycochran
Copy link

This is great! Thanks. What's the best way to add sort: 'foo' to this?

@andycochran
Copy link

Ah-ha! Line 3: {% assign document = (site[the_collection] | sort: 'foo') %}

@faizanvahevaria
Copy link

How to access the front-matter of previous and next

@rubenwardy
Copy link

rubenwardy commented Jul 15, 2018

Here's my version, it's slightly cleaner and also allows accessing the front matter (@faizanvahevaria)

{% if page.collection %}
    {% assign links = site[page.collection]  %}
{% endif %}

{% for link in links %}
	{% if link.title == page.title %}
		{% unless forloop.first %}
			{% assign prev = tmpprev %}
		{% endunless %}
		{% unless forloop.last %}
			{% assign next = links[forloop.index] %}
		{% endunless %}
	{% endif %}
	{% assign tmpprev = link %}
{% endfor %}

<ul class="prevnext">
	<li>{% if prev %}<a href="{{ prev.url}}">&lt; {{ prev.title }}</a>{% endif %}</li>
	<li>{% if next %}<a href="{{ next.url}}">{{ next.title }} &gt;</a>{% endif %}</li>
</ul>

@citelao
Copy link

citelao commented Oct 19, 2019

This still works in 2019! However, Jekyll collections (that generate pages with output: true at least) seem to have the built-in page.previous and page.next variables, too, so you may not need this.

See any guide on using those variables for posts. It should apply.

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