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

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