Page, layout, slot, bloc

Objectif : comprendre les quatre mots que tous les autres guides emploient.
Durée : 3 minutes
Il vous faut : rien — ici on lit, on ne clique pas

1. Ouvrez n'importe quelle page depuis Pages et sélectionnez Edit page.
2. Ouvrez l'onglet Layout Slots. Il compare les slots que définit votre layout avec ceux que cette page possède réellement.
3. Descendez jusqu'à la carte Slots. C'est la même liste en version de travail : chaque slot, le nombre de blocs qu'il contient et le bouton pour les modifier.
4. Sélectionnez Edit Blocks sur Main. Vous regardez maintenant des blocs : le contenu réel, dans l'ordre.

Page est la chose qui a une adresse. /notes est une page. Elle contient votre contenu et décide si les visiteurs peuvent déjà le voir.

Layout est le cadre dans lequel la page est rendue. Il décide si la page a une bande d'en-tête, une barre latérale, un pied de page — le mobilier, pas le contenu. Vous en choisissez un à la création et pouvez en changer ensuite.

Slot est une zone nommée fournie par le layout : Header, Main, Sidebar, Footer. Voyez-les comme des boîtes étiquetées. Le layout dit quelles boîtes existent ; vous décidez de ce qu'on y met.

Bloc est un morceau de contenu dans un slot : un titre, un paragraphe, une image, une galerie, un formulaire de contact. Les blocs s'empilent dans l'ordre, et certains en contiennent d'autres.

Au total : une page utilise un layout, le layout fournit des slots, et vous remplissez les slots avec des blocs.

Parce que le même contenu ne devrait pas être reconstruit pour chaque page, et le cadre ne devrait pas être reconstruit pour chaque morceau de contenu.

Un Shared Slot va encore plus loin : au lieu de remplir un slot sur une page, vous le remplissez une fois et l'affectez à plusieurs. C'est ainsi qu'un en-tête de site reste identique partout sans que personne ne le recopie.

• Changer de layout ne supprime pas vos blocs. Les slots que le nouveau layout ne définit pas sont conservés ; ils peuvent simplement ne plus être rendus.
• Un bloc peut en contenir d'autres. Une Card contient une région d'en-tête, de corps et de pied ; un Grid contient des cards. C'est cette imbrication qui donne une vraie mise en page sans écrire de HTML.