Язык шаблонов Liquid

Последние изменения: 28.09.2022

Liquid - это язык шаблонов с открытым исходным кодом, созданный компанией Shopify.


Введение

Как и традиционные языки программирования, Liquid имеет синтаксис, взаимодействует с переменными и включает в себя такие конструкции, как вывод и логика. Конструкции Liquid легко распознаются наборами разделителей: разделителями с двойной фигурной скобкой {{}}, которые обозначают вывод, и разделителями с процентной фигурной скобкой {% %}, которые обозначают логику и управляющий поток.

Существуют три основные группы в коде Liquid:

  • Объекты

  • Теги

  • Фильтры

Объекты

Объекты -  это то, с чем вы хотите взаимодействовать. Имена объектов и переменных обозначаются двойными фигурными скобками: {{- и -}}. К примеру, вам требуется сделать что-то с суммой заказа. Чтобы её получить, требуется написать {{ entity.sum }}. Где sum - интересующая нас сумма (что такое entity - в следующем разделе). 

Теги

Теги создают логику. Они обозначаются фигурными скобками и знаками процента: {%- и -%}. С помощью тегов можно создавать переменные для хранения, обработки и вывода нужных данных, а так же создавать циклы и условия.

Начнём с создания переменных. Создадим переменную var1 для хранения суммы заказа. Это можно сделать 2-мя тегами:

  • assign
  • capture
{%- assign var1 = entity.sum -%}
{%- capture var1 -%}{{- entity.sum -}}{%- endcapture -%}

Разница в том, что тег assign предназначен для хранения чего-то одного, а тег capture захватывает в себя всё, что попало между его открывающей {%- capture -%} и закрывающей {%- endcapture -%}  частями.

Его удобнее использовать, если требуется передать большие текстовые массивы, например:

{%- capture var2 -%} Ваш заказ {{ entity.name }} на сумму {{ entity.sum }} доставлен на пункт выдачи. {%- endcapture -%}

Здесь в переменную var2 поместится весь этот текст, причем в него подставятся наименование и сумма конкретного заказа.

Фильтры

Фильтры изменяют вывод объекта Liquid. Они используются в выводе и разделяются знаком |.

Можно использовать несколько фильтров, например:

Код Liquid:
{{ "adam!" | capitalize | prepend: "Hello " }}

Выведет:
Hello Adam!

Помогла ли вам статья?