Liquid Überblick

Liquid ist eine Template-Sprache, die von VersaCommerce entwickelt und in Ruby geschrieben wurde. Es ist jetzt als Open-Source-Projekt auf GitHub verfügbar und wird von vielen verschiedenen Softwareprojekten und Unternehmen verwendet. Liquid ist das Rückgrat aller VersaCommerce-Themen und wird zum Laden dynamischer Inhalte auf den Seiten von Online-Shops verwendet.

Inhalt

• What is a template language?
• Use cases
• Liquid syntax
• Objects
• Tags
• Filters
• Resources
• Tools

What is a template language?

Website-Designer und -Entwickler können eine Template-Sprache verwenden, um Webseiten zu erstellen, die statische Inhalte, die auf mehreren Seiten gleich sind, und dynamische Inhalte, die sich von einer Seite zur nächsten ändern, kombinieren. Eine VTemplate-Sprache ermöglicht es, die statischen Elemente, die das Layout einer Webseite definieren, wiederzuverwenden und die Seite gleichzeitig dynamisch mit Daten aus einem VersaCommerce-Shop zu füllen. Die statischen Elemente werden in HTML geschrieben, die dynamischen Elemente in Liquid. Die Liquid-Elemente in einer Datei dienen als Platzhalter: Wenn der Code in der Datei kompiliert und an den Browser gesendet wird, wird das Liquid durch Daten aus dem VersaCommerce-Shop ersetzt, in dem das Thema installiert ist.

Use cases

• Arbeit an VersaCommerce-Themes.
• Erstellen Sie ein vollständiges VersaCommerce-Theme.
• Ändern Sie ein vorhandenes Thema. VersaCommerce-Händler beauftragen oft Entwickler, die Themes an ihre speziellen Bedürfnisse anpassen.

Liquid syntax

Wie herkömmliche Programmiersprachen hat auch Liquid eine Syntax, interagiert mit Variablen und enthält Konstrukte wie Ausgabe und Logik. Aufgrund seiner lesbaren Syntax sind Liquid-Konstrukte leicht zu erkennen und können durch die folgenden Begrenzungszeichen von HTML unterschieden werden:

• Doppelte geschweifte Klammern als Begrenzungszeichen {{ }}, die die Ausgabe bezeichnen.

• Prozentuale Begrenzungszeichen in geschweiften Klammern {% %}, die den Logik- und Kontrollfluss bezeichnen.

Es gibt drei Hauptmerkmale von Liquid Code:

• Objekte
• Tags
• Filter

Objects

Liquid-Objekte geben Daten von einem VersaCommerce-Admin aus. In einer Themenvorlage werden die Objekte in doppelte geschweifte Klammern {{ }} eingeschlossen und sehen wie folgt aus:

{{ product.title }}

Im obigen Beispiel ist product das Objekt, und title ist eine Eigenschaft dieses Objekts. Jedes Objekt hat eine Liste von zugehörigen Eigenschaften. Weitere Informationen zu den Eigenschaften des Objekts product finden Sie in der Liquid-Referenz.

Das Objekt {{ product. title }} Liquid befindet sich in der Produktvorlage eines VersaCommerce-Themas. Wenn der Code in der Datei kompiliert und auf einer Produktseite eines VersaCommerce-Shops gerendert wird, ist die Ausgabe des Liquid-Objekts der Titel des Produkts. In einem Bekleidungsgeschäft könnte das Ergebnis zum Beispiel so aussehen:

Grossartige T-Shirt

Auch wenn für jedes Produkt in einem VersaCommerce-Shop dieselbe Vorlage verwendet wird, geben die Liquid-Objekte in der Vorlage je nach der angezeigten Produktseite unterschiedliche Daten aus.

Weitere Informationen zu den verschiedenen Liquid-Objekten, die in Designvorlagen verwendet werden können, finden Sie auf der Seite Liquid-Objekte.

Tags

Liquid-Tags werden verwendet, um Logik und Kontrollfluss für Vorlagen zu erstellen. Die geschweiften Klammern als prozentuale Begrenzer {% %} und der Text, den sie umgeben, erzeugen keine sichtbare Ausgabe, wenn die Webseite gerendert wird. So können Sie Variablen zuweisen und Bedingungen oder Schleifen erstellen, ohne dass die Liquid-Logik auf der Seite angezeigt wird.

Sie können zum Beispiel Liquid-Tags verwenden, um auf der Produktseite unterschiedliche Inhalte anzuzeigen, je nachdem, ob ein Produkt verfügbar ist oder nicht:

{% if product.available %}
<h2>Price: €99.99</h2>
{% else %}
<h2 class="sold-out">Sorry, this product is sold out.</h2>
{% endif %}

Wenn das Produkt verfügbar ist, wird die Ausgabe lauten:

Price: €99.99

Wenn das Produkt nicht verfügbar ist, lautet die Ausgabe:

Sorry, this product is sold out.

Im obigen Beispiel werden die Liquid-Tags if und else verwendet, bei denen es sich um Kontrollfluss-Tags handelt.

Liquid Anhänge werden in die folgenden Typen eingeteilt:

• Control flow-Tags
• Iteration-Tags
• Theme-Tags
• Variable-Tags
• Deprecated-Tags

Filters

Liquid-Filters werden verwendet, um die Ausgabe von Zahlen, Strings, Objekten und Variablen zu verändern. Sie befinden sich innerhalb eines Ausgabe-Tags {{ }} und werden durch ein Pipe-Zeichen | gekennzeichnet.

Ein einfaches Beispiel ist der capitalize string filter:

{{ 'hello, Welt!' | capitalize }}

Der Filter ändert die Zeichenfolge, indem er sie groß schreibt. Die Ausgabe wird sein:

Hallo, Welt!

Für einen Ausgang können mehrere Filter verwendet werden, die von links nach rechts angewendet werden:

{{ 'hello, Welt!' | capitalize | remove: "Welt" }}

Die Zeichenfolge wird zunächst großgeschrieben, dann wird das Wort world entfernt. Die Ausgabe wird sein:

Hallo, !

Mit Liquid-Filtern können Sie eine Vielzahl von nützlichen Datenmanipulationen vornehmen. Liquid Filter werden in die folgenden Typen eingeteilt:

• Array filters
• Color filters
• HTML filters
• Math filters
• Money filters
• String filters
• URL filters
• Additional filters

Resources

Tools