Manuale · 6

Template – le basi

HTML della pagina, Head, titolo SEO, descrizione e snippet sono template. La sintassi corrisponde in gran parte a Twig o Django (pongo2).

Output

{{ page.title }}
{{ post.titel|upper }}
{{ preis|floatformat:2 }} €
{{ beschreibung|default:"Keine Beschreibung" }}

Gli output vengono automaticamente sottoposti a escape HTML – < diventa <. Questo protegge da markup rotto e da codice iniettato. Per l’HTML che deve davvero apparire come HTML:

Campi HTML: {{ post.inhalt|safe }}
Campi Markdown: {{ post.text|markdown }}

Condizioni e cicli

{% if page.slug == "kontakt" %}
  …
{% elif route.query.seite %}
  …
{% else %}
  …
{% endif %}

{% for p in data("team") %}
  <li class="{% if forloop.First %}erste{% endif %}">{{ forloop.Counter }}. {{ p.name }}</li>
{% empty %}
  <li>Noch niemand da.</li>
{% endfor %}

Nei cicli sono disponibili forloop.Counter (da 1), forloop.Counter0 (da 0), forloop.First, forloop.Last e forloop.Revcounter.

Impostare variabili

{% with post=item("blog", "slug", route.slug) %}
  <h1>{{ post.titel }}</h1>
{% endwith %}

Commenti

{# Non viene emesso #}

Spazi bianchi

I tag template non modificano spazi e a capo – il testo viene emesso esattamente così com’è scritto (come in Twig). Hallo {% if name %}{{ name }}{% endif %}! mantiene lo spazio dopo “Hallo”.

Emettere sintassi template: `verbatim`

Se ti serve {{ … }} alla lettera – ad esempio per Vue, Alpine o Handlebars –, racchiudi la porzione:

{% verbatim %}<div id="app">{{ nachricht }}</div>{% endverbatim %}

L’importatore inserisce verbatim automaticamente se l’originale contiene sequenze di questo tipo.

Variabili disponibili

Variabile	Contenuto
`page.title`, `page.meta_title`, `page.slug`, `page.path`, `page.description`, `page.id`, `page.parent_id`	Pagina attuale (`meta_title` e `description` sono già valutati)
`page.noindex`, `page.nofollow`	Impostazioni robots della pagina (`true`/`false`)
`page.lang`	Lingua effettiva della pagina – propria o ereditata, altrimenti `de` (vedi Siti multilingue)
`route.path`	Percorso richiesto
`route.slug`	Sottopercorso nelle pagine Catch-All, ad es. `"mein-artikel"` o `"2025/rueckblick"`
`route.rest`	Sottopercorso come lista: `route.rest.0`, `route.rest.1` …
`route.query.x`	Parametro di query `?x=…`
`today`	Data di oggi come `AAAA-MM-GG` – adatta ai campi data, ad es. `data("events", "datum__gte", today)` per gli appuntamenti futuri
`now`	Momento attuale per il filtro `date`: `{{ now\|date:"2006" }}` (anno nel copyright)
`site.title`, `site.id`, `site.domain`, `site.domains`, `site.favicon`	Il sito attuale (la sua home page) – `site.domain` è il primo dominio inserito, `site.favicon` l’URL dell’icona del sito
`preview`	`true` nell’anteprima dell’admin

Funzioni

Funzione	Risultato
`nav()`	Sottopagine pubblicate della home page del sito attuale (menu principale) – senza le pagine con Nascondi nei menu; `nav(true)` con esse
`children()` / `children(12)`	Sottopagine pubblicate della pagina attuale o della pagina 12 – senza quelle nascoste; `children(true)` / `children(12, true)` con esse
`lang_root()` / `lang_root(12)`	Home page dell’albero linguistico della pagina attuale o della pagina 12: la pagina stessa o la più vicina sopra con una propria lingua, altrimenti la home page del sito – per i menu per lingua: `children(lang_root().id)`
`data("slug", …)`	Voci di una Collection o risultato di una sorgente REST (vedi Dati)
`item("slug", "feld", wert)`	Prima voce con `feld == wert` – oppure niente
`workflow("pfad", …)`	Risultato di un Workflow con ingresso HTTP sotto questo percorso
`image(id, sizes, klasse)`	`<img>` responsivo con `srcset`, dimensioni e testo alternativo – per JPEG/PNG in `<picture>` con WebP
`file(id)`	Informazioni sul file: `.url`, `.name`, `.alt`, `.width`, `.height`, `.srcset`, `.webp_srcset`, `.mime`, `.size`
`asset_url(id)`	URL con versione di un file CSS/JS
`translations()` / `translations(voce)`	Versioni linguistiche pubblicate della pagina o di una voce, ordinate per codice lingua: ciascuna con `lang`, `title`, `url`, `current` – per selettori di lingua
`language_name("fr")`	Nome di una lingua nella lingua stessa (“Français”, “Deutsch” …); i codici sconosciuti restano invariati
`not_found()`	Termina il rendering con la pagina 404 (stato 404)

Ogni pagina di nav()/children() (e lang_root()) ha title, path, slug, id, description e lang, più hidden (Nascondi nei menu). Esempio di footer con note legali e privacy, che mancano nel menu principale:

<footer>{% for p in nav(true) %}{% if p.hidden %}<a href="{{ p.path }}">{{ p.title }}</a> {% endif %}{% endfor %}</footer>

Filtri utili

Filtro	Esempio
`default`	`{{ x\|default:"–" }}`
`upper`, `lower`, `title`, `capfirst`	`{{ name\|upper }}`
`truncatechars`, `truncatewords`	`{{ text\|truncatechars:120 }}`
`floatformat`	`{{ preis\|floatformat:2 }}`
`length`	`{{ liste\|length }}`
`join`	`{{ tags\|join:", " }}`
`safe`	Emette HTML senza filtri
`markdown`	Da Markdown a HTML (`markdown:"html"` lascia passare l’HTML incorporato – vedi sotto)
`json`	Valore come JSON, ad es. per JavaScript: `<script>const cfg = {{ cfg\|json }};</script>`
`urlencode`	`<a href="/suche?q={{ q\|urlencode }}">`

Markdown direttamente nell’HTML

I testi più lunghi li scrivi più comodamente in Markdown – anche nel mezzo dell’HTML di una pagina o di uno snippet. Racchiudi la porzione con {% filter markdown %}:

<main class="container">
{% filter markdown %}
# Über uns

Wir gestalten und entwickeln **Websites mit Haltung** – von der Idee bis zum Betrieb.
Mehr dazu unter [Leistungen](/leistungen) – das Team von {{ site.title }} freut sich auf dich.

- Beratung
- Umsetzung
{% endfilter %}
</main>

Variabili e tag template funzionano all’interno del blocco.
I titoli ricevono ancore per i link di salto, le dieresi vengono traslitterate: “Über uns” → #ueber-uns, “Größe” → #groesse.
HTML nel Markdown: il filtro normale scarta l’HTML incorporato (<div …>), perché elabora anche contenuti di Collections e sorgenti REST che possono provenire dall’esterno. Per i testi che scrivi tu stesso nell’editor, {% filter markdown:"html" %} lascia passare l’HTML – ad esempio per un <div class="hinweis"> tra i paragrafi. Per i dati esterni |markdown resta la scelta sicura.

Pens – spazi di prova

In Pens crei piccoli spazi di prova – come su CodePen: HTML (con tutte le funzioni dei template: data(), item(), workflow(), filtri …), CSS e JS affiancati, sotto il risultato, dal vivo mentre digiti. Utile per provare template con dati reali, per prototipi o piccoli microsite.

Ogni Pen ha un indirizzo proprio, non indovinabile: /cms-admin/pen/<uuid>. Se hai effettuato l’accesso apre l’editor (schermo intero), Ctrl+S salva. In alto cambi il layout – Codice sopra (affiancati) o Codice a lato (uno sotto l’altro a sinistra, risultato a destra) –, Schermo intero mostra solo il risultato a tutto schermo (Esc esce).
Pubblico (interruttore in alto): senza accesso, lo stesso indirizzo mostra il risultato e accanto il codice – in sola lettura, nelle schede HTML/CSS/JS. Con Mostra codice disattivato l’indirizzo è una pagina autonoma: solo il risultato, con il titolo del Pen – pratico per rapide single page. I Pens non pubblici per i visitatori non esistono (404). Come amministratore vedi la vista dei visitatori tramite Vista visitatore (nuova scheda, ?view=1).
I Pens sono sempre noindex, nofollow (meta tag e header X-Robots-Tag) e non compaiono in nessuna sitemap.
Il risultato gira in una sandbox con origine propria – gli script nel Pen non arrivano alla tua sessione di amministrazione.
Per i visitatori vengono usate solo le voci di Collection pubblicate; nell’editor, come nell’anteprima, vedi anche le bozze. site e nav() si riferiscono al sito del dominio richiesto.
I Pens fanno parte dei bundle; non hanno una cronologia delle versioni.