Liquid представляет собой язык шаблонов, созданный в рамках проекта Shopify и написан на базе языка Ruby. Теперь он доступен как проект с открытым исходным кодом на GitHub и используется многими различными проектами и компаниями программного обеспечения. Liquid является основой всех тем JKassa и используется для загрузки динамического контента на страницы интернет-магазинов.
Что такое язык шаблонов?
Дизайнеры и разработчики сайтов могут использовать язык шаблонов для создания веб-страниц, которые объединяют статический контент, который является одним и тем же на нескольких страницах, и динамический контент, который изменяется с одной страницы на другую. Язык шаблонов позволяет повторно использовать статические элементы, которые определяют макет веб-страницы, а динамическое заполнение страницы данными из компонента и расширений JKassa. Статические элементы записываются в HTML, а динамические элементы записываются в Liquid. Элементы Liquid в файле действуют как заполнители: когда код в файле компилируется и отправляется в браузер, Liquid заменяется данными из магазина JKassa, где установлена тема.
Синтаксис языка Liquid
Как и традиционные языки программирования, Liquid имеет синтаксис, взаимодействует с переменными и включает в себя такие конструкции, как вывод и логика. Из-за его читаемого синтаксиса конструкции Liquid легко распознаются и могут отличаться от HTML двумя наборами разделителей: разделителями двойной фигурной скобки {{ }}
, которые обозначают выходные данные, а фигурные скобки процентные разделители {% %}
, которые обозначают логику и поток управления.
Существуют три основные особенности Liquid кода:
Объекты
Объекты Liquid выводят куски данных из компонента JKassa. В теме объекты обернуты в двойные фигурные скобки {{ }}
, и выглядят так:
В приведенном выше примере product
является объектом, а name
является свойством этого объекта. Каждый объект имеет список связанных свойств. Чтобы узнать больше о свойствах объекта product
, см. ссылки Liquid.
Объект {{ product.name }}
можно найти в файле темы JKassa для страницы списка продуктов. После того как код в файле компилируется и отображается на странице, выход объекта Liquid будет заголовком продукта. Например, в магазине одежды результатом может быть:
Несмотря на то, что один и тот же шаблон используется для каждого продукта в магазине JKassa, объекты Liquid в шаблоне будут выводить разные данные в зависимости от просматриваемой страницы продукта или категории.
Чтобы узнать больше о различных объектах Liquid, которые можно использовать в шаблонах тем, см. страницу объектов Liquid.
Теги
Теги Liquid используются для создания логики и потока управления для шаблонов. Фигурные скобки и знаки процентов {% %}
и текст, который они окружают не производят никакого видимого вывода, когда веб-страница отображается. Это позволяет назначать переменные и создавать условия или циклы, не показывая ни одну из логики Liquid на странице.
Например, вы можете использовать теги Liquid для отображения различного контента на странице продукта в зависимости от того, доступен ли продукт:
Если продукт доступен, то на выходе будет:
Если продукт не доступен, то на выходе будет:
В приведённом выше примере используются теги Liquid if
и else
, которые являются тегами управления потоком.
Теги Liquid подразделяются на разные типы:
Фильтры
Фильтры Liquid используются для изменения вывода чисел, строк, объектов и переменных. Они помещаются в выходной тег {{ }}
и обозначаются символом вертикальной черты |
.
Простым примером является строковый фильтр capitalize
:
Фильтр изменяет строку путем ее капитализации. Выход будет:
На одном выходе могут использоваться несколько фильтров, и они применяются слева направо:
The string is first capitalized, and then the word world
is removed. The output will be:
Вы можете использовать фильтры Liquid для создания большого количества полезных манипуляций с данными. Они подразделяются на 8 типов: