Recetas

Menú principal con elemento activo

Snippet navigation:

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

El orden se corresponde con el árbol de páginas, y los borradores no aparecen. En el CSS: .hauptmenue [aria-current] { font-weight: 700; }.

Submenú de una sección

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

Página de equipo a partir de una Collection

Collection team con name, rolle, foto (imagen), text (Markdown), y además 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>El equipo se presentará pronto.</p>
  {% endfor %}
</div>

Productos de una tienda

Fuente REST produkte: URL https://shop.example.com/api/products?category={kat}&limit=12, cabecera Authorization: Bearer {env.SHOP_TOKEN}, ruta de la lista data.items, caché 600.

<form>
  <select name="kat" onchange="this.form.submit()">
    <option value="">Todas</option>
    <option value="schuhe" {% if route.query.kat == "schuhe" %}selected{% endif %}>Zapatos</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 %}

Cada categoría es una entrada de caché propia, tanto en la consulta REST como en la caché de páginas.

Solo próximas citas

Con today y una comparación de fechas, las entradas pasadas desaparecen solas, sin eliminarlas:

{% 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>Por ahora no hay citas previstas.</p>
{% endfor %}

Un archivo muestra la misma Collection con "datum__lt", today, "sort", "-datum".

Lista paginada

Se puede calcular directamente en las expresiones (seite - 1, (seite - 1) * 10); |integer convierte el parámetro de consulta en un número.

{% 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 }}">Más recientes</a>{% endif %}
  <a href="?seite={{ seite + 1 }}">Más antiguos</a>
{% endwith %}

Constructor de páginas a partir de bloques

Lo más cómodo es el constructor de páginas integrado, con módulos y {% blocks page.blocks %} (ver 7.6). Sin esquema también funciona con una collection: Collection bloecke con seite (texto), typ (selección: text, bild, zitat), inhalt (Markdown), bild (imagen). Para cada tipo, un Snippet block/text, block/bild, block/zitat, que usan sus parámetros. En la página:

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

Proporcionar JSON a JavaScript

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

Varios idiomas

Todo lo importante está en Sitios multilingües: define el idioma en el árbol de páginas (se hereda), vincula las versiones, hreflang y sitemap llegan solos, el selector de idioma lo construyes con translations() y el menú por idioma con children(lang_root().id).

Formularios de contacto

IllusionCMS no procesa formularios por sí mismo. Usa un servicio de formularios o una API propia como destino de action e incluye su script como archivo JS.

---