post-paginator.html

<!--
  The paginator for post list on HomgPage.

  v2.1
  https://github.com/cotes2020/jekyll-theme-chirpy
  © 2020 Cotes Chung
  MIT License
-->

<ul class="pagination mt-4 mb-0 pl-lg-2">
  <!-- left arrow -->
  {% if paginator.previous_page %}
  <li class="page-item">
    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
      <i class="fas fa-angle-left"></i>
    </a>
  </li>
  {% else %}
  <li class="page-item disabled">
    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
  </li>
  {% endif %}
  <!-- endof left arrow -->

  <!-- page numbers -->
  {% assign left_ellipsis = false %}
  {% assign right_ellipsis = false %}

  {% for i in (1..paginator.total_pages) %}

    {% assign pre = paginator.page | minus: 1 %}
    {% assign next = paginator.page | plus: 1 %}
    {% assign pre_less = pre | minus: 1 %}
    {% assign next_more = next | plus: 1 %}
    {% assign show = false %}

    {% if paginator.page == 1 %}
      {% if i <= 3 or i == paginator.total_pages %}
        {% assign show = true %}
      {% endif %}
    {% elsif paginator.page == paginator.total_pages %}
      {% if i == 1 or i >= pre_less %}
        {% assign show = true %}
      {% endif %}
    {% else %}
      {% if i == 1 or i == paginator.total_pages%}
        {% assign show = true %}
      {% elsif i >= pre and i <= next %}
        {% assign show = true %}
      {% endif %}
    {% endif %}

    {% if show %}
        <!-- show number -->
        <li class="page-item {% if i == paginator.page %} active{% endif %}">
          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
        </li>
      {% else %}
        <!-- hide number -->
        {% if i < pre and left_ellipsis == false %}
          <li class="page-item disabled">
            <span class="page-link btn-box-shadow">...</span>
          </li>
          {% assign left_ellipsis = true %}
        {% elsif i > next and right_ellipsis == false %}
          <li class="page-item disabled">
            <span class="page-link btn-box-shadow">...</span>
          </li>
          {% assign right_ellipsis = true %}
        {% endif %}
      {% endif %}

  {% endfor %}

  <!-- right arrow -->
  {% if paginator.next_page %}
  <li class="page-item">
    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
      <i class="fas fa-angle-right"></i>
    </a>
  </li>
  {% else %}
  <li class="page-item disabled">
    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
  </li>
  {% endif %}

</ul> <!-- .pagination -->