Pages de collection

Une page de collection est une page qui en devient plusieurs : une page par article de blog, par produit, par membre d'équipe. Vous designez la page une fois. À la publication, Silex crée une page pour chaque entrée d'une liste de votre source de données.

Comment ça marche

Une page de collection est une page normale avec deux réglages, dans l'onglet CMS des réglages de la page (icône engrenage à côté de la page dans le panneau Pages) :

• Pagination Data : la liste à utiliser, par exemple posts. Chaque entrée de la liste a sa propre page.
• Permalink : l'URL de chaque page, construite à partir de l'entrée, par exemple blog/ suivi de l'id de l'article.

Un blog de 100 articles donne 100 pages.

Configurer une page de collection (exemple : blog)

Les noms de champs ci-dessous (posts, data, id, title, body) viennent d'une API de test. Votre CMS a ses propres noms. Quand vous cliquez sur + dans une expression, le menu liste les vrais champs. Choisissez les plus proches.

Étape 1 : Créer la page

1. Ouvrez le panneau Pages et cliquez sur + à côté de Pages
2. Nommez la page, par exemple Post, et cliquez sur Ok

Étape 2 : Remplir Pagination Data

1. Dans le panneau Pages, cliquez sur l'icône engrenage à côté du nom de la page. Cela ouvre les réglages de la page. Ce ne sont pas les réglages de l'élément (icône engrenage en haut du panneau de droite)
2. Ouvrez l'onglet CMS
3. Sous Pagination Data, cliquez sur + et choisissez la liste, par exemple posts, puis le champ qui contient la liste si votre API l'enveloppe (comme nodes ou data)

Le texte sous le champ indique combien d'entrées contient la liste, par exemple 100 objects with id, body, title.

Étape 3 : Remplir Permalink

1. Sous Permalink, cliquez sur + et choisissez Pagination items (dans le groupe Website's states). Choisissez ensuite first, puis un champ différent pour chaque entrée, comme id ou un slug
2. Pour mettre les pages dans un chemin blog/, cliquez sur le + à la fin et choisissez prepend. Cliquez sur les … à côté de prepend. Dans la petite fenêtre qui s'ouvre, choisissez Fixed, tapez blog/ et cliquez sur Apply
3. Cliquez sur Apply en bas de la fenêtre des réglages de la page

Le texte sous le champ montre l'URL de l'entrée affichée sur le canevas. Sur l'image ci-dessous, le canevas affiche le deuxième article, donc l'URL est blog/2.

Étape 4 : Afficher l'entrée sur la page

1. Depuis le panneau Blocs, glissez un Text sur la page
2. Ouvrez les réglages de l'élément (icône engrenage)
3. Dans Properties, cliquez sur Expression à côté de HTML content
4. Cliquez sur +, choisissez Pagination items (dans le groupe Website's states), puis first, puis title
5. Faites de même avec un deuxième Text, et choisissez body à la fin

Pagination items est une liste, c'est pourquoi vous choisissez first avant le champ : avec une entrée par page, elle ne contient que l'entrée courante.

Étape 5 : Vérifier chaque entrée dans l'éditeur

Sous la liste des pages, le panneau Pages a maintenant une liste Collection Pages, avec une ligne par entrée, nommée d'après son URL (Blog/1, Blog/2…). Cliquez sur une ligne : le canevas affiche la page avec cette entrée.

Étape 6 : Publier

Publiez votre site. Chaque entrée a sa propre page : avec les réglages ci-dessus, l'article 1 est à /blog/1/, l'article 2 à /blog/2/, et ainsi de suite.

Si vous laissez Permalink vide, les URL utilisent le nom de la page et un numéro. La première entrée est à /post/, la deuxième à /post/1/, la troisième à /post/2/.

Bon à savoir

• Les pages sont statiques. Elles sont créées à la publication. Quand vous ajoutez un article dans votre CMS, publiez à nouveau pour obtenir sa page.
• Pagination Data ne prend qu'une liste. Contrairement à Permalink, il n'a pas de filtres : vous ne pouvez pas y trier la liste ni garder seulement certaines entrées.
• Le panneau Pages n'a pas de dossiers. Le chemin des URL (blog/, products/) vient du Permalink.
• Size, sous Advanced params, est le nombre d'entrées par page. Laissez-le à 1 pour une page par entrée.

En savoir plus

• Expressions : construire les expressions utilisées ci-dessus
• Liaison de données : afficher des données dans les éléments
• Publication : la chaîne de publication complète
• Développeur : configuration de build awesome : le build qui crée les pages, propulsé par Eleventy

---

Quiz

Q1 : Que fait une page de collection ?

• A) Elle crée une page qui récupère les données à chaque visite
• B) Elle génère une page HTML statique par entrée de vos données
• C) Elle affiche la liste de toutes les entrées (comme une archive de blog)

Réponse

B) Elle génère une page HTML statique par entrée de vos données : les pages sont créées à la publication. Rien n'est récupéré quand un visiteur les ouvre.

Q2 : Où réglez-vous la liste qui donne une page par entrée ?

• A) Dans les réglages de l'élément (icône engrenage), dans Loop Data
• B) Dans les réglages de la page (icône engrenage à côté du nom de la page dans le panneau Pages), onglet CMS, Pagination Data
• C) Dans les Paramètres du site

Réponse

B) : Pagination Data est un réglage de la page. Loop Data répète un élément sur une page, il ne crée pas de pages.

Q3 : Sur la page de collection, comment un Text affiche-t-il le titre de l'article courant ?

• A) HTML content = posts, data, title
• B) HTML content = Pagination items, first, title
• C) HTML content = Loop item, title

Réponse

B) : Pagination items contient l'entrée courante. posts, data, title lirait la liste entière, pas l'article courant.

Q4 : Votre Permalink est Pagination items, first, id, puis prepend blog/. Quelle est l'URL de l'article dont l'id est 7 ?

• A) /blog/7/
• B) /post/7/
• C) /7/blog/

Réponse

A) /blog/7/ : prepend ajoute blog/ devant l'id.

Q5 : Après la publication, vous ajoutez un article dans votre CMS. 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 la page du nouvel article
• C) Le nouvel article apparaît comme une page dynamique (non statique)

Réponse

B) Vous devez publier à nouveau : les pages de collection sont générées à la publication.