Skip to content

Instantly share code, notes, and snippets.

@Stanko
Last active July 25, 2023 11:22
Show Gist options
  • Save Stanko/4e379a72715fc596c1cc to your computer and use it in GitHub Desktop.
Save Stanko/4e379a72715fc596c1cc to your computer and use it in GitHub Desktop.
Custom Jekyll pagination
{% if paginator.total_pages > 1 %}
{% assign start = paginator.page | minus: 2 %}
{% assign end = paginator.page | plus: 2 %}
{% if start < 1 %}
{% assign start = 1 %}
{% assign end = start | plus: 4 %}
{% elsif end > paginator.total_pages %}
{% assign start = paginator.total_pages | minus: 4 %}
{% assign end = paginator.total_pages %}
{% endif %}
{% if start < 1 %}
{% assign start = 1 %}
{% endif %}
{% if end > paginator.total_pages %}
{% assign end = paginator.total_pages %}
{% endif %}
<div class="pagination-wrapper">
<div class="pagination">
{% if paginator.previous_page %}
<a class="pagination-step" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">
Newer
</a>
{% else %}
<span class="pagination-step">
Newer
</span>
{% endif %}
{% if start > 1 %}
<a class="pagination-first" href="{{ site.baseurl }}/">1</a>
<span class="pagination-more">&middot;&middot;&middot;</span>
{% endif %}
{% for page in (start..end) %}
{% if page == paginator.page %}
<span class="active">{{ page }}</span>
{% elsif page == 1 %}
<a href="{{ site.baseurl }}/">{{ page }}</a>
{% else %}
<a href="{{ site.baseurl }}/page-{{ page }}">{{ page }}</a>
{% endif %}
{% endfor %}
{% if end < paginator.total_pages %}
<span class="pagination-more">&middot;&middot;&middot;</span>
<a class="pagination-last" href="{{ site.baseurl }}/page-{{ paginator.total_pages }}">{{ paginator.total_pages }}</a>
{% endif %}
{% if paginator.next_page %}
<a class="pagination-step" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">
Older
</a>
{% else %}
<span class="pagination-step">
Older
</span>
{% endif %}
</div>
</div>
{% endif %}
.pagination-wrapper {
text-align: center;
}
.pagination {
display: inline-block;
margin: 0 0 2rem;
}
.pagination a,
.pagination span {
border-radius: 3px;
float: left;
height: 36px;
line-height: 36px;
width: 30px;
}
a.pagination-step,
span.pagination-step {
padding: 0 10px;
width: auto;
}
.pagination-first,
.pagination-last,
.pagination-more, {
display: none;
}
.pagination .active {
background: #ddd;
color: #fff;
}
@media (min-width: 38em) {
.pagination-first,
.pagination-last,
.pagination-more {
display: block;
}
a.pagination-step,
span.pagination-step {
padding: 0 15px;
width: auto;
}
}
@hakerdefo
Copy link

Hi there Stanko,
Somehow it was not working for me when clicking on page number i.e. page number 2. It would redirect to 404 page. But clicking on Older button was working fine.
After changing,

<a href="{{ site.baseurl }}/page-{{ page }}">{{ page }}</a>
to
<a href="{{ site.baseurl }}/page{{ page }}">{{ page }}</a>

and
<a class="pagination-last" href="{{ site.baseurl }}/page-{{ paginator.total_pages }}">{{ paginator.total_pages }}</a>
to
<a class="pagination-last" href="{{ site.baseurl }}/page{{ paginator.total_pages }}">{{ paginator.total_pages }}</a>

seems to have fixed the issue for me. Still unsure though. Any ideas?

This was happenning on my blog here,
https://hakerdefo.github.io/

Cheers!!!

@Stanko
Copy link
Author

Stanko commented Feb 12, 2021

It seems you fixed it already!

The problem was that I used a different template for page generation than you. I had a - in there, while you are just using page{number} template:
https://github.com/hakerdefo/hakerdefo.github.io/blob/master/_config.yml#L82

Glad you solved it, cheers!

@hakerdefo
Copy link

Thanks for answering my query @Stanko.
By the way yo really have a cool Blog with a funky name.
Really cool of you to respecting visitor's privacy and ditching Google for GoatCounter. And what's way more cool is you are now sponsoring the project. Kudos.

Among other things I made my own electric guitar.

A picture of that guitar somewhere on your Blog would be nice.
There is one thing that your blog doesn't have. Contact option. It most likely is intentional. Think about it. It will be great if you can provide a way for visitors of your Blog to contact you.

Cheers!!!

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