Ricette

Menu principale con voce attiva

Snippet navigation:

<nav class="hauptmenue">
  <a href="/" {% if page.path == "/" %}aria-current="page"{% endif %}>Start</a>
  {% for p in nav() %}
    <a href="{{ p.path }}" {% if p.path == page.path %}aria-current="page"{% endif %}>{{ p.title }}</a>
  {% endfor %}
</nav>

L’ordine corrisponde all’albero delle pagine, le bozze non compaiono. Nel CSS: .hauptmenue [aria-current] { font-weight: 700; }.

Sottomenu di una sezione

{% for p in children() %}
  <a href="{{ p.path }}">{{ p.title }}</a>
{% endfor %}

Pagina del team da una Collection

Collection team con name, rolle, foto (immagine), text (Markdown), più un componente person:

{# Snippet "person" #}
<figure class="person">
  {{ image(foto, "(min-width: 800px) 25vw, 50vw") }}
  <figcaption><strong>{{ name }}</strong><br>{{ rolle }}</figcaption>
  {% slot %}{% endslot %}
</figure>

<div class="team">
  {% for p in data("team") %}
    {% component "person" name=p.name rolle=p.rolle foto=p.foto %}{{ p.text|markdown }}{% endcomponent %}
  {% empty %}
    <p>Das Team stellt sich bald vor.</p>
  {% endfor %}
</div>

Prodotti da uno shop

Sorgente REST produkte: URL https://shop.example.com/api/products?category={kat}&limit=12, header Authorization: Bearer {env.SHOP_TOKEN}, percorso della lista data.items, cache 600.

<form>
  <select name="kat" onchange="this.form.submit()">
    <option value="">Alle</option>
    <option value="schuhe" {% if route.query.kat == "schuhe" %}selected{% endif %}>Schuhe</option>
  </select>
</form>
{% for p in data("produkte", "kat", route.query.kat) %}
  <article>
    <img src="{{ p.image_url }}" alt="{{ p.name }}" loading="lazy">
    <h3>{{ p.name }}</h3>
    <p>{{ p.price|floatformat:2 }} €</p>
  </article>
{% endfor %}

Ogni categoria è una voce di cache a sé – sia nella richiesta REST sia nella cache delle pagine.

Solo gli appuntamenti futuri

Con today e un confronto di date le voci passate spariscono da sole – senza eliminarle:

{% for e in data("events", "datum__gte", today, "sort", "datum") %}
  <h3>{{ e.titel }}</h3>
  <p>{{ e.datum|slice:"8:10" }}.{{ e.datum|slice:"5:7" }}.{{ e.datum|slice:"0:4" }}</p>
{% empty %}
  <p>Aktuell sind keine Termine geplant.</p>
{% endfor %}

Un archivio mostra la stessa Collection con "datum__lt", today, "sort", "-datum".

Elenco con paginazione

I calcoli sono possibili direttamente nelle espressioni (seite - 1, (seite - 1) * 10); |integer trasforma il parametro di query in un numero.

{% with seite=route.query.seite|default:"1"|integer %}
  {% for post in data("blog", "sort", "-datum", "limit", 10, "offset", (seite - 1) * 10) %}
    …
  {% endfor %}
  {% if seite > 1 %}<a href="?seite={{ seite - 1 }}">Neuer</a>{% endif %}
  <a href="?seite={{ seite + 1 }}">Älter</a>
{% endwith %}

Costruttore di pagine a blocchi

Il modo più comodo è il costruttore di pagine integrato, con moduli e {% blocks page.blocks %} (vedi 7.6). Senza schema funziona anche con una collection: Collection bloecke con seite (testo), typ (scelta: text, bild, zitat), inhalt (Markdown), bild (immagine). Per ogni tipo uno snippet block/text, block/bild, block/zitat, che usano i loro parametri. Nella pagina:

{% for b in data("bloecke", "seite", page.slug) %}
  {% component "block/"|add:b.typ inhalt=b.inhalt|markdown bild=b.bild %}{% endcomponent %}
{% endfor %}

Fornire JSON a JavaScript

<script>
  const termine = {{ data("termine", "sort", "datum")|json }};
</script>

Multilingua

Tutto l’essenziale è in Siti multilingue: imposta la lingua nell’albero delle pagine (viene ereditata), collega le versioni, hreflang e sitemap arrivano in automatico, il selettore di lingua lo costruisci con translations() e il menu per lingua con children(lang_root().id).

Moduli di contatto

IllusionCMS non elabora da sé i moduli. Usa un servizio di moduli o un’API propria come destinazione action e includi il suo script come file JS.

---