Die eigenen Liquid-Filter
Sieben Filter kommen von TacticTable dazu — alle übrigen sind die von LiquidJS.
Für EntwicklerVoraussetzungen
- Recht: website:write
`asset_url` — macht aus einem Dateinamen die Auslieferungsadresse einer Theme-Datei. `{{ "theme.css" | asset_url }}` ergibt den Pfad, unter dem `assets/theme.css` ausgeliefert wird.
`t` — schlägt einen Text in der aktiven Sprachdatei nach, über einen Pfad mit Punkten: `{{ "header.open_menu" | t }}`. Gibt es den Eintrag nicht, wird der Schlüssel selbst ausgegeben — fehlende Übersetzungen fallen also sofort auf.
`safe_url` — reinigt eine Adresse. Durchgelassen wird nur, was mit `/` beginnt oder ein vollständiges `http`- beziehungsweise `https`-Ziel ist; `javascript:`, `data:` und `vbscript:` werden verworfen, ebenso Anführungszeichen, Klammern, Leerraum und Steuerzeichen. Länger als 2048 Zeichen geht nicht durch. Kommt etwas Unerlaubtes an, ist das Ergebnis eine leere Zeichenkette. Benutzen Sie ihn für JEDE Adresse, die aus einer Einstellung stammt.
`money` — formatiert eine Zahl als Betrag in deutscher Schreibweise, voreingestellt in Euro. Der Wert ist in GANZEN Einheiten anzugeben, nicht in Cent: `14.9` wird zu „14,90 €". Ist der Wert keine Zahl, bleibt er unverändert.
`font_url_family` — bereitet einen Schriftnamen für die Adresse einer Web-Schrift auf (Leerzeichen werden zu `+`).
`url_encode` — kodiert einen Wert für die Verwendung in einer Adresse.
`img_url` — nimmt ein zweites Argument für die Grösse entgegen, IGNORIERT es aber und gibt die Adresse unverändert zurück. Erwarten Sie davon keine Skalierung.
Darüber hinaus stehen alle mitgelieferten Filter von LiquidJS zur Verfügung, unter anderem `default`, `escape`, `date`, `divided_by`, `capitalize` und `truncate`.
Codebeispiele
<link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
<script src="{{ 'theme.js' | asset_url }}" defer></script><img src="{{ products[0].image_url | img_url: '800x' }}" alt="{{ products[0].title | escape }}"><link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family={{ settings.font_headline | font_url_family }}:wght@400;600&display=swap"><a href="https://www.google.com/maps/search/?api=1&query={{ restaurant.address_full | url_encode }}">Anfahrt</a>
<a href="tel:{{ restaurant.phone | url_encode }}">Anrufen</a>Vollständige Adresse: [{{ 'https://bilder.example.com/saal.jpg' | safe_url }}]Wurzelrelativ: [{{ '/assets/hintergrund.jpg' | safe_url }}]Abgewiesen: [{{ 'javascript:alert(1)' | safe_url }}]Abgewiesen: [{{ 'bild.jpg" onerror=boese()' | safe_url }}]Aus ganzen Euro: {{ 14.9 | money }}Aus Cent: {{ products[0].price_cents | divided_by: 100.0 | money }}Andere Währung: {{ 14.9 | money: 'CHF' }}Schon fertig formatiert: {{ products[0].price }}<a class="knopf" href="{{ restaurant.booking_url | safe_url }}">{{ 'kopf.reservieren' | t }}</a>
Fehlt der Eintrag, erscheint der Schlüssel: [{{ 'kopf.gibt_es_nicht' | t }}]{{ restaurant.description | truncate: 24 }}{{ restaurant.name | slugify }}{{ products | map: 'title' | join: ', ' }}{{ products | where: 'is_vegan', true | size }} vegane Gerichte{{ now | date: '%d.%m.%Y' }}{{ settings.container_max | minus: 80 }}px[{{ 4800 | money_with_currency }}][{{ 'Crème Brûlée' | handleize }}][{{ 'theme.css' | stylesheet_tag }}][{{ products[0].image_url | image_url: '400x' }}]Meldungen, die hierher gehören
Siehe auch
- 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.
- Texte übersetzen: Sprachdateien und der t-FilterWie die Sprachdateien aufgebaut sind, wie sie ausgewählt werden — und warum derzeit immer die Standardsprache gewinnt.
- Die Liquid-Umgebung: wie streng sie istUnbekannte Variablen und Filter sind still, unbekannte Tags brechen ab — und ausgegeben wird ohne Maskierung.
- Tipps und Kniffe aus der PraxisDie Handgriffe, die ein Theme robust machen: Standardwerte, sicheres Verketten, leere Listen, Bilder, Adressen und Beträge.