Pages de collection

Les pages de collection sont des pages générées automatiquement à partir de vos données — une page par article de blog, une page par produit, une page par membre d'équipe. Au lieu de créer manuellement des centaines de pages, vous définissez un modèle une seule fois, et build awesome (propulsé par Eleventy) crée chaque page au moment de la publication.

Cette page explique le concept du point de vue du designer. Les détails techniques complets se trouvent dans la section développeur.

Comment fonctionnent les pages de collection

Étape 1 : Créer une page modèle — Designez une page qui affiche un seul élément (un article de blog, un produit ou un membre d'équipe). Utilisez la liaison de données CMS pour intégrer les champs de l'élément.

Étape 2 : La marquer comme page de collection — Dans les paramètres de la page, définissez une requête de pagination qui indique à build awesome quelles données utiliser (par exemple, "tous les articles de blog") et quel champ utiliser comme URL de la page (par exemple, "slug").

Étape 3 : Publier — Lorsque vous publiez, build awesome génère une page HTML par élément, en utilisant le modèle. Un blog avec 50 articles produit 50 pages.

Les URLs sont dynamiques : Un article de blog avec le slug "hello-world" devient https://votresite.com/blog/hello-world. Un autre article avec le slug "my-story" devient https://votresite.com/blog/my-story.

Configurer une page de collection (exemple : blog)

Étape 1 : Créer une page nommée blog-post (ou similaire)

Cette page est votre modèle. Designez-la pour afficher :

• Le titre de l'article (lié à post → title)
• L'extrait ou le contenu de l'article (lié à post → content)
• La date de publication (liée à post → date)
• L'image mise en avant (liée à post → featured_image)
• Le nom de l'auteur (lié à post → author → name)

Les champs exacts dépendent de votre configuration WordPress, mais chaque liaison fait référence à l'élément courant en cours de rendu.

Étape 2 : Configurer les paramètres de la page

1. Dans le panneau Pages, cliquez sur l'icône engrenage (⚙) à côté du nom de la page
2. Ouvrez les Paramètres de page
3. Cherchez la section Pagination ou Collection
4. Définissez la Requête sur la source de données (par exemple, posts)
5. Définissez le Champ de permalien sur le champ qui deviendra l'URL (par exemple, slug)

Après publication, build awesome va :

• Récupérer tous les articles depuis votre API WordPress
• Pour chaque article, rendre la page modèle
• Utiliser le slug de l'article pour créer l'URL : /blog/<slug>/

Étape 3 : Publier et vérifier

Publiez votre site. Build awesome génère toutes les pages. Visitez-en une :

• https://votresite.com/blog/hello-world — affiche l'article avec le slug "hello-world"
• https://votresite.com/blog/my-story — affiche l'article avec le slug "my-story"

Chaque page est un fichier HTML statique, généré au moment de la publication. Aucun rendu dynamique dans le navigateur.

Comprendre les requêtes de pagination

La requête de pagination est une expression GraphQL qui renvoie une liste d'éléments.

Exemples :

• posts — tous les articles
• posts → where(status = "published") — uniquement les articles publiés
• posts → where(category = "news") → sort(date) — articles d'actualité triés par date
• pages → where(template = "portfolio") — pages personnalisées de type "portfolio"

La requête s'exécute une fois pendant la publication. Chaque élément du résultat devient une page.

Structure des permaliens

Le champ de permalien est le champ de vos données qui devient l'URL de la page.

Choix courants : - slug — slug d'URL personnalisé (recommandé) - id — identifiant numérique - title — titre de l'article (moins idéal ; les caractères spéciaux dans les titres peuvent causer des problèmes d'URL)

Si vous utilisez slug et que votre article a slug: "my-article", l'URL de la page est /blog/my-article (en supposant que la page est nommée blog-post dans le dossier /blog/).

Segments dynamiques et structure de dossiers

Les pages de collection peuvent être imbriquées dans des dossiers pour créer des URLs hiérarchiques.

Exemple : collections de produits

1. Créez un dossier /products/
2. Créez une page /products/product-detail
3. Définissez la requête de pagination sur products
4. Définissez le champ de permalien sur slug

Les URLs deviennent : /products/coffee-beans/, /products/dark-roast/, etc.

Exemple imbriqué : catégorie → produit

1. Créez un dossier /category/
2. À l'intérieur, créez /products/
3. Créez une page /category/products/product-detail
4. Définissez la pagination sur products
5. Champ de permalien : slug

Les URLs pourraient devenir : /category/electronics/products/laptop-123/ (si les catégories sont aussi paginées).

Accéder aux données de pagination dans le modèle

Sur un modèle de page de collection, l'élément courant est disponible comme contexte de données. Vos liaisons utilisent ce contexte.

Dans un modèle d'article de blog : - post → title — le titre de l'article courant - post → author → name — l'auteur de l'article courant - post → date — la date de l'article courant

Dans un modèle de produit : - product → name — le nom du produit courant - product → price — le prix du produit courant - product → description — la description du produit courant

Le nom de variable exact dépend de votre configuration. Il est généralement au singulier (post, product, item) même si la requête récupère plusieurs éléments. Pendant le rendu de chaque page, un seul élément à la fois est dans le contexte.

Utilisations courantes des pages de collection

Blog : Un modèle, génère une page par article. Chaque page affiche le titre, le contenu, les commentaires, les articles connexes, etc.

Portfolio : Un modèle, génère une page par projet. Chaque page montre les détails du projet, les images et l'étude de cas.

E-commerce : Un modèle, génère une page par produit. Chaque page montre l'image du produit, le prix, la description, les avis, les produits connexes.

Membres de l'équipe : Un modèle, génère une page par membre de l'équipe. Chaque page montre la biographie, la photo, les coordonnées, les liens sociaux.

Documentation / Base de connaissances : Un modèle, génère une page par article. Chaque page montre le contenu de l'article avec la navigation vers les articles connexes.

Limitations et considérations

• Les pages de collection sont statiques. Elles sont générées une seule fois au moment de la publication. Si vous ajoutez un nouvel article et souhaitez qu'il apparaisse sur votre site, vous devez publier à nouveau.
• Le temps de construction augmente avec la taille des données. Une collection avec 1 000 éléments prend plus de temps à construire qu'une avec 10 éléments.
• L'aperçu montre le modèle, pas toutes les pages. Dans l'éditeur Silex, vous voyez la page modèle avec des données d'exemple. Vous ne prévisualisez pas les 100 pages générées.
• Les interactions dynamiques sont limitées. Les pages de collection ne peuvent pas récupérer de nouvelles données lorsqu'un utilisateur visite. Ce sont du HTML statique. Pour des sites vraiment dynamiques, vous auriez besoin d'un backend ou d'une approche différente.

Dépannage

"Les pages ne se génèrent pas" — Vérifiez la requête de pagination. Assurez-vous qu'elle renvoie des résultats (testez dans GraphQL si possible). Vérifiez que le champ de permalien existe et a des valeurs.

"Les URLs sont incorrectes" — Vérifiez le champ de permalien et la structure de dossiers. L'URL est construite à partir du nom de dossier + nom de page + valeur du permalien.

"La requête de pagination ne renvoie aucun résultat" — Votre requête API est peut-être incorrecte. Vérifiez que la source de données est connectée et que la syntaxe de la requête est correcte. Testez-la dans l'éditeur GraphQL.

"Certaines pages ont un contenu incorrect" — Vérifiez que les liaisons de votre modèle référencent le bon contexte de données. Si vous avez codé les données en dur au lieu d'utiliser des liaisons, toutes les pages seront identiques.

En savoir plus

• Comment fonctionne le CMS — comprendre le flux de données
• Lier les données — créer le modèle
• Publication — le pipeline de publication complet
• Développeur : configuration build awesome — personnaliser build awesome pour des configurations de collection plus complexes
• Développeur : transformateurs de publication — personnalisation avancée du processus de construction

---

Quiz

Q1 : Que fait une page de collection ?

• A) Crée une page dynamique qui récupère des données à chaque visite d'un utilisateur
• B) Génère une page HTML statique par élément dans vos données
• C) Affiche une liste de tous les éléments (comme une archive de blog)

Réponse

B) Génère une page HTML statique par élément dans vos données — Les pages de collection sont statiques. Build awesome les crée au moment de la publication. Aucune récupération dynamique côté client.

Q2 : Vous souhaitez créer des pages individuelles pour chaque produit de votre boutique en ligne. Que configurez-vous en premier ?

• A) Un modèle de page de collection montrant les détails d'un produit
• B) Un composant de boucle montrant tous les produits
• C) Un point d'accès API pour les produits

Réponse

A) Un modèle de page de collection montrant les détails d'un produit — Designez un modèle pour un seul produit. Pendant la publication, build awesome le clone pour chaque produit.

Q3 : Dans la requête de pagination, vous définissez posts → where(status = "published"). Qu'est-ce que cela fait ?

• A) Affiche uniquement les articles publiés dans l'éditeur
• B) Génère des pages uniquement pour les articles publiés
• C) Masque les brouillons de la recherche du site

Réponse

B) Génère des pages uniquement pour les articles publiés — La requête de pagination filtre les données avant que build awesome ne génère les pages. Seuls les éléments correspondants obtiennent des pages.

Q4 : Vos articles de blog ont un champ appelé slug (par exemple, "hello-world"). Vous le définissez comme champ de permalien. Quelle URL l'article obtiendra-t-il ?

• A) /blog/<post-id>/
• B) /blog/<post-title>/
• C) /blog/hello-world/

Réponse

C) /blog/hello-world/ — Le champ de permalien détermine la partie dynamique de l'URL. La valeur du slug de l'article devient le segment d'URL.

Q5 : Après avoir configuré une page de collection et publié, vous ajoutez un nouvel article sur WordPress. Que se passe-t-il ?

• A) La page du nouvel article apparaît automatiquement sur votre site
• B) Vous devez publier à nouveau pour générer une page pour le nouvel article
• C) Le nouvel article apparaît comme une page dynamique (pas statique)

Réponse

B) Vous devez publier à nouveau pour générer une page pour le nouvel article — Les pages de collection sont statiques et générées au moment de la publication. De nouvelles données nécessitent une nouvelle construction/publication.