Lancer un blog

Dans ce tutoriel, vous modélisez des articles de blog dans le CMS, vous en rédigez et en publiez quelques-uns, vous les listez sur une page et vous concevez une page modèle qui affiche chaque article à sa propre adresse. Il vous faut un site que vous pouvez modifier, par exemple celui du tutoriel sur la landing page.

Créer la collection Posts

1. Ouvrir le CMS

   Dans la barre latérale gauche, sous les onglets, cliquez sur CMS. L’espace de travail CMS remplace le canevas. Cliquez de nouveau sur CMS, ou sur le x à côté, pour revenir au canevas.

2. Créer la collection

   Cliquez sur New collection. Tapez Posts comme Name ; le Slug se remplit avec posts. Cliquez sur Create collection. Chaque collection commence avec deux champs, Title et Slug.

3. Ajouter les champs

   Ouvrez l’onglet Fields et cliquez sur Add field pour chacun des champs ci-dessous. Sélectionnez un champ dans la liste pour changer son Name dans le panneau de réglages à droite ; la Key suit le nom jusqu’à l’enregistrement.

   • Image, nommé Cover.
   • Text, nommé Excerpt. Activez Multiple lines.
   • Rich text, nommé Body. Activez Required to publish.
   • Date, nommé Date.

4. Enregistrer le schéma

   Cliquez sur Save schema dans la barre du bas. Les clés sont figées une fois enregistrées, car les liaisons les utilisent.

Rédiger vos premiers articles

1. Ajouter un élément

   Ouvrez l’onglet Items et cliquez sur New item. L’élément s’ouvre dans un panneau latéral. Tapez un titre : le slug le suit jusqu’à ce que vous modifiiez le slug ou que vous enregistriez.

2. Remplir les champs

   Cliquez sur Choose an image sous Cover et téléversez ou choisissez une image, puis écrivez son texte alternatif. Rédigez un court extrait, choisissez une date et rédigez le corps. L’éditeur du corps propose des titres, des listes, des liens et des images.

3. Enregistrer un brouillon

   Cliquez sur Save draft, ou appuyez sur ⌘S. Un brouillon n’est pas encore sur le site.

4. Publier l’élément

   Cliquez sur Publish, ou appuyez sur ⌘↵. Le statut passe à Published. Les modifications ultérieures conservent la version en ligne jusqu’à ce que vous cliquiez sur Publish changes.

5. Ajouter deux autres articles

   Créez deux autres éléments de la même façon pour que la liste ait de quoi s’afficher. Publiez-en un tout de suite. Pour l’autre, ouvrez le menu More actions (...) en bas du panneau, choisissez Schedule…, choisissez une heure et cliquez sur Schedule.

Lister les articles sur une page

1. Insérer une liste de collection

   Revenez au canevas et ouvrez la page qui doit afficher les articles. Sélectionnez le cadre de la page, cliquez sur + dans l’onglet Layers et choisissez Collection list dans le groupe CMS. Elle utilise votre première collection et contient un cadre nommé Item.

2. Régler la requête

   Dans la section Collection list de l’inspecteur, laissez Source sur CMS query et Collection sur Posts. Réglez Sort sur Date et choisissez la flèche décroissante pour que l’article le plus récent arrive en premier. Limit vaut 6 par défaut.

3. Concevoir la carte

   Le premier enfant de la liste sert de modèle : concevez-le une fois et il se répète pour chaque article. Sélectionnez Item, puis utilisez + pour y ajouter une Image et deux éléments Text.

4. Lier la carte à l’article

   Sélectionnez l’image. Dans la section Image, cliquez sur le bouton de la ligne CMS image et choisissez Cover sous CMS fields. Sélectionnez le premier texte et, dans Typography, cliquez sur dans la ligne Content et choisissez Title. Liez le second texte à Excerpt de la même façon.

Concevoir la page d’article

1. Créer une page modèle

   Ouvrez l’onglet Pages et cliquez sur le bouton base de données, New collection page, puis choisissez Posts. Malla ajoute une page avec le chemin /posts/:slug. Elle s’affiche une fois pour chaque article publié.

2. Choisir un élément d’aperçu

   Appuyez sur Esc pour vider la sélection. L’inspecteur affiche la section Page : vérifiez que Collection vaut Posts et choisissez un article dans Preview. Le canevas affiche maintenant cet article.

3. Ajouter le contenu de l’article

   Ajoutez un Text pour le titre et liez son Content à Title. Ajoutez une Image et liez CMS image à Cover. Pour le corps, cliquez sur + et choisissez Rich text dans le groupe CMS, puis, dans la section Content, cliquez sur dans la ligne Source et choisissez Body.

4. Afficher la date

   Ajoutez un Text pour la date. Cliquez sur dans sa ligne Content, tapez cette expression au lieu de choisir un champ, puis appuyez sur ↵ :

   text

   fn.formatDate(item.date, 'long')
   

Lier les cartes à leurs articles

1. Envelopper le contenu de la carte dans un lien

   Revenez à la page qui contient la liste. Dans l’onglet Layers, sélectionnez l’image et les deux textes dans Item (⇧ + clic), faites un clic droit sur l’un d’eux et choisissez Wrap in link. Item lui-même ne peut pas être enveloppé : enveloppez donc ce qu’il contient. Vous pouvez aussi insérer un Link block dans Item et y faire glisser le contenu.

2. Lier le lien à la page de l’article

   Le nouveau lien sélectionné, ouvrez la section Link. Cliquez sur dans la ligne Bound URL et choisissez votre page d’article sous Item page. Le lien pointe maintenant vers /posts/ suivi du slug de chaque article.

3. Tester dans l’aperçu

   Appuyez sur ⌘↵ et cliquez sur une carte. L’aperçu ouvre la page de l’article avec cet article. Appuyez de nouveau sur ⌘↵ pour revenir à l’édition.

Ajouter le SEO et publier

1. Lier le titre SEO

   Rouvrez la page d’article dans l’onglet Pages. Sans rien sélectionner, ouvrez la section SEO. Cliquez sur à côté de Title, tapez item.title + ' | Blog' et appuyez sur ↵. Chaque page d’article a maintenant son propre titre.

2. Lier la description SEO

   Cliquez sur à côté de Description et choisissez Excerpt. Les moteurs de recherche et les aperçus sur les réseaux sociaux affichent maintenant l’extrait propre à chaque article.

3. Publier en préproduction

   Cliquez sur Publish dans la barre d’outils, laissez Staging sélectionné et cliquez sur Publish to staging. Ouvrez le lien, allez sur la page qui contient la liste et cliquez sur une carte pour ouvrir son article.

Ce que vous avez appris

• Une collection définit les champs de votre contenu, et les éléments sont les entrées que vous rédigez, enregistrez en brouillon, publiez ou planifiez.
• Une liste de collection répète son premier enfant une fois par élément, et lie un calque à un champ de l’élément.
• Une page modèle affiche une page par élément publié, avec des champs SEO liés à l’élément.
• Un lien lié à Item page envoie chaque carte d’une liste vers la page de son propre élément.

Continuez avec les tutoriels suivants, ou lisez les guides sur lesquels celui-ci s’appuie :