L’éditeur de pages
Structure
- En-tête : titre, chemin (un clic ouvre la page), Publiée, aperçu activé/désactivé, Enregistrer.
- Onglets : HTML · Blocs (seulement pour les pages construites avec des blocs, voir 7.6) · CSS · JS · Head · Paramètres.
- Aperçu en direct à droite. La ligne de séparation peut être déplacée (un double-clic la réinitialise ; avec le focus, aussi via les touches fléchées). En haut, vous choisissez Bureau, Tablette ou Mobile.
L’aperçu affiche les modifications non enregistrées – y compris celles des fichiers CSS et JS. Il s’exécute dans un environnement isolé : les scripts sont exécutés, mais ne peuvent accéder ni à l’admin ni à l’API. Pour les pages Catch-All, il y a un champ Sous-chemin pour simuler p. ex. mein-artikel.
Données de template : sous l’aperçu, vous pouvez déplier le panneau Données de template (il démarre replié ; sa hauteur se règle en tirant sur le bord). Il montre ce que voient les templates de cette page : les variables (page, site, route, today …), le résultat de nav() et children(), toutes les Collections avec leurs champs et les 20 premières entrées de data("slug"), ainsi que les sources de données REST, dont vous chargez les données avec Récupérer. Vous dépliez les objets et les listes niveau par niveau. Au survol d’une ligne, {{ }} insère l’expression correspondante dans l’onglet HTML, par exemple {{ nav().0.title }}. Pour les listes, {% for %} insère une boucle. Le panneau suit le titre, le titre SEO et le Sous-chemin non enregistrés. Les variables locales issues de boucles, de {% set %} ou de paramètres de composants n’apparaissent qu’au rendu et sont donc absentes. Pour celles-ci, {{ wert|json }} dans l’aperçu vous aide.
Onglet HTML
Le HTML de la page – sans <html>, <head> ni <body> ; le CMS pose lui-même la structure (y compris le jeu de caractères, le viewport, le titre, la description, le CSS et le JS). Si vous écrivez malgré tout un document complet avec <html>, il est repris tel quel et le CSS/JS est inséré avant </head> ou </body>.
Barre d’outils :
| Bouton | Fonction |
|---|---|
| Snippet | Insérer un Snippet : comme Contenu (copie), comme Include (référence) ou – pour les Snippets avec slots – comme Composant avec des blocs fill préparés. |
| Image | Choisir une image du gestionnaire de fichiers, définir le texte alternatif, sizes et la classe CSS → <img> prêt à l’emploi avec srcset. Ou bien comme balise de template {{ image(…) }}, qui utilise toujours le texte alternatif actuel. |
| Lien fichier | Insérer un lien vers un fichier (p. ex. un PDF). |
| Données | Insérer une boucle sur une Collection ou une source REST – avec tous les champs préparés. |
| Formater | Indenter proprement le code (Prettier). Les balises de template sont conservées à l’identique. |
| Aide templates | Aide-mémoire de toutes les fonctions de template. |
Emmet
Emmet est intégré à l’éditeur HTML et CSS. Pendant la saisie, une abréviation reconnue est soulignée en pointillés et un aperçu s’affiche en dessous :
| Saisie + Tab | Résultat |
|---|---|
ul>li.item*3 |
Liste avec trois <li class="item"> |
section.hero>h1+p{Text} |
éléments imbriqués avec contenu |
a[href=/kontakt]{Kontakt} |
lien avec attribut |
m10 (CSS, à l’intérieur d’une règle) |
margin: 10px; |
bgc#f00 (CSS) |
background-color: #ff0000; |
Sans abréviation reconnue, Tab indente normalement. Esc annule un marquage si vous ne vouliez pas du tout taper une abréviation. Autres raccourcis : Ctrl+E (développer), Ctrl+⇧+A (entourer la sélection avec une abréviation), Ctrl+⇧+D (sélectionner la balise englobante). Si vous renommez une balise ouvrante, la balise fermante suit.
Formater
Formater (ou Shift+Alt+F) met le code sous une forme lisible – idéal pour les pages importées, qui tiennent souvent sur une seule ligne. Ctrl+Z l’annule en une seule étape.
- Les balises de template (
{{ … }},{% … %}) sont protégées au préalable et réinsérées à l’identique. - Là où un espace supplémentaire serait visible (p. ex. entre des liens directement accolés), Prettier coupe les lignes autrement, par exemple
</a\n><a. Cela paraît inhabituel, mais ne modifie pas l’affichage. - Si le HTML est erroné (p. ex. une balise non fermée), un message indique la ligne et la colonne – le code reste inchangé.
Onglet Head
Contenu supplémentaire pour <head> : balises meta, données Open Graph, polices, analytics. La syntaxe de template est possible :
<meta property="og:title" content="{{ page.meta_title }}">
<link rel="canonical" href="https://www.firma.de{{ page.path }}">