Vorherige

Nächste

Grundlagen von Liquid

Abgeschlossen

Wie jede herkömmliche Programmiersprache hat Liquid eine definierte Syntax, kann Variablendefinitionen verwenden und enthält Konstrukte wie Ausgabe und Logik. Liquid-Konstrukte sind an zwei Sätzen an Trennzeichen zu erkennen: die doppelten geschweiften Klammern {{ }}, die die Ausgabe aus den Objekten und Variablen kennzeichnen, und die geschweiften Klammern mit Prozentzeichen {% %}, die Logik und Ablaufsteuerung bezeichnen.

Tipp

Mit Seiteninhalten und Inhaltsausschnitten können Sie die Verwendung von Liquid leichter üben, indem Sie den Liquid-Inhalt im Power Pages-Designstudio eingeben. Probieren Sie beim Durchgehen dieses Lerninhalts eines der Liquid-Beispielfragmente aus, indem Sie den Code kopieren und direkt mit Power Pages-Designstudio oder Visual Studio Code in eine Seite Ihres Portals einfügen.

Ausgabe

Eine Ausgabeanweisung ist ein Satz von doppelten Klammern, die einen Ausdruck enthalten. Die Ausgabe wird durch den Wert dieses Ausdrucks ersetzt, wenn sie gerendert wird. Der Ausdruck kann Liquid-Objekte, ihre Eigenschaften und Variablen enthalten. Das folgende Beispiel zeigt eine einfache Ausgabeanweisung:

Hello {{ user.firstname }} from {{ 'Power Pages' }}

Diese Ausgabeanweisung erzeugt das folgende Ergebnis, angenommen, der Vorname des Benutzers ist Doug:

Hallo Doug von Power Pages

Filter

Das Ausgabe-Markup kann Filter enthalten, die das Ergebnis der Ausgabeanweisung ändern. Sie können Filter hinzufügen, indem Sie dem Ausgabeausdruck einen senkrechten Strich (|), den Namen des Filters und optionale Parameter nach einem Doppelpunkt (:) nachstellen.

Hello {{ user.firstname | upcase }} from {{ 'Power Pages' }}. The date is {{ 'now' | date: 'MMMM d yyyy' }}

Diese Filteranweisung generiert das folgende Ergebnis:

Hallo DOUG von Power Pages. Das Datum ist 25. Mai 2023.

Tags

Sie können Tags beispielsweise für die Logik und die Ablaufsteuerung in Ihrer Vorlage verwenden (dem Beispiel wurde auch HTML hinzugefügt):

{% assign product = 'Power Pages' %}

<p>
    {% if user %}
        Hello, {{ user.firstname | upcase }}, from <strong>{{ product }}</strong>.
    {% else %}
        Greetings, <em>visitor</em>, from <strong>{{ product }}</strong>!
    {% endif %}
</p>

<p>The time is {{ 'now' | date: 'g' }}</p>

In diesem Fragment erstellt der assign-Tag eine neue Variable, und das Konstrukt if... else generiert die Ausgabe in Abhängigkeit davon, ob ein Benutzer definiert ist (mit anderen Worten, ob ein Websitebesucher angemeldet ist) oder nicht. Die Ausgabe für einen anonymen Benutzer lautet folgendermaßen:

Schöne Grüße Besucher von Power Pages!

Wir haben den 24.05.2023, es ist 11:33 Uhr.

Liquid enthält mehrere integrierte Objekte und Tags, wodurch die Sprache vielseitig und flexibel ist. Die wirklichen Vorteile ergeben sich aus den Liquid-Erweiterungen, die von Power Pages implementiert werden.

Weiter