Einführung in Liquid

Liquid ist eine Templatesprache, die von Shopify erstellt und in Ruby geschrieben wurde. Sie ist jetzt als Open-Source-Projekt auf GitHub verfügbar, das in verschiedenen Entwicklungen von vielen Unternehmen - Softwareherstellern - verwendet wird. Liquid ist die Grundlage aller Shopify-Themen und wird verwendet, um dynamische Inhalte auf den Seiten von Online-Shops zu laden.

In diesem Artikel

• Was ist eine Templatesprache?
• Die Liquid-Syntax
• Themenvorlagen
• Zusätzliche Ressourcen

Was ist eine Templatesprache?

Designer und Website-Entwickler können die Templatesprache verwenden, um Webseiten zu erstellen, die statische Inhalte, die für mehrere Seiten einheitlich sind, und dynamische Inhalte, die sich beim Wechsel von einer Seite zur anderen ändern, kombinieren. Die Templatesprache ermöglicht es, wiederverwendbare statische Elemente zu definieren, die das Layout der Webseite bestimmen, während die Seite dynamisch mit Daten aus dem Shopify-Shop gefüllt wird. Statische Elemente werden in HTML geschrieben, während dynamische Elemente in Liquid geschrieben werden. Liquid-Elemente in der Datei fungieren als Platzhalter: Wenn der Code in der Datei kompiliert und an den Browser gesendet wird, ersetzt Liquid sie durch Daten aus dem Shopify-Shop.

Die Liquid-Syntax

Wie traditionelle Programmiersprachen hat Liquid eine Syntax, interagiert mit Variablen und umfasst Konstruktionen wie Ausgabe und Logik. Liquid-Konstruktionen sind leicht zu erkennen und unterscheiden sich von HTML durch zwei Sets von Trennzeichen: Trennzeichen mit doppelter geschweifter Klammer {{}}, die die Ausgabe und Trennzeichen mit geschweifter Prozentklammer bezeichnen {% %}, die die Logik und den Kontrollfluss darstellen.

Es gibt drei Hauptgruppen im Liquid-Code:

• Objekte
• Tags
• Filter

Objekte

Liquid-Objekte erhalten Daten vom Shopify-Server. In der Themenvorlage werden die Objekte in doppelte geschweifte Klammern gesetzt {{ }} und sieht so 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. Um mehr über die Eigenschaften des Produktobjekts zu erfahren, klicken Sie auf den Link Produktobjekt.

Das Liquid-Objekt {{product.title}} findet sich im Template „Produkt“ des Shopify-Themes. Wenn der Code der Datei kompiliert und auf der Produktseite des Shopify-Shops angezeigt wird, wird das Liquid-Objekt im Titel der Seite angezeigt. Zum Beispiel könnte das Ergebnis in einem Bekleidungsgeschäft sein:

Wunderschönes T-Shirt

Obwohl für jedes Produkt im Shopify-Shop dasselbe Template verwendet wird, geben die Liquid-Objekte im Template je nach aufgerufener Produktseite unterschiedliche Daten aus.

Um mehr über die verschiedenen Liquid-Objekte zu erfahren, die in Themenvorlagen verwendet werden können, klicken Sie auf den Link Liquid-Objekte.

Liquid-Tags

Liquid-Tags werden verwendet, um logische Verbindungen und den Kontrollfluss in Vorlagen zu erstellen. Prozentuale geschweifte Klammern {% %}, und der Text, den sie umgeben, hat bei der Anzeige der Webseite keine sichtbaren Ergebnisse, ermöglicht jedoch die Zuweisung von Variablen und das Erstellen von Bedingungen oder Schleifen.

Zum Beispiel können Sie Liquid-Tags verwenden, um je nach Verfügbarkeit des Produkts unterschiedliche Inhalte auf der Produktseite anzuzeigen:

{% if product.available %}
  Preis: 99,99 $
{% else %}
  Entschuldigung, dieses Produkt ist ausverkauft.
{% endif %}

Wenn das Produkt verfügbar ist, wird Folgendes angezeigt:

Preis: 99,99 $

Wenn das Produkt nicht verfügbar ist, wird Folgendes angezeigt:

Entschuldigung, dieses Produkt ist ausverkauft.

Im obigen Beispiel werden if und else Liquid-Tags verwendet, die Steuerungstags sind.

Liquid-Tags werden in vier Typen unterteilt:

• Steuerfluss-Tags
• Schleifen-Tags
• Themen-Tags
• Variablen-Tags

Filter

Liquid-Filter werden verwendet, um die Ausgabe von Zahlen, Strings, Objekten und Variablen zu ändern. Sie werden in das Tag eingefügt {{ }} oder {% %} и обозначаются символом «|».

Ein einfaches Beispiel ist der Filter capitalize:

{{ 'привет мир!' | capitalize }}

Der Filter ändert den String, indem er ihn kapitalisiert. Es wird ausgegeben:

Hallo Welt!

In einem Tag können mehrere Filter verwendet werden, und sie werden von links nach rechts angewendet:

{{ 'Привет мир!' | capitalize | remove: "мир" }}

Der String wird zuerst als Großbuchstabe ausgegeben, und dann wird das Wort Welt entfernt. Es wird Folgendes angezeigt:

Hallo!

Sie können Liquid-Filter für eine Vielzahl von Datenoperationen verwenden. Die Filter werden in 8 Typen unterteilt:

• Array-Filter
• Farbfilter
• HTML-Filter
• Mathematische Filter
• Geldfilter
• String-Filter
• URL-Filter
• Zusätzliche Filter

Themenvorlagen

Sie können auf die Dateien Ihres Themas im Abschnitt „Designs“ Ihres Shopify-Dashboards zugreifen:

Zusätzliche Ressourcen

Zusätzlich zu den umfassenden Informationen über Liquid, die im Hilfe-Center verfügbar sind, können Sie das Shopify Cheat Sheet als schnelle Anleitung für Liquid in Ihrem Projekt verwenden.

Um Videos zu diesem und anderen Themen anzusehen, besuchen Sie den YouTube-Kanal von Shopify für Entwickler.