Custom Jekyll pagination

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 %}

custom-jekyll-pagination.css

.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;
  }
}

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!!!

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!

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!!!