John Davidson

{% if posts.lastPage > 1 %}

  <div class="pagination">

      <ul>

          {% if posts.currentPage > 1 %}

              <li><a class="pagination--left-arrow"href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage-1) }) }}">&larr;</a></li>

          {% endif %}



          {% for page in 1..posts.lastPage %}

              <li class="{{ posts.currentPage == page ? 'active' : null }}">

                  <a href="{{ this.page.baseFileName|page({ (pageParam): page }) }}">{{ page }}</a>

              </li>

          {% endfor %}



          {% if posts.lastPage > posts.currentPage %}

              <li><a class="pagination--right-arrow"href="{{ this.page.baseFileName|page({ (pageParam): (posts.currentPage+1) }) }}">&rarr;</a></li>

          {% endif %}

      </ul>

  </div>

{% endif %}

---

My Answer:
> 1 %}

{% if posts.currentPage > 1 %}

• «

{% endif %}

{% for page in 1..posts.lastPage %}

• 
  {{ page }}
  

{% endfor %}

{% if posts.lastPage > posts.currentPage %}

• »

{% endif %}

{% endif %}_____

To limit the number of pages shown in the pagination to 4, you can modify the code as follows:

html
{% if posts.lastPage > 1 %}

{% if posts.currentPage > 1 %}

• «

{% endif %}

{% set startPage = max(1, posts.currentPage - 2) %}
{% set endPage = min(posts.lastPage, posts.currentPage + 2) %}

{% if startPage > 1 %}

• ...

{% endif %}

{% for page in startPage..endPage %}

• 
  {{ page }}
  

{% endfor %}

{% if endPage < posts.lastPage %}

• ...

{% endif %}

{% if posts.lastPage > posts.currentPage %}

• »

{% endif %}

{% endif %}


In this modified code, we calculate the `startPage` and `endPage` variables to determine which pages to display based on the current page. We then loop through the pages between `startPage` and `endPage` to display only 4 pages at a time. If there are more pages before or after the displayed pages, we show ellipses (...) to indicate that there are more pages available.