Einen eigenen Abschnitt bauen
Zwei Dateien genügen: die Vorlage und ihr Schema — danach steht der Abschnitt im Theme-Editor zur Auswahl.
Für EntwicklerVoraussetzungen
- Recht: website:write
Ein Abschnitt besteht aus `sections/<typ>.liquid` und optional `sections/<typ>.schema.json`. Der Dateiname ohne Endung ist der Typ, unter dem eine Vorlage ihn anspricht.
Ohne Schema ist der Abschnitt zwar renderbar, aber im Theme-Editor nicht einstellbar — er zeigt dann „Für diese Section sind keine Einstellungen verfügbar."
In der Vorlage greifen Sie über `section.settings.<id>` auf die Werte zu. Alles Weitere — Restaurant, Marke, Speisekarte — steht über die allgemeinen Objekte bereit.
Denken Sie an die fehlende Maskierung: Text aus einer Einstellung gehört durch `escape`, eine Adresse durch `safe_url`.
Schritt für Schritt
Vorlage anlegen
Im Code-Editor die Datei `sections/mein-abschnitt.liquid` erzeugen und das Markup hineinschreiben, etwa `<section><h2>{{ section.settings.headline | escape }}</h2></section>`.
Schema danebenlegen
Die Datei `sections/mein-abschnitt.schema.json` erzeugen mit `name` und der Liste `settings`. Jedes Feld braucht mindestens `type`, `id` und `label`.
Speichern
Beide Dateien speichern. Der Vermerk „ungespeichert" muss verschwinden.
Im Editor prüfen
Den Theme-Editor öffnen und auf „Section hinzufügen". Ihr Abschnitt muss unter dem Namen aus dem Schema in der Liste stehen; nach dem Einfügen erscheinen rechts Ihre Felder.
Codebeispiele
<section id="{{ section.settings.anker | default: 'karte' }}" class="tageskarte"> {% if section.settings.ueberschrift != blank %} <h2>{{ section.settings.ueberschrift | escape }}</h2> {% endif %} {% if section.blocks == empty %} <p class="leer">{{ 'karte.leer' | t }}</p> {% else %} <ul> {%- for block in section.blocks %} {%- if block.type == 'gericht' %} <li data-block="{{ block.id }}"> <span class="name">{{ block.settings.name | escape }}</span> {%- if block.settings.beschreibung != blank %} <span class="text">{{ block.settings.beschreibung | escape }}</span> {%- endif %} <span class="preis">{{ block.settings.preis | money }}</span> </li> {%- endif %} {%- endfor %} </ul> {% endif %}</section>{ "name": "Tageskarte", "settings": [ { "type": "text", "id": "ueberschrift", "label": "Überschrift", "default": "Unsere Tageskarte" }, { "type": "text", "id": "anker", "label": "Anker-ID für Sprungmarken", "default": "karte" } ], "max_blocks": 8, "blocks": [ { "type": "gericht", "name": "Gericht", "settings": [ { "type": "text", "id": "name", "label": "Name" }, { "type": "textarea", "id": "beschreibung", "label": "Beschreibung" }, { "type": "number", "id": "preis", "label": "Preis in Euro" } ] } ], "default": { "settings": { "ueberschrift": "Unsere Tageskarte", "anker": "karte" } }}{% section 'tageskarte' %}Siehe auch
- Das Schema eines AbschnittsAufbau der schema.json, die Felder eines Einstellungseintrags und die Falle mit den Vorgabewerten.
- Blöcke innerhalb eines AbschnittsWiederholbare Einheiten — einzelne Gerichte, Bilder, Stimmen — samt der drei Kurzformen, die TacticTable dazulegt.
- Das Objekt section und seine zwei GesichterWas innerhalb eines Abschnitts zur Verfügung steht — und der eine Unterschied zwischen Rumpf und Layout.
- Teilstücke: render und includeWiederverwendbares Markup aus snippets/ — und der eine Unterschied zwischen render und include, an dem die meisten Übersetzungen scheitern.