Startseite > Template- und Themeprogrammierung > Skriptsprache > Theme Befehle

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>