Hasta ahora hemos aprendido a utilizar el sistema de paginación de Eleventy con arrays. Habrás comprobado que es bastante potente y que realmente solo requiere una pequeña configuración. Además nos permite personalizar bastantes elementos dentro del contenido generado, como por ejemplo el menú para la navegación entre páginas.

A continuación vamos a hacer una pequeña variación del ejemplo anterior simplemente para mostrar cómo se podría hacer una paginación de las propiedades de un objeto. El ejemplo va a ser muy similar, solo que ahora además del nombre de los lenguajes tenemos su descripción.

Front matter para nuestro ejemplo de paginación

Vamos a ver cómo se especifica un objeto dentro del front matter en una página dentro de Eleventy.

---
layout: layout.html
title: 'Lenguajes de programación'
pagination:
  data: languages
  size: 5
languages:
  Java: "Lenguaje orientado a objetos utilizado en todo tipo de aplicaciones"
  C#: "Lenguaje versátil para desarrollo de aplicaciones .NET"
  Python: "Lenguaje de alto nivel favorito para la ciencia de datos y scripts"
  JavaScript: "Lenguaje esencial para el desarrollo web en el lado del cliente"
  TypeScript: "Superset de JavaScript que añade tipado estático"
  Ruby: "Lenguaje dinámico orientado a objetos para desarrollo web rápido"
  Swift: "Lenguaje moderno para el desarrollo de aplicaciones iOS y macOS"
  Kotlin: "Lenguaje estático para la JVM, Android y desarrollo web"
  Go: "Lenguaje compilado conocido por su simplicidad y eficiencia"
  Rust: "Lenguaje que garantiza seguridad de memoria y concurrencia"
  PHP: "Lenguaje popular para el desarrollo de sitios web dinámicos"
  C++: "Lenguaje con extensas capacidades de programación de sistemas"
  C: "Lenguaje de programación de propósito general, poderoso y eficiente"
  Scala: "Lenguaje de programación moderno que mezcla OOP y funcional"
  Dart: "Lenguaje optimizado para aplicaciones en múltiples plataformas"
  Perl: "Lenguaje de alto nivel, general y dinámico"
  Lua: "Lenguaje ligero de scripting embebido"
  Haskell: "Lenguaje de programación funcional estándar"
  Objective-C: "Lenguaje principal para el desarrollo en sistemas Apple"
  R: "Lenguaje y entorno para análisis estadístico y gráficos"
---

Como puedes ver, ahora el dato "languages" consiste en un objeto lugar de un array. Esto no es problema para el sistema de paginación de Eleventy.

Simplemente cuando accedamos a pagination.items lo que vamos a obtener es las claves (nombres de las propiedades) del objeto que se está paginando.

En el código siguiente podemos ver una lista en el que mostraríamos los ítems de la página actual:

<ul>
  {%- for item in pagination.items %}
    <li>{{ item }}</li>
  {% endfor -%}
</ul>

En el ejemplo anterior simplemente estaríamos mostrando los nombres de los lenguajes, ya que hasta este punto no hemos accedido a los valores. De todos modos, ya adelantamos (aunque veremos un ejemplo luego) que una vez tenemos la llave del objeto, acceder al valor es tan sencillo como utilizar la notación típica de los corchetes sobre el objeto definido en el front matter. languages[item]. A pesar de ser un objeto, utilizó la misma anotación de corchetes de los arrays, indicando el nombre de la propiedad. Este código por tanto me devolverá el valor.

Iterar por los valores en vez de las llaves

Si queremos que la interacción se realice por los valores de las propiedades en vez de los nombres, podemos cambiar el front matter, para que quede de esta manera:

pagination:
  data: languages
  size: 5
  resolve: values

Simplemente hemos colocado "resolve: values" y con ello el bucle de acceso a los items nos dará los valores.

Ejemplo para recorrido de los ítems mostrando llaves y valores

Ahora vamos a realizar un ejemplo en el cual mostremos tanto los nombres de los lenguajes como sus descripciones, es decir, las llaves y sus valores.

<dl>
  {%- for item in pagination.items %}
    <dt>
      {{ item }}
    </dt>
    <dd>
      {{ languages[item] }}
    </dd>
  {% endfor -%}
</dl>

Hemos utilizado una lista de definición del HTML. En cada item de definición mostramos el nombre del lenguaje y su descripción. No tiene mucho misterio, como puedes ver.

Ahora ya sabes bastante más sobre los mecanismos de paginación, pero todavía nos queda lo más importante, que vamos a ver en el próximo artículo en el que aprenderás a paginar colecciones en Eleventy.