Utilisation des collections

Making-of

11ty

Dans 11ty, les collections permettent de regrouper des contenus similaires (comme des articles de blog).

Une collection d'articles de blog peut être représentée par des fichiers markdown dans un dossier blog.

Création d'une collection

Création d'un dossier blog.

mkdir blog

Ajout d'un fichier blog/blog.json représentant la collection.
L'attribut layout fait référence à fichier de mise en page.
On en parlera un peu plus bas.

{
  "layout": "layout.html",
  "tags": "blog"
}

blog/post-1.md

---
title: Post title
---

foo

blog/post-2.md

---
title: Post title 2
---

+Bar

Création de mise en page

Pour éviter de répéter à chaque fois du code rébarbatif, je crée un fichier de mise en page _includes/layout.html.

Je peux ainsi enrober mon contenu avec le même code.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Baldir - {{title}}</title>
</head>
<body>
<header>
    <h1>{{title}}</h1>
</header>
<main>
    {{content}}
</main>
</body>
</html>

Pour que ma page sache quel fichier de mise en page utiliser, je me sers de l'attribut layout de l'entête Frontmatter de ma page d'accueil.

index.html

---
layout: layout.html
title: Baldir
---


<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

<h2>{{ blog.data.title }}</h2>
<p>{{ blog.content }}</p>

Maintenant que tout est en place, je peux voir la liste des articles sur http://localhost:8080

Les pages sont accessibles aux addresses suivantes: