Fundamentos de Liquid
Como sucede con cualquier lenguaje de programación tradicional, Liquid tiene una sintaxis definida, puede usar definiciones de variables e incluye construcciones como las de salida y lógica. Las construcciones de Liquid se reconocen por dos conjuntos de delimitadores: los delimitadores de llaves dobles {{ }}, que denotan salida de los objetos y las variables, y los delimitadores de porcentaje y llaves {% %}, que denotan lógica y control de flujo.
Sugerencia
El contenido de la página y los fragmentos de contenido ayudan a facilitar la "práctica" de Liquid introduciendo el contenido de Liquid en el estudio de diseño de Power Pages. A medida que vaya avanzando por el contenido de aprendizaje, pruebe alguno de los fragmentos Liquid de ejemplo copiando y pegando el código directamente en una página mediante el estudio de diseño de Power Pages o Visual Studio Code.
Salida
Una instrucción de salida es un conjunto de llaves dobles que contienen una expresión. Cuando se representa la salida, se reemplaza con el valor de esa expresión. La expresión puede incluir objetos de Liquid, sus propiedades y variables. El siguiente ejemplo muestra una instrucción de salida simple:
Hello {{ user.firstname }} from {{ 'Power Pages' }}
Suponiendo que el nombre del usuario es Doug, esta instrucción de salida genera el siguiente resultado:
Hola, Doug, desde Power Pages
Filtros
El incremento de salida puede tomar filtros, que modifican el resultado de la instrucción de salida. Puede agregar filtros si sigue la expresión de salida con un carácter de barra vertical (|), el nombre del filtro y los parámetros opcionales después de los dos puntos (:).
Hello {{ user.firstname | upcase }} from {{ 'Power Pages' }}. The date is {{ 'now' | date: 'MMMM d yyyy' }}
Esta instrucción de filtro genera el siguiente resultado:
Hola, DOUG, desde Power Pages. La fecha es 25 de mayo de 2023.
Etiquetas
Puede utilizar etiquetas para la lógica y el flujo de control de la plantilla, por ejemplo (también se ha agregado HTML al ejemplo):
{% 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>
En este fragmento, la etiqueta assign crea una nueva variable y la construcción if... else genera la salida en función de si el usuario está definido (en otras palabras, de si un visitante del sitio web ha iniciado sesión). El resultado para un usuario anónimo es el siguiente:
Saludos, visitante, desde Power Pages.
La fecha es 24/05/2023 11:33 AM
Liquid incluye varios objetos y etiquetas integrados que lo hacen versátil y flexible. Los beneficios reales provienen de las extensiones de Liquid que implementa Power Pages.