L’editor delle pagine
Struttura
- Intestazione: titolo, percorso (un clic apre la pagina), Pubblicata, anteprima sì/no, Salva.
- Schede: HTML · Blocchi (solo per le pagine fatte a blocchi, vedi 7.6) · CSS · JS · Head · Impostazioni.
- Anteprima dal vivo a destra. La linea di separazione si può trascinare (doppio clic la reimposta, con il focus anche con i tasti freccia). In alto scegli Desktop, Tablet o Mobile.
L’anteprima mostra le modifiche non salvate – anche ai file CSS e JS. Gira in un ambiente isolato: gli script vengono eseguiti, ma non possono accedere all’admin né all’API. Per le pagine Catch-All c’è un campo Sottopercorso per simulare ad es. mein-artikel.
Dati del template: sotto l’anteprima si può espandere il pannello Dati del template (parte compresso; l’altezza si regola trascinandone il bordo). Mostra ciò che vedono i template di questa pagina: le variabili (page, site, route, today …), il risultato di nav() e children(), tutte le Collections con i loro campi e le prime 20 voci di data("slug"), nonché le sorgenti dati REST, i cui dati carichi con Recupera. Oggetti e liste si espandono livello per livello. Passando sopra una riga, {{ }} inserisce l’espressione corrispondente nella scheda HTML, ad esempio {{ nav().0.title }}. Per le liste, {% for %} inserisce un ciclo su di esse. Il pannello segue titolo, titolo SEO e Sottopercorso non salvati. Le variabili locali di cicli, {% set %} o parametri dei componenti nascono solo durante il rendering e perciò mancano. Per quelle aiuta {{ wert|json }} nell’anteprima.
Scheda HTML
L’HTML della pagina – senza <html>, <head> e <body>; la struttura la crea il CMS stesso (inclusi set di caratteri, viewport, titolo, descrizione, CSS e JS). Se scrivi comunque un documento completo con <html>, viene ripreso invariato e CSS/JS vengono inseriti prima di </head> o </body>.
Barra degli strumenti:
| Pulsante | Funzione |
|---|---|
| Snippet | Inserisce uno snippet: come Contenuto (copia), come Include (riferimento) oppure – per snippet con slot – come Componente con blocchi fill già pronti. |
| Immagine | Scegli un’immagine dalla gestione file, imposta testo alternativo, sizes e classe CSS → <img> pronto con srcset. In alternativa come tag template {{ image(…) }}, che usa sempre il testo alternativo attuale. |
| Link file | Inserisce un link a un file (ad es. PDF). |
| Dati | Inserisce un ciclo su una Collection o una sorgente REST – con tutti i campi già pronti. |
| Formatta | Indenta il codice in modo ordinato (Prettier). I tag template restano esattamente invariati. |
| Aiuto template | Promemoria di tutte le funzioni template. |
Emmet
Nell’editor HTML e CSS è integrato Emmet. Mentre digiti, un’abbreviazione riconosciuta viene sottolineata a puntini e sotto compare un’anteprima:
| Input + Tab | Risultato |
|---|---|
ul>li.item*3 |
Lista con tre <li class="item"> |
section.hero>h1+p{Text} |
elementi annidati con contenuto |
a[href=/kontakt]{Kontakt} |
link con attributo |
m10 (CSS, all’interno di una regola) |
margin: 10px; |
bgc#f00 (CSS) |
background-color: #ff0000; |
Senza un’abbreviazione riconosciuta, Tab indenta normalmente. Esc annulla un’evidenziazione se non volevi affatto digitare un’abbreviazione. Altre scorciatoie: Ctrl+E (espandi), Ctrl+⇧+A (racchiudi la selezione con un’abbreviazione), Ctrl+⇧+D (seleziona il tag circostante). Se rinomini un tag di apertura, quello di chiusura si adegua.
Formattare
Formatta (o Shift+Alt+F) porta il codice in una forma leggibile – ideale per le pagine importate, che spesso stanno su un’unica riga. Ctrl+Z la annulla in un solo passo.
- I tag template (
{{ … }},{% … %}) vengono prima protetti e poi reinseriti esattamente. - Dove uno spazio aggiuntivo sarebbe visibile (ad es. tra link direttamente adiacenti), Prettier va a capo in modo diverso, ad esempio
</a\n><a. Sembra insolito, ma non cambia la visualizzazione. - Se l’HTML contiene errori (ad es. un tag non chiuso), compare un messaggio con riga e colonna – il codice resta invariato.
Scheda Head
Contenuto aggiuntivo per <head>: meta tag, dati Open Graph, font, analytics. La sintassi template è consentita:
<meta property="og:title" content="{{ page.meta_title }}">
<link rel="canonical" href="https://www.firma.de{{ page.path }}">