Liquid von vorn: Ausgabe, Bedingungen, Schleifen, Zuweisungen

Die vier Bausteine, aus denen jede Vorlage besteht — und die Stellen, an denen diese Engine sich anders verhält als das Liquid anderer Anbieter.

Für Entwickler

Voraussetzungen

  • Recht: website:write

Liquid kennt zwei Klammerformen. `{{ … }}` gibt etwas aus, `{% … %}` tut etwas, ohne selbst etwas auszugeben. Mehr Grammatik gibt es nicht.

AUSGABE: `{{ restaurant.name }}`. Fehlt die Variable, bleibt die Stelle leer — auch dann, wenn Sie über eine fehlende Variable hinweg noch weiter in die Tiefe greifen. Das ist bequem und gefährlich zugleich: ein Tippfehler im Namen sieht genauso aus wie ein leeres Feld.

BEDINGUNGEN: `{% if %}`, `{% elsif %}`, `{% else %}`, `{% unless %}` und `{% case %}` mit `{% when %}`. Verglichen wird mit `==`, `!=`, `<`, `>`, `<=`, `>=`, `contains`, `and` und `or`. Zwei Sonderwerte helfen: `blank` ist wahr für leere Zeichenketten und leere Listen, `empty` für leere Listen und Objekte.

ACHTUNG bei der Wahrheit: Diese Engine rechnet nach den Regeln von JavaScript. Eine leere Zeichenkette ist FALSCH, die Zahl `0` ist FALSCH. In anderen Liquid-Welten wären beide wahr. Wer eine Zahl prüft, bei der `0` ein gültiger Wert ist, muss deshalb auf `== nil` prüfen statt auf die Wahrheit.

SCHLEIFEN: `{% for eintrag in liste %}`. Innerhalb steht `forloop` mit `index`, `index0`, `first`, `last`, `length` und `rindex`. Als Zusätze gehen `limit`, `offset` und `reversed`. Ein `{% else %}`-Zweig springt an, wenn die Liste leer ist — oder wenn es sie gar nicht gibt. Eine Schleife über nichts dreht null Runden und bricht NICHT ab.

ZUWEISUNGEN: `{% assign name = wert %}` legt eine Variable an, `{% capture name %}…{% endcapture %}` fängt gerendertes Markup in einer Variable ein. Beide überleben die Schleife, in der sie stehen. Mit `{% liquid %}` schreiben Sie mehrere Anweisungen ohne die Klammern, eine je Zeile.

LEERRAUM: Ein Bindestrich an der Klammer frisst den angrenzenden Leerraum — `{%- assign … -%}`. Ohne ihn hinterlässt jede Steueranweisung eine Leerzeile im Ergebnis. Das ist kosmetisch, bis eine leere Zeile in einem `<pre>` oder in einem `style`-Attribut landet.

Was es NICHT gibt, obwohl es in anderen Liquid-Welten dazugehört: `{% schema %}`, `{% style %}`, `{% stylesheet %}`, `{% javascript %}`, `{% form %}` und `{% paginate %}`. Jedes davon bricht die Seite ab — siehe den Artikel über die Tags.

Codebeispiele

Ausgabe: zwei geschweifte Klammern
Liquid
{{ restaurant.name }} — {{ restaurant.address_full }}Telefon: {{ restaurant.phone }}Was es nicht gibt, bleibt leer: [{{ restaurant.gibt_es_nicht }}]Auch eine Kette darüber hinweg: [{{ restaurant.gibt_es_nicht.und.tiefer }}]
Kein Fehler, keine Warnung. Deshalb ist der erste Handgriff bei „da steht nichts" immer: den Namen buchstabieren.
Bedingungen: if, elsif, else, unless
Liquid
{% if restaurant.phone %}  <a href="tel:{{ restaurant.phone | url_encode }}">Anrufen</a>{% elsif restaurant.email %}  <a href="mailto:{{ restaurant.email }}">Schreiben</a>{% else %}  <p>Bitte über die Buchungsstrecke reservieren.</p>{% endif %} {% unless analytics.enabled %}<p>Die Reichweitenmessung ist abgeschaltet.</p>{% endunless %}{% if products.size > 2 and menus.size > 0 %}<p>Karte und Menü sind gepflegt.</p>{% endif %}
`unless` ist `if` mit umgekehrtem Vorzeichen, es kennt kein `elsif`. Verknüpft wird mit `and` und `or`; eine Klammersetzung gibt es nicht, ausgewertet wird von rechts nach links.
blank und empty — die beiden Sonderwerte
Liquid
{% if section.settings.anker != blank %}Anker gesetzt: {{ section.settings.anker }}{% endif %}
{% if section.settings.gibt_es_nicht == blank %}Diese Einstellung ist leer oder fehlt.{% endif %}
{% if section.blocks == empty %}keine Blöcke{% else %}{{ section.blocks.size }} Blöcke{% endif %}
`!= blank` ist die richtige Prüfung für eine Text-Einstellung: sie fängt „nicht gesetzt" und „leer eingetragen" auf einmal ab. `== empty` ist die richtige Prüfung für eine Liste.
Mehrere Fälle: case und when
Liquid
{% for block in section.blocks %}  {%- case block.type -%}  {%- when 'gericht' -%}    <li>{{ block.settings.name | escape }}</li>  {%- when 'hinweis' -%}    <p>{{ block.settings.text | escape }}</p>  {%- else -%}    <!-- unbekannte Blockart: {{ block.type }} -->  {%- endcase -%}{% endfor %}
Das Muster für einen Abschnitt mit mehreren Blockarten. Der `else`-Zweig als HTML-Kommentar ist ein Kniff aus der Praxis: er verrät bei der Fehlersuche im Quelltext, dass eine Blockart im Template fehlt.
Schleifen und das Objekt forloop
Liquid
<ul>{%- for gericht in products limit: 2 %}  <li>{{ forloop.index }} von {{ forloop.length }}: {{ gericht.title }}{% unless forloop.last %},{% endunless %}</li>{%- endfor %}</ul>
`limit` und `offset` schneiden die Liste zu, und `forloop.length` meldet danach die ZUGESCHNITTENE Länge — nicht die der ganzen Liste. `forloop.last` ist der übliche Weg, das letzte Komma loszuwerden.
Leere Listen abfangen: for mit else
Liquid
{% for eintrag in gibt_es_gar_nicht %}  <li>{{ eintrag }}</li>{% else %}  <p>Nichts zu zeigen.</p>{% endfor %}
Der `else`-Zweig greift bei einer leeren Liste UND bei einer Variable, die es gar nicht gibt. Damit ist er die kürzeste Absicherung gegen den frisch angelegten Betrieb, der noch nichts gepflegt hat.
Zuweisungen: assign, capture und der liquid-Block
Liquid
{%- assign titel = restaurant.name | upcase -%}{%- capture anschrift -%}{{ restaurant.address_full }} · {{ restaurant.phone }}{%- endcapture -%}{% liquid  assign offene_tage = restaurant.opening_hours | where: 'closed', false | size  assign vegan = products | where: 'is_vegan', true | size%}<h1>{{ titel }}</h1><p>{{ anschrift }}</p><p>An {{ offene_tage }} Tagen geöffnet. Vegane Gerichte: {{ vegan }}.</p>
`assign` nimmt einen Wert samt Filterkette, `capture` fängt gerendertes Markup ein — nützlich, wenn Sie ein `style`-Attribut aus mehreren Bedingungen zusammensetzen. Der `{% liquid %}`-Block spart die Klammern, wenn mehrere Anweisungen hintereinander stehen.
Leerraum steuern
Liquid
<p>  {%- assign gruss = 'Guten Abend' -%}  {{ gruss }}</p>
Der Bindestrich an der Klammer frisst den Leerraum davor beziehungsweise dahinter. Ohne ihn stünden hier zwei Leerzeilen im Ergebnis — sichtbar wird das erst, wenn so etwas in einem `<pre>` oder in einem Attribut landet.
Zugriff über eckige Klammern
Liquid
{%- assign kennung = 'menu-abend' -%}Nachschlagen mit fester Kennung: {{ navigation_menus_by_handle['hauptmenue'].title }}Nachschlagen mit einer Variablen: {{ menus_by_id[kennung].name }}Erster Eintrag einer Liste: {{ products[0].title }} / {{ products.first.title }}Anzahl: {{ products.size }}
Eckige Klammern brauchen Sie überall dort, wo der Schlüssel aus einer Variablen kommt oder Zeichen enthält, die im Punktpfad nicht gehen — ein Bindestrich zum Beispiel wird sonst als Minus gelesen.

Wo im Dashboard

/restaurant/[slug]/website/themes/[id]/code

Im Dashboard öffnen

Siehe auch

← Zurück zu Theme-Entwicklung