Recettes

Menu principal avec élément actif

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’ordre correspond à l’arborescence, les brouillons n’apparaissent pas. Dans le CSS : .hauptmenue [aria-current] { font-weight: 700; }.

Sous-menu d’une rubrique

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

Page d’équipe à partir d’une Collection

Collection team avec name, rolle, foto (image), text (Markdown), plus un composant 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>

Produits d’une boutique

Source REST produkte : URL https://shop.example.com/api/products?category={kat}&limit=12, en-tête Authorization: Bearer {env.SHOP_TOKEN}, chemin de la liste 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 %}

Chaque catégorie est une entrée de cache distincte – aussi bien pour la requête REST que dans le cache des pages.

Uniquement les événements à venir

Avec today et une comparaison de dates, les entrées passées disparaissent d’elles-mêmes – sans les supprimer :

{% 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 %}

Une archive affiche la même Collection avec "datum__lt", today, "sort", "-datum".

Liste paginée

Le calcul est possible directement dans les expressions (seite - 1, (seite - 1) * 10) ; |integer transforme le paramètre de requête en nombre.

{% 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 %}

Constructeur de pages à partir de blocs

Le plus pratique est le constructeur de pages intégré, avec des modules et {% blocks page.blocks %} (voir 7.6). Sans schéma, cela fonctionne aussi avec une collection : Collection bloecke avec seite (texte), typ (sélection : text, bild, zitat), inhalt (Markdown), bild (image). Pour chaque type, un Snippet block/text, block/bild, block/zitat, qui utilisent leurs paramètres. Sur la page :

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

Fournir du JSON à JavaScript

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

Multilinguisme

L’essentiel se trouve dans Sites multilingues : définir la langue dans l’arborescence (elle est héritée), lier les versions, hreflang et sitemap sont automatiques, vous construisez le sélecteur de langue avec translations() et le menu par langue avec children(lang_root().id).

Formulaires de contact

IllusionCMS ne traite pas lui-même les formulaires. Utilisez un service de formulaires ou votre propre API comme cible action et intégrez son script comme fichier JS.

---