Pagination with Eleventy and Nunjucks

index.njk

<span>Page {{ pagination.pageNumber + 1 }} of {{ pagination.pages.length }}:</span>
{% if page.url !== pagination.href.first %}<a href="{{ pagination.href.first }}"><i class="ion-ios-skipbackward"></i></a>{% endif %}
{% if pagination.href.previous %}<a href="{{ pagination.href.previous }}"><i class="ion-arrow-left-b"></i></a>{% endif %}
{%- for pageEntry in pagination.pages %}
  {%- if (loop.index0 - pagination.pageNumber) | abs <= 3 %}
    <a href="{{ pagination.hrefs[ loop.index0 ] -}}"
      {%- if page.url === pagination.hrefs[ loop.index0 ] %} class="active"{% endif %}>
      {{- loop.index -}}
    </a>
  {%- endif %}
{%- endfor %}
{% if pagination.href.next %}<a href="{{ pagination.href.next }}"><i class="ion-arrow-right-b"></i></a>{% endif %}
{% if page.url !== pagination.href.last %}<a href="{{ pagination.href.last }}"><i class="ion-ios-skipforward"></i></a>{% endif %}

<span>Page 9 of 25:</span>
<a href="/"><i class="ion-ios-skipbackward"></i></a>
<a href="/7/"><i class="ion-arrow-left-b"></i></a>
    <a href="/5/">6</a>
    <a href="/6/">7</a>
    <a href="/7/">8</a>
    <a href="/8/" class="active">9</a>
    <a href="/9/">10</a>
    <a href="/10/">11</a>
    <a href="/11/">12</a>
<a href="/9/"><i class="ion-arrow-right-b"></i></a>
<a href="/24/"><i class="ion-ios-skipforward"></i></a>