Précédent

Suivant

Principes de base de Liquid

Effectué

Comme tout langage de programmation traditionnel, Liquid a défini une syntaxe, peut utiliser des définitions de variables et inclut des constructions telles que la sortie et la logique. Les constructions Liquid sont reconnaissables grâce à deux ensembles de délimiteurs : les délimiteurs avec double accolade {{ }}, qui désignent la sortie des objets et des variables, et les délimiteurs avec pourcentages et accolades {% %}, qui représentent la logique et le flux de contrôle.

Conseil

Le contenu de page et les extraits de contenu facilitent la « pratique » de Liquid en saisissant le contenu Liquid dans le studio de conception Power Pages. À mesure que vous progressez dans ce contenu d’apprentissage, essayez tout exemple de fragment Liquid en copiant-collant le code directement dans une page à l’aide du studio de conception Power Pages ou de Visual Studio Code.

Sortie

Une instruction de sortie désigne un ensemble d’accolades doubles comportant une expression. Lorsque la sortie s’affiche, elle est remplacée par la valeur de cette expression. L’expression peut inclure des objets Liquid, leurs propriétés et des variables. L’exemple suivant illustre une instruction de sortie simple :

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

En supposant que le prénom de l’utilisateur est Doug, cette instruction de sortie produit le résultat suivant :

Bonjour Doug, de la part de Power Pages

Filtres

Le balisage de sortie peut utiliser des filtres qui modifient le résultat de l’instruction de sortie. Vous pouvez ajouter des filtres en faisant suivre l’expression de sortie d’une barre verticale (|), du nom du filtre et de paramètres facultatifs après deux points (:).

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

Cette instruction de filtre génère le résultat suivant :

Bonjour DOUG, de la part de Power Pages. La date est le 25 mai 2023.

Balises

Vous pouvez utiliser les balises pour la logique et le flux de contrôle dans votre modèle, par exemple (HTML a également été ajouté à l’exemple) :

{% 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>

Dans ce fragment, la balise assign crée une variable et la construction if... else génère la sortie selon que l’utilisateur a été défini (autrement dit, si un visiteur du site web s’est connecté) ou non. La sortie pour un utilisateur anonyme est la suivante :

Bonjour cher visiteur, de la part de Power Pages !

Voici la date et l’heure : 24/05/2023 11:33

Liquid comprend plusieurs objets et balises intégrés qui le rendent polyvalent et flexible. Les avantages réels viennent des extensions Liquid implémentées par Power Pages.

Continuer