El artículo anterior hemos abordado la mayor parte del conocimiento que necesitas para poder realizar paginación en el generador de sitios estáticos Eleventy. De todos modos, solo ha sido una buena cantidad de teoría y práctica iniciales, pero sin llegar a lo que probablemente necesites: paginar una colección de páginas, como podría ser los post de un blog.

Ahora que ya sabemos lo básico vamos a aprender a realizar una paginación sobre una colección de páginas del sitio. Vamos a aprovechar que tenemos una sección de blog para mostrar cómo podríamos hacer el índice de páginas del blog por bloques, algo que será absolutamente necesario cuando tengamos una buena cantidad de posts publicados. Verás que con todo lo que aprendiste en el artículo dedicado a la paginación no habrá ninguna dificultad en entender este nuevo ejemplo.

Para entender este artículo, además de haber leído el capítulo dedicado a la paginación, será importante que hayas cubierto también el capítulo dedicado a las Colecciones en Eleventy,

Como indicar que queremos realizar la paginación de una colección

Para poder paginar una colección en el índice simplemente tenemos que indicar en el front matter que se debe realizar una paginación.

Veamos el siguiente código:

---
layout: layout.html
title: 'Blog'
eleventyExcludeFromCollections: true
pagination:
    data: collections.blogPosts
    size: 3
    alias: posts
---

Como puedes comprobar, utilizamos "pagination" para especificar las características de nuestra páginación, indicando que el dato que se quiere imaginar es la colección de post del blog. También se está definiendo que el tamaño de cada página es de tres posts.

Adicionalmente estamos creando un alias para los ítems paginados, que puedes utilizar en lugar de pagination.items.

Bucle para recorrer los posts

El bucle para recorrer los elementos de la colección quedaría prácticamente igual que antes, gracias al alias que se ha generado.

{% for post in posts %}
    {% include "partials/post-card.html" %}
{% endfor %}

Enlaces para la navegación entre páginas siguientes y anterior del índice

Recuerda también que puedes crear los enlaces para navegación, tal como se explicó en el artículo anterior. Te dejamos un código de muestra para verlo aquí mismo.

<nav aria-label="Page navigation">
    <ul class="pagination pagination-next-prev">
      {% if pagination.href.previous %}
        <li class="page-item">
          <a class="page-link" href="{{ pagination.href.previous }}" aria-label="Previous">
            <span aria-hidden="true">Anterior</span>
          </a>
        </li>
      {% endif %}
      
      {% if pagination.href.next %}
        <li class="page-item">
          <a class="page-link" href="{{ pagination.href.next }}" aria-label="Next">
            <span aria-hidden="true">Siguiente</span>
          </a>
        </li>
      {% endif %}
    </ul>
</nav>

Ajustar los nombres de las rutas para las distintas páginas

Algo que no hemos visto todavía es la posibilidad de ajustar las URLs de las páginas generadas por esta paginación. Para ello utilizamos una propiedad que no habíamos visto todavía en el front matter: permalink.

El permalink es una configuración que nos permite definir el nombre de la página que se ha generada, lo que aporta bastante versatilidad a la hora de estipular cuáles son las rutas finales que tendrán las páginas del sitio, pudiendo variar la estructura predeterminada que realiza el sistema de construcción de Eleventy.

Ajustando nuestro permalink, el front matter podría quedar de esta manera:

---
layout: layout.html
title: 'Blog'
eleventyExcludeFromCollections: true
pagination:
    data: collections.blogPosts
    size: 3
    alias: posts
permalink: "otra/ruta/archivo-{{ pagination.pageNumber | plus: 1 }}/index.html"
---

Esto hará que las páginas de índice de tu blog tengan rutas como esta:

example.com/otra/ruta/archivo-1/
example.com/otra/ruta/archivo-2/

Incluso puedes añadir un poquito de lógica dentro del permalink, aplicando un condicional para que solo te cambie la ruta de las página de archivo posteriores a la primera. Un código de ejemplo de la construcción de este permalink podría ser el siguiente:

permalink: "blog/{% if pagination.pageNumber > 0 %}archivo-{{ pagination.pageNumber }}/{% endif %}index.html"

De esta manera las rutas de las páginas de archivo del blog serían como estas:

example.com/blog/ 
example.com/blog/archivo-1/
example.com/blog/archivo-2/

Cómo generar una página de resultados vacía

Imagínate que quieres generar la paginación por una colección que aún no tiene elementos, por ejemplo un sitio que muestra recetas de cocina pero que todavía no hemos publicado ninguna receta.

De manera predeterminada Eleventy no genera ningún contenido si la colección que se intenta paginar no tiene elementos todavía, por lo que tenemos que realizar una pequeña modificación en el from matter para conseguir nuestros objetivos.

Simplemente consiste en colocar una configuración en la paginación nueva: generatePageOnEmptyData: true.

Un ejemplo podríamos verlo a continuación.

---
title: Recetas de cocina
pagination:
  data: collections.recipes
  size: 10 
  generatePageOnEmptyData: true
---

Conclusión

Con esto hemos podido aprender a configurar las páginas de archivo de tu blog, con paginación en Eleventy. Podrías hacerlo con páginas de cualquier otro tipo, como las páginas de productos o de cualquier otra colección que tengas en tu sitio estático.

De todos modos todavía existiría la posibilidad de hacer paginaciones más arbitrarias, utilizando incluso objetos de datos, con un ejemplo parecido a lo que hemos visto en el capítulo anterior del manual.