Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@hakerdefo hakerdefo commented Feb 11, 2021

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

This comment has been minimized.

Copy link
Owner Author

@Stanko 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

This comment has been minimized.

Copy link

@hakerdefo hakerdefo commented Feb 14, 2021

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