Después del artículo anterior del Manual de Eleventy, en el que aprendimos a trabajar con colecciones de páginas, un buen paso para continuar sería aprender a paginar las colecciones, de modo que podamos presentar los elementos en un listado por bloques, algo que sería muy adecuado si tienes un blog con decenas o cientos de post, por poner un ejemplo.

Por supuesto, nuestro objetivo final es explicar cómo paginar colecciones de páginas, pero no vamos a poder hacerlo tan rápidamente, porque lo ideal sería comenzar entendiendo las bases de la paginación en Eleventy. No es algo tan difícil de entender pero sí que necesitas saber varias cosas antes de poder cubrir la paginación de las colecciones.

Para este paso previo en el que pretendemos que entiendas la paginación en Eleveny vamos a tratar los siguientes puntos.

• Qué es la paginación
• Como paginar datos de un array
• Qué es pagination
• Generando el sitio con este esquema de paginación
• Cómo generar un navegador para moverse entre páginas
• Mostrar los lenguajes con su índice dentro del array
• Aplicar un poco de CSS para mostrar los enlaces de navegación

Qué es la paginación

Supongo que todo el mundo sabe a lo que nos referimos, pero por si acaso no viene mal comentarlo. La páginación consiste en un método por el cual podemos mostrar resultados en distintos bloques parciales. Esto es algo que hemos visto numerosas veces en Internet, por ejemplo cuando los buscadores muestran los resultados divididos en páginas.

En un blog por ejemplo también es normal que exista una portada en la que muestras las entradas, sin embargo si tenemos cientos de entradas sería poco práctico mostrarlas todas de golpe en la primera página, así que lo normal es paginarlas.

Como paginar datos de un array

Antes de aprender a paginar colecciones vamos a ver un ejemplo en el que paginaremos un simple array de datos.

Esto es algo fácil de producir, ya que todo el trabajo de paginación nos lo entrega Eleventy ya hecho simplemente con decirle que queremos que se paginen los datos.

Veamos el siguiente código en el que encontrarás una página creada con el sistema de templates Liquid, predeterminado en los archivos .html de Eleventy.

---
layout: layout.html
title: 'Lenguajes de programación'
pagination:
  data: languages
  size: 4
languages:
- Java
- C#
- Python
- JavaScript
- TypeScript
- Ruby
- Swift
- Kotlin
- Go
- Rust
- PHP
- C++
- C
- Scala
- Dart
- Perl
- Lua
- Haskell
- Objective-C
- R
---
<ol>
{%- for item in pagination.items %}
  <li>{{ item }}</li>
{% endfor -%}
</ol>

Aparte de las cosas normales que ya hemos aprendido a manejar en el front matter de los archivos en Eleventy, vamos a describir lo que encuentras en el código anterior:

• Tenemos un array de datos, con nombres de lenguajes de programación. Ese array se llama languages
• Encuentras también una declaración "pagination", en la que indicamos tanto el dato sobre el que se tiene que paginar (languages), como el número de elementos por página, en este caso 4.
• Al final encuentras una lista ordenada (ol) en la que se realiza un recorrido con un bucle for. El recorrido se realiza sobre el array pagination.items.

Qué es pagination

Cuando realizamos un sistema de paginación con Eleventy, el generador de sitios estáticos nos entrega un objeto llamado "pagination". Ese objeto tiene toda una cantidad de propiedades que nos permite cubrir cualquier necesidad a la hora de mostrar los resultados paginados.

En el ejemplo anterior estamos utilizando pagination.items, que es un array en el cual encontramos los elementos de la página actual.

Creo que la idea es bastante fácil de entender, pero por si acaso podríamos apuntar que si el recorrido del bucle lo hubiésemos realizado directamente sobre el array languages, con una cabecera del bucle como la siguiente:

{%- for item in languages %}

Habríamos mostrado todos los lenguajes del array completo, en lugar de los lenguajes de la página actual.

De todos modos esto es solo un ejemplo, ya que el objeto pagination ofrece muchas más informaciones importantes que nosotros podemos utilizar para componer las páginas en el sistema de paginación.

Generando el sitio con este esquema de paginación

Ahora sí hacemos la construcción del sitio estático utilizando un template Liquid como hemos visto en el código anterior, Eleventy generará una serie de páginas parciales, en las que iremos viendo los distintos bloques de este array de lenguajes de programación.

Prueba simplemente a construir el sitio con el comando que ya conoces.

npx @11ty/eleventy 

Dado que hemos recogido 20 lenguajes en el array y hemos indicado que la página consta de 4 elementos de tamaño, en total se generarán 5 páginas distintas. El resultado será como el que puedes ver en la siguiente imagen.

En la imagen anterior podría parecer que solo ha generado 4 páginas, porque tenemos índices del 1 al 4, pero tienes que contar también la página raíz index.html.

Si abres el código HTML de los archivos generados observarás que se han colocado las páginas con cada uno de los bloques de ese array de lenguajes.

Cómo generar un navegador para moverse entre páginas

La siguiente práctica que tenemos que conocer consiste en la generación de los enlaces para moverse entre las distintas páginas generadas.

Para construir ese navegador entre páginas tendremos que utilizar el objeto pagination del que hemos hablado antes. Requerirá un poquito más de código para conseguirlo pero ahora verás que no es tampoco tan complejo de realizar.

En el código siguiente se han mezclado distintos conceptos, algunos vienen del sistema de paginación de Eleventy y son más relacionados con el motor de plantillas Liquid. Enseguida te explicaremos de dónde sale cada cosa para que no tengas problema en entenderlo.

<nav aria-label="Page navigation">
  <ul class="pagination">
    {% if pagination.href.previous %}
      <li class="page-item">
        <a class="page-link" href="{{ pagination.href.previous }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
    {% endif %}
    
    {% for page in pagination.hrefs %}
      <li class="page-item">
        <a class="page-link" href="{{ page }}">{{ forloop.index }}</a>
      </li>
    {% endfor %}
    
    {% if pagination.href.next %}
      <li class="page-item">
        <a class="page-link" href="{{ pagination.href.next }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    {% endif %}
  </ul>
</nav>

Vamos a describir por partes del código anterior para que podamos entenderlo, analicemos primero los tres grandes bloques de código que encontramos.

• El primero sirve para colocar una flechita para ir a la página anterior
• El bloque del medio sirve para colocar los enlaces a cada una de las páginas generadas
• El último bloque sirve para colocar otra flechita para ir a la página siguiente

Tanto el primer como el tercer bloque, con las flechas de siguiente y anterior, están englobados en un condicional del motor de templates Liquid, ya que no siempre se tienen que mostrar las flechas. Por ejemplo, si estamos en la primera página no debería aparecer la flecha para ir a la página anterior.

Las direcciones de la página siguiente y anterior nos las ofrece el sistema de paginación de Eleventy, a través del objeto pagination. Por ejemplo, así accedemos a la página anterior:

{{ pagination.href.previous }}

Ahora prestemos atención al bloque central donde aparecen las distintas páginas. Estas se han generado haciendo un recorrido por el array pagination.hrefs, qué contiene las URLs de cada una de las páginas.

Para obtener el índice de cada página hemos utilizado una variable que se llama forloop, que nos ofrece el motor de plantillas Liquid. Esa variable en realidad es un objeto que tiene diversas propiedades, entre ellas la que hemos utilizado es "index", que contiene el índice a la página actual comenzando por 1.

{{ forloop.index }}

Mostrar los lenguajes con su índice dentro del array

Para acabar este artículo vamos a ver otra práctica que podrías querer realizar. Consiste en listar los lenguajes con su índice dentro del array global, porque tal como hemos hecho esta lista cada página de lenguajes los lista comenzando siempre por el 1.

Para ello tenemos que aprender a usar los filters del motor de templates Liquid, de los que apenas hemos hablado.

Por ejemplo, mira este código:

{{ 4 | plus: 6 }}

Eso mostraría el valor 10 en la página.

Esos filtros los vamos a usar en el código siguiente, permitiendo mostrar datos totalmente personalizados en función de lo que nos ofrece el objeto pagination. Por ejemplo mira este código que podrías usar para decir "estoy en la página x".

<h2>Página {{ pagination.pageNumber | plus: 1 }}.-</h2>

Ahora veamos cómo cambiar el listado de lenguajes de esta página para mostrarlos con los índices del array:

<ul>
  {%- for item in pagination.items %}
    <li>{{ pagination.pageNumber | times: pagination.size | plus: forloop.index }}. {{ item }}</li>
  {% endfor -%}
</ul>

Como ves, hemos encadenado varios filtros de Liquid para conseguir realizar una operación matemática sencilla, aunque a la vista de código parezca un poquito compleja. Simplemente hemos tomado el número de la página, lo hemos multiplicado por el tamaño de la página y luego le hemos sumado el índice de la cuenta de iteraciones del bucle.

Supongo que el código resulta bastante expresivo así que lo daremos por entendido.

Aplicar un poco de CSS para mostrar los enlaces de navegación

En un artículo anterior del manual de Eleventy ya explicamos las técnicas más simples para añadir CSS, incluso apoyados con Vite mostramos cómo poder procesar el código de Sass.

Te recomiendo que repases esos artículos para aprender a añadir CSS a tu proyecto de sitio estático. Simplemente voy a colocar aquí el código Sass que podrías utilizar de prueba para aplicar un poco de CSS al navegador de páginas.

.pagination {
  display: flex;
  list-style-type: none;
  gap: 0.75rem;
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: aquamarine;
    width: 1.5rem;
    height: 1.5rem;

    a {
      text-decoration: none;
    }
  }
}

Con lo que has aprendido en este artículo ya entiendes lo esencial para poder utilizar el sistema de paginación del generador de sitios estáticos Eleventy. En futuros artículos avanzaremos un poco más sobre las posibilidades y la aplicación práctica en las secciones del sitio.