Hasta este punto en el Manual de Eleventy ya hemos tenido la ocasión de trabajar con distintos elementos de contenido, incluidas las colecciones cuando en los capítulos iniciales mostramos como implementar un blog. No obstante las colecciones de Eleventy dan bastante más de sí y las queremos volver a abordar para entrar en mayor detalle.

En el artículo Colecciones en Eleventy encuentras los siguientes apartados de interés.

• Concepto de colección
• Configuración de "tags" para colecciones
• Bucle para recorrer los elementos de una colección
• Solucionar un posible problema con el archivo "index" en el listado de la colección
• Colección "all"
• Configuración eleventyExcludeFromCollections
• Cómo añadir varias tag a una página para situarla en varias colecciones
• Cómo sobreescribir las colecciones en una página concreta

Concepto de colección

Creo que el concepto de colección debe estar bastante claro. Simplemente se trata de páginas dentro del contenido del sitio que forman parte de un conjunto, como podrían ser los post de un blog o los productos de un catálogo.

Gracias a las colecciones en 11ty podemos obtener algunas funcionalidades extra, como la posibilidad de iterar de manera acotada por los elementos de esa colección. Esta funcionalidad la podríamos utilizar por ejemplo para listar los post en la portada del blog o para crear un navegador de páginas cuando accedemos a cualquier página del catálogo de productos.

En Eleventy podemos gestionar cualquier número de colecciones sin problema alguno, incluso podemos tener páginas que pertenezcan a más de una colección, si lo deseamos.

Configuración de "tags" para colecciones

Para definir las colecciones en Eleventy utilizamos la configuración de "tags". Podemos asignar tags las páginas de una colección de diversas maneras.

Es importante aclarar que en Eleventy los tags tienen únicamente el propósito de añadir páginas a colecciones. No debemos confundir el concepto de "tag" con el uso común en el mundo de la web "etiqueta" que sirva para clasificar contenido.

Utilizando front matter para la definición de tags

Lo más básico sería indicar el tag al que pertenece un elemento en el front matter del archivo de contenido.

---
tags: post
title: Esto sería una página de la colección "post"
---

Utilizando un archivo JSON en la carpeta de la colección

Otra forma de asignar tags de manera global a todos los elementos que hay dentro de una carpeta es utilizar un archivo JSON que se llama igual que la carpeta en la que estamos trabajando.

Por ejemplo, si estoy en la carpeta llamada productos podría tener un archivo "productos.json", con un código como el que sigue:

{
  "tags": "productos"
}

Eso hará que todos los archivos que hay en esta carpeta hereden el tag "producto".

Bucle para recorrer los elementos de una colección

Una de las utilidades de las colecciones es poder hacer listados. Ya vimos cómo se hace este comportamiento anteriormente cuando hicimos el listado de entradas del blog. No obstante lo vamos a refrescar ahora.

{% for producto in collections.productos %}
  <p>
    <a href="{{ producto.url }}">{{ producto.data.title }}</a>
  </p>
{% endfor %}

Simplemente hemos hecho un bucle para implelementar un recorrido por la colección de productos. En el cuerpo de la repetición hemos mostrado un enlace a cada uno de ellos.

Solucionar un posible problema con el archivo "index" en el listado de la colección

Si hemos colocado la configuración de tags en el archivo JSON, tal como hemos explicado antes, puede ocurrir un efecto poco deseable. Vamos a explicarlo.

Vamos a suponer que tenemos la carpeta de productos. En ella tenemos el mencionado archivo productos.json y el archivo raíz de los productos llamado index.html. La estructura sería la representada en la siguiente imagen:

La situación que se nos plantea aquí es que en el listado de productos se listará también la página index.html, siendo que ella no es un producto en sí, sino la portada de la sección de productos.

Si deseamos evitar que en el listado de productos esa página se muestre podemos agregar un condicional en el bucle for.

{% for producto in collections.productos %}
  {% if producto.url != '/productos/' %}
    <p>
      <a href="{{ producto.url }}">{{ producto.data.title }}</a>
    </p>
  {% endif %}
{% endfor %}

Simplemente estamos verificando en el bucle que la URL del producto no corresponda con la página raíz de los productos.

Otra solución sería simplemente sacar el index.html de la carpeta de productos y colocar un productos.html en la raíz del sitio.

Colección "all"

La colección "all" está disponible de manera predeterminada en 11ty y nos ofrece una manera de acceder a todas las páginas que hay dentro del sitio web.

Gracias a esta colección podemos recorrer todas las páginas de un sitio web y realizar cualquier tipo de acción o generación de contenido con ellas. Vamos a ver un ejemplo en el siguiente código.

{% for post in collections.all %}
  {% if post.url != '/' %}
    {% include "partials/post-card.html" %}
  {% endif %}
{% endfor %}

En el bucle anterior estamos recorriendo todas las páginas del sitio web y estamos mostrando el contenido en un template parcial. Gracias al if estamos evitando mostrar el contenido de la página raíz del proyecto.

Configuración eleventyExcludeFromCollections

Podemos utilizar una configuración llamada "eleventyExcludeFromCollections" en el front matter de una página para indicar que no se incluya en las colecciones.

Por ejemplo podríamos excluir de las colecciones al archivo index que hay en la raíz del sitio y así no necesitaríamos utilizar el condicional para evitar mostrarlo en el listado de páginas recorridas por collections.all,

Nos quedaría el código de nuestro index.html de esta manera:

---
layout: layout.html
title: 'Home'
eleventyExcludeFromCollections: true
---

<p>Esta es la portada del sitio</p>

<h2>Entradas del blog</h2>

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

Cómo añadir varias tag a una página para situarla en varias colecciones

Un caso común que probablemente necesitemos es añadir varias colecciones a una misma página. En este caso podemos utilizar varios tipos de notaciones siendo la más común el uso de los corchetes, como sí fuese un array.

---
tags: ['productos', 'posts']
---

Cómo sobreescribir las colecciones en una página concreta

A partir de la versión 1.0 en adelante las colecciones en Eleventy implementan un mecanismo de herencia de tags. Se produce entonces una "cascada de datos", por lo tanto, si tenemos una configuración dada por un archivo JSON en una carpeta, afectará a todos los archivos que hay en esa carpeta y en las interiores.

Si alguna vez queremos sobrescribir las colecciones para que esta herencia no se produzca podemos utilizar la sintaxis "override".

---
override:tags: []
---

Esto también nos habría podido solucionar el problema que encontramos con el index de productos y de esta manera haberle quitado el tag "productos" para evitar que apareciese en el listado.

En este caso la página index.html de productos nos podría haber quedado de esta manera más simplificada.

---
layout: layout.html
title: 'Productos'
override:tags: []
---

<p>Esta es la portada de productos</p>

{% for producto in collections.productos %}
    <p>
      <a href="{{ producto.url }}">{{ producto.data.title }}</a>
    </p>
{% endfor %}