Add arrows to pagination labels

This commit is contained in:
Helen Chong 2024-04-20 17:42:00 +08:00
parent 589631dae4
commit 2983a4be68
1 changed files with 29 additions and 8 deletions

View File

@ -1,31 +1,52 @@
{% set firstLabel = "Newest" %}
{% set prevLabel = "Newer" %}
{% set nextLabel = "Older" %}
{% set lastLabel = "Oldest" %}
<nav aria-label="pagination" class="pagination__wrapper"> <nav aria-label="pagination" class="pagination__wrapper">
<ul class="pagination"> <ul class="pagination">
<li> <li>
{% if pagination.href.first %} {% if pagination.href.first %}
<a href=" {{ pagination.href.first }}">Newest</a> <a href=" {{ pagination.href.first }}">
<i class="fa-solid fa-angles-left"></i>
{{ firstLabel }}
</a>
{% else %} {% else %}
Newest <i class="fa-solid fa-angles-left"></i>
{{ firstLabel }}
{% endif %} {% endif %}
</li> </li>
<li> <li>
{% if pagination.href.previous %} {% if pagination.href.previous %}
<a href=" {{ pagination.href.previous }}">Newer</a> <a href=" {{ pagination.href.previous }}">
<i class="fa-solid fa-angle-left"></i>
{{ prevLabel }}
</a>
{% else %} {% else %}
Newer <i class="fa-solid fa-angle-left"></i>
{{ prevLabel }}
{% endif %} {% endif %}
</li> </li>
<li> <li>
{% if pagination.href.next %} {% if pagination.href.next %}
<a href=" {{ pagination.href.next }}">Older</a> <a href=" {{ pagination.href.next }}">
{{ nextLabel }}
<i class="fa-solid fa-angle-right"></i>
</a>
{% else %} {% else %}
Older {{ nextLabel }}
<i class="fa-solid fa-angle-right"></i>
{% endif %} {% endif %}
</li> </li>
<li> <li>
{% if pagination.href.last %} {% if pagination.href.last %}
<a href=" {{ pagination.href.last }}">Oldest</a> <a href=" {{ pagination.href.last }}">
{{ lastLabel }}
<i class="fa-solid fa-angles-right"></i>
</a>
{% else %} {% else %}
Oldest {{ lastLabel }}
<i class="fa-solid fa-angles-right"></i>
{% endif %} {% endif %}
</li> </li>
</ul> </ul>