Datensätze im Theme: Detail- und Übersichtsseiten

Detailseiten

Für jeden veröffentlichten Eintrag rendert Mosaio eine Seite, wenn das Theme templates/data.<handle>.liquid enthält und der Datentyp ein URL-Muster wie /blog/{slug} hat. Fehlt das Template, wird der Eintrag ohne Fehlermeldung übersprungen.

{# templates/data.blog.liquid #}
{%- assign _parts = record.url | split: '/' -%}
{%- assign overview_url = '/' | append: _parts[1] -%}

<section class="section">
  <div class="section__inner">
    <a href="{{ overview_url }}" class="btn btn--ghost">← Zurück zur Übersicht</a>
    {%- if record.cover -%}
      <img src="{{ record.cover.url | image_url }}" alt="{{ record.title | escape }}">
    {%- endif -%}
    <h1>{{ record.title }}</h1>
    {%- if record.published_at -%}<p>{{ record.published_at | date: "%d.%m.%Y" }}</p>{%- endif -%}
    {%- if record.content != blank -%}<div>{{ record.content | raw }}</div>{%- endif -%}
  </div>
</section>

• Detail-Templates haben keinen {% schema %}-Block.

• Header und Footer werden automatisch ergänzt.

• record.id, record.slug und record.url sind immer vorhanden (url nur mit URL-Muster).

Feldwerte in Liquid

Übersichtsseiten

<section class="section">
  {% if section.collection %}
    <div class="grid">
      {% for item in section.collection %}
      <a href="{{ item.url }}" class="card">
        {% if item.image %}<img src="{{ item.image.url | image_url }}" alt="{{ item.title | escape }}" loading="lazy">{% endif %}
        <h3>{{ item.title }}</h3>
      </a>
      {% endfor %}
    </div>
  {% else %}
    <p>Kein Datentyp gewählt.</p>
  {% endif %}
</section>

{% schema %}
{
  "name": "Datensatz-Liste",
  "category": "Daten",
  "enabled_on": { "groups": ["body"] },
  "settings": [
    { "type": "collection", "id": "datentyp", "label": "Datentyp" },
    { "type": "text", "id": "heading", "label": "Überschrift" }
  ],
  "presets": [ { "name": "Datensatz-Liste" } ]
}
{% endschema %}

• section.collection ist nach Position sortiert und auf 250 Einträge begrenzt.

• Schwere Felder (Richtext, JSON, Wiederholbar) fehlen in Listen – sie gehören auf die Detailseite.

• section.collection_meta liefert handle, total und url_pattern.

• Ist der Typ nicht öffentlich, ist section.collection leer – immer mit {% if %} prüfen.

Immer aktuell

Mosaio merkt sich, welche Seiten welchen Datentyp verwenden (über das collection-Setting oder collections.<handle>). Wird ein Eintrag veröffentlicht, depubliziert oder gelöscht, baut der Worker Detailseite und alle betroffenen Übersichten neu.

JSON-Island für eigenes JavaScript

<script type="application/json" data-collection-island>
  {{ section.collection | pick: 'id', 'url', 'title', 'ort', 'preis' | json }}
</script>

Setze Werte aus dem Island im JavaScript nur mit textContent oder Attribut-Settern ein, nie per innerHTML – die Daten stammen aus Nutzereingaben.