A way of paging in the section

1

Is there a method for doing paging to show prev, 1, 2, 3, 4, 5, next in the section and or page
which would need a way of counting the number of articles in a section.

image
image1728×1080 26.7 KB

2

You get all the info required for that in the paginator variable: Pagination | Zola

3

This is what i got thus far.

{% macro paginator(paginator) %}
<nav class="pagination-ui container">
    <ul class="pagination-list flex justify-center items-center space-x-2">

        {% if paginator.previous %}
        <li><a class="pagination-link" href="{{ paginator.first }}">‹‹</a></li>
        <li><a class="pagination-link" href="{{ paginator.previous }}">‹</a></li>
        {% endif %}

        {% for page_number in range(start=1, end = paginator.number_pagers + 1) %}
            {% if page_number == paginator.current_index %}
                <li><span class="pagination-link active">{{ page_number }}</span></li>
            {% else %}
                <li><a class="pagination-link" href="{{ paginator.base_url ~ page_number }}">{{ page_number }}</a></li>
            {% endif %}
        {% endfor %}

        {% if paginator.next %}
            <li><a class="pagination-link" href="{{ paginator.next }}">›</a></li>
            <li><a class="pagination-link" href="{{ paginator.last }}">››</a></li>
        {% endif %}

    </ul>
</nav>
{% endmacro %}


    .pagination-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .pagination-link {
        display: inline-block;
        padding: 0.5rem 1rem;
        text-decoration: none;
        color: #007BFF;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .pagination-link.active {
        background-color: #007BFF;
        color: #fff;
        border-color: #007BFF;
    }
    .pagination-link:hover {
        background-color: #0056b3;
        color: #fff;
    }