Liquid
Last updated
Was this helpful?
Last updated
Was this helpful?
Liquid nos dará la posibilidad de introducir y manipular información dinámica dentro de nuestras vistas, a continuación te mostramos como hacerlo. También te dejamos links de interés para que puedas saber más acerca de esta genial tecnología.
📚Links:
Hay dos tipos de tags en Liquid: De Texto y Lógicos.
Tags de texto (que pueden devolver texto) están envueltos por
Tags lógicos (que nunca devuelven texto) están envueltos por
Aquí hay un ejemplo simple de salida:
Los tags de texto pueden tomar filtros.
Los filtros son métodos simples.
El primer parámetro que recibe el filtro es el texto o variable que se encuentra a la izquierda del filtro.
En caso de ver más de un filtro, lo que produzca el filtro más a la izquierda será el parámetro de entrada al filtro siguiente a la derecha.
Cuando no haya más filtros, el template va a recibir el texto del último filtro aplicado.
capitalize – Pone en mayúscula la primera letra del parámtro de entrada
downcase – Convierte todo el parámetro de entrada a minúsculas
upcase – Convierte todo el parámetro de entrada a mayúsculas
first – Devuelve el primer elemento de un parámetro de tipo array
last – Devuelve el último elemento de un parámetro de tipo array
join – Concatenar los elementos de un array con cierto caracter entre ellos
sort – Ordenar los elementos del array
map – Devuelve un array con la propiedad de los miembros de otro array
size – Devuelve el tamaño de un array o string (cadena de caracteres)
escape – Escapea un string
escape_once – Devuelve una versión escapeada en html sin afectar entidades ya escapeadas
strip_html – Saca todo html del string
strip_newlines – Saca todos los ‘enters’ (\n) de un string
newline_to_br – Reemplaca todos los ‘enters’ (\n) con un HTML br
replace – Reemplaza ocurrencias de cierto string por ejemplo {{ ‘foofoo’ | replace:‘foo’,‘bar’ }} #=> ‘barbar’
replace_first – Reemplaza la primer ocurrencia de un string por ejemplo {{ ‘barbar’ | replace_first:‘bar’,‘foo’ }} #=> ‘foobar’
remove – Remueve de un string toda ocurrencia de otro string por ejemplo {{ ‘foobarfoobar’ | remove:‘foo’ }} #=> ‘barbar’
remove_first – Remueve de un string la primera ocurrencia de otro string por ejemplo {{ ‘barbar’ | remove_first:‘bar’ }} #=> ‘bar’
truncate – Trunca un string de los X caracteres deseados
truncatewords – Trunca un string de las X palabras deseadas
prepend – Concatena un string al principio de otro string por ejemplo {{ ‘bar’ | prepend:‘foo’ }} #=> ‘foobar’
append – Concatena un string al final de otro string por ejemplo {{ ‘foo’ | append:‘bar’ }} #=> ‘foobar’
minus – Resta un número de otro por ejemplo {{ 4 | minus:2 }} #=> 2
plus – Suma un número a otro por ejemplo {{ ‘1’ | plus:‘1’ }} #=> ‘11’, {{ 1 | plus:1 }} #=> 2
times – Multiplica un número por otro por ejemplo {{ 5 | times:4 }} #=> 20
divided_by – Divide un número por otro por ejemplo {{ 10 | divided_by:2 }} #=> 5
split – Divide un string utilizando un patrón parámetro por ejemplo {{ “a~b” | split:~ }} #=> [‘a’,‘b’]
Se utilizan para la lógica dentro de tu template.
Es muy fácil desarrollar nuevos tags, así que esperamos recibir nuevas contribuciones a esta librería.
Aquí hay una lista de tags:
assign – Assigna un valor a una variable
capture – Captura texto dentro del bloque y lo guarda en una variable
case – Se utiliza para hacer comparaciones con valores específico (bloque case…when)
comment – Block tag, comenta el texto dentro del bloque
cycle – Se utiliza para ciclar entre valores, por ejemplo colores o clases DOM.
for – Para ciclos tipo for
if – Para bloques if/else estándar
include – Incluye otro template, útil para templates parciales
unless – Idéntico al if
Comment es el tag más simple.
Solamente oculta el contenido que encierra.
if / else funciona como en cualquier lenguaje de programación.
Liquid te permite escribir expresiones simples en las clausulas del if o unless (y opcionalmente, elsif y else):
Si necesita más condiciones, puede usar el tag case:
Ejemplo:
Frecuentemente uno debe alternar entre colores diferentes o tareas similares.
Liquid tiene soporte para ese tipo de operaciones, utilizando el tag cycle.
Si no se provee ningún nombre para el grupo del ciclo,
entonces se asume que múltiples llamadas con los mismos parámetros son un grupo.
Si quiere tener control total sobre los grupos del ciclo, opcionalmente puede especificar el nombre del grupo.
Esto puede ser una variable.
Liquid te permite iterar sobre collecciones con un tag for:
En cada iteración del ciclo for, puede usar alguna de las siguientes variables para sus necesidades de styling:
Hay muchos atributos que puedes usar para influenciar a los items que usas para iterar en tu ciclo.
limit:int te permite la cantidad de items que recibes para iterar.
offset:int te permite empezar en la posicion N de la collección.
Iterando el ciclo en forma inversa
En vez de iterar sobre una collección existente, puedes definir un rango de numbers para iterarlo.
El rango se puede definir por literales o números variables:
Puedes guardar datos en tus propias variables, para ser usadas en otros tags de texto o lógica como necesites.
La forma más simple de crear una variable es con un tag assign, que tiene una sintáxis bien directa:
Otra forma de hacer esto sería asignando los valores true / false a una variable:
Si quieres combinar muchos strings en un solo string y luego guardarlo en una variable, puedes usar el tag capture.
Este tag es un bloque que “captura” todo lo que tenga adentro, luego lo asigna a una variable en vez de mostrarlo por pantalla.
date – le dá formato a una fecha ()