Teilstücke: render und include
Wiederverwendbares Markup aus snippets/ — und der eine Unterschied zwischen render und include, an dem die meisten Übersetzungen scheitern.
Für EntwicklerVoraussetzungen
- Recht: website:write
Ein Teilstück ist eine Datei unter `snippets/` mit der Endung `.liquid`. Es hat kein Schema, keine Einstellungen und keinen Platz in einer Vorlage — es wird aus einem Abschnitt oder dem Layout heraus aufgerufen.
Gefunden wird es unter drei Schreibweisen: `"gericht-zeile"`, `"gericht-zeile.liquid"` und `"snippets/gericht-zeile"`. Ein Zugriff auf das Dateisystem des Servers ist dabei nicht möglich; nachgesehen wird ausschliesslich in den Teilstücken des Themes.
DER UNTERSCHIED, um den es geht: `{% render %}` gibt dem Teilstück einen LEEREN Geltungsbereich. Darin steht nur, was Sie ausdrücklich hereinreichen — kein `restaurant`, kein `settings`, kein `section`, kein `locales`. `{% include %}` dagegen reicht die gesamte Umgebung durch.
Die Folge, die am meisten Zeit kostet: Der Filter `t` findet seine Sprachdatei in einem `render`-Teilstück NICHT und gibt nur den Schlüssel zurück. Übersetzen Sie deshalb im aufrufenden Template und reichen Sie den fertigen Text herein — oder nehmen Sie an dieser Stelle `include`.
Die zweite Folge betrifft Zuweisungen: Ein `{% assign %}` innerhalb eines `include`-Teilstücks wirkt NACH AUSSEN weiter, bei `render` nicht. Das ist bequem und zugleich die Ursache für Werte, die sich unterwegs still ändern.
Empfehlung: `render` ist der Normalfall, weil abgekapselt. `include` nur dort, wo Sie die Umgebung wirklich brauchen — und dann mit dem Wissen, dass Zuweisungen hinausreichen.
ACHTUNG: Ein Teilstück, das es nicht gibt, bricht die ganze Seite ab. Das ist der Unterschied zu `{% section %}`, das einen unbekannten Abschnitt nur als HTML-Kommentar vermerkt.
Codebeispiele
<li class="gericht"> <span class="name">{{ gericht.title | escape }}</span> <span class="preis">{{ gericht.price }}</span></li><ul>{%- for gericht in products %} {% render 'gericht-zeile', gericht: gericht %}{%- endfor %}</ul><ul>{% render 'gericht-zeile' for products as gericht %}</ul>restaurant=[{{ restaurant.name }}] settings=[{{ settings.color_accent }}] section=[{{ section.id }}] t=[{{ 'fuss.geschlossen' | t }}]mit render: {% render 'umgebung' %}
mit include: {% include 'umgebung' %}{%- assign gesamt = 3 -%}gesetzt{% render 'setzt-was' %} nach render: [{{ gesamt }}]
{% include 'setzt-was' %} nach include: [{{ gesamt }}]{% render 'gericht-zeile', gericht: products[0] %}
{% render 'gericht-zeile.liquid', gericht: products[0] %}
{% render 'snippets/gericht-zeile', gericht: products[0] %}{% render 'gibt-es-nicht' %}Siehe auch
- Einen eigenen Abschnitt bauenZwei Dateien genügen: die Vorlage und ihr Schema — danach steht der Abschnitt im Theme-Editor zur Auswahl.
- Texte übersetzen: Sprachdateien und der t-FilterWie die Sprachdateien aufgebaut sind, wie sie ausgewählt werden — und warum derzeit immer die Standardsprache gewinnt.
- Welche Liquid-Tags es gibt — und welche abbrechenGenau ein eigenes Tag, dazu die von LiquidJS. Fünf Tags aus anderen Liquid-Welten brechen hier die Seite ab.
- Häufige Fehler und woran man sie erkenntWas passiert bei einem unbekannten Abschnitt, bei einer fehlenden Einstellung, bei einer Schleife über nichts — und welche Fehler die Seite wirklich abbrechen.