Theme Befehle
Über Theme Befehle kann die Ausgabe des HTML-Markups gesteuert werden.
comment
Mit Hilfe des comment Befehls können Kommentare im Quellcode eingefügt werden, bzw. Teile des HTML Markups "verborgen" werden.
<liquid-input>
This line is visible.
{% comment %}
This line is not visible.
This line is not visible.
{% endcomment %}
This line is visible too.
</liquid-input>
<liquid-output>
This line is visible.
This line is visible too.
</liquid-output>
asset_url
Der "asset_url" Befehl ergänzt den übergebenen, relativ zum Ordner "Assets" befindlichen, Pfad eines Assets (Bild, CSS-Datei, Javascript Datei, etc) um die restlichen Pfad-Elemente, so dass ein absoluter Pfad zum Asset erstellt wird.
<liquid-input>
{{ 'img/spacer.gif' | asset_url }}
</liquid-input>
<liquid-output>
//cdn.highspeed-network.com/10124555/555512232/themes/2154/assets/img/spacer.gif
</liquid-output>
include
Mit dem Befehl include können "snippet"-Templates eingefügt werden. Snippets befinden sich im Verzeichnis "snippets". Dem include Befehl wird der Name des einzufügenden Snippets übergeben. Die Dateiendung (liquid) wird nicht übergeben.
<liquid-input>
{% include 'snippet_test' %}
snippets/snippet_test.liquid:
<span class="red">This text is red.</span>
</liquid-input>
<liquid-output>
This text is red.
</liquid-output>
include Variablen und Parameter
Innerhalb der Snippets kann auf die Variablen des Eltern Templates zugegriffen werden.
Variablen/Paramter können aber auch mit dem include Befehl an den Snippet Code übergeben werden.
<liquid-input>
{% include 'snippet_test', snippetvar_1: '1111', snippetvar_2: '2222' %}
snippets/snippet_test.liquid:
<div>Snippet variable 1: {{ snippetvar_1 }}</div>
<div>Snippet variable 2: {{ snippetvar_2 }}</div>
</liquid-input>
<liquid-output>
Snippet variable 1: 1111
Snippet variable 2: 2222
</liquid-output>
include with
Dem include Befehl kann eine Variable auch mit Hilfe des Parameters "with" übergeben werden. Der Name der Variable, innerhalb des Snippets, muss den gleichen Namen wie dass Snippet haben.
<liquid-input>
{% include 'snippet_test' with 'Hello' %}
snippets/snippet_test.liquid:
<div>{{snippet_test}} User!</div>
</liquid-input>
<liquid-output>
Hello User!
</liquid-output>
raw
Innerhalb des raw Tags wird der Liquid Code ungeparst ausgegeben.
<liquid-input>
This is the variable assignment: {% raw %}{% assign name = 'Otto' %}{% endraw %}.
</liquid-input>
<liquid-output>
This is the variable assignment: {% assign name = 'Otto' %}
</liquid-output>
translate
Mit Hilfe des <liquid>t</liquid> Filters können Werte aus Sprach-Resource Dateien ausgegeben werden. Der Name des übergebenen Parameters muss einem Key-Value Paar aus den vorhandenen Resource-Dateien entsprechen.
<liquid-input>
{{ 'firstname_label' | t }}: Otto <br />
{{ 'lastname_label' | t }}: Max
locale/en.json:
{
"firstname_label" : "Firstname",
"lastname_label" : "Lastname"
}
</liquid-input>
<liquid-output>
Firstname: Otto
Lastname: Max
</liquid-output>
translate Parameter
Der Filter <liquid>t</liquid> kann eine kommaseparierte Liste von Key-Value Paaren empfangen, um dynamischen Ausgaben zu erzeugen. Die Keys "quiet" und "default" dürfen jedoch nicht verwendet werden, da diese reserviert sind.
<liquid-input>
{{ 'articlecount' | t: anumber:'15', pnumber:'2' }}
locale/en.json:
{
"articlecount" : "Total article amount: {{ anumber }}. Number of pages: {{ pnumber }}."
}
</liquid-input>
<liquid-output>
Total article amount: 15. Number of pages: 2.
</liquid-output>
noemptyln
Innerhalb des noemptyln Tags wird der Inhalt ohne Leerzeilen ausgegeben.
<liquid-input>
{% noemptyln %}
A text with
empty lines.
{% endnoemptyln %}
</liquid-input>
<liquid-output>
A text with
empty lines.
</liquid-output>
nooutput
Innerhalb des nooutput Tags wird der Inhalt interpretiert ohne ausgegeben zu werden.
<liquid-input>
{% nooutput %}{% assign foo = 'bar' %} Hidden text. {% endnooutput %}{{ foo }}
</liquid-input>
<liquid-output>
bar
</liquid-output>
html_export
Der <liquid>html_export</liquid> Filter rendert den übergebenen Input und gibt den Inhalt serialisiert innerhalb eines Skript-Tags zurück. Als Parameter kann ein eigener Namespace angegeben werden.
<liquid-input>
Für:
{ theme: {
role: 'main',
name: 'Demoname',
id: 1
}}
{{ theme | html_export:'theme' }}
</liquid-input>
<liquid-output>
<script type="text/javascript">theme = {"role":"main","name":"Demoname","id":1};</script>
</liquid-output>