Something went wrong. Try again.
Joseph Hale's Technical Blog
Something went wrong. Try again.
3.0 kB · 91 lines
HTML
at content
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192<!-- The paginator for post list on HomgPage. -->
<nav aria-label="Page Navigation"> <ul class="pagination align-items-center mt-4 mb-0"> <!-- left arrow --> {% if paginator.previous_page %} {% assign prev_url = paginator.previous_page_path | relative_url %} {% else %} {% assign prev_url = '#' %} {% endif %}
<li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}"> <a class="page-link" href="{{ prev_url }}" aria-label="previous-page"> <i class="fas fa-angle-left"></i> </a> </li>
<!-- 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" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}" > {{- i -}} </a> </li> {% else %} <!-- hide number --> {% if i < pre and left_ellipsis == false %} <li class="page-item disabled"> <span class="page-link">...</span> </li> {% assign left_ellipsis = true %} {% elsif i > next and right_ellipsis == false %} <li class="page-item disabled"> <span class="page-link">...</span> </li> {% assign right_ellipsis = true %} {% endif %} {% endif %} {% endfor %}
<!-- mobile pagination --> <li class="page-index align-middle"> <span>{{ paginator.page }}</span> <span class="text-muted">/ {{ paginator.total_pages }}</span> </li>
<!-- right arrow --> {% if paginator.next_page_path %} {% assign next_url = paginator.next_page_path | relative_url %} {% else %} {% assign next_url = '#' %} {% endif %}
<li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}"> <a class="page-link" href="{{ next_url }}" aria-label="next-page"> <i class="fas fa-angle-right"></i> </a> </li> </ul></nav><!-- .pagination -->