Введение в Ликвид

Liquid - это язык шаблонов, созданный Shopify и написанный на Ruby. Сейчас он доступен как проект с открытым исходным кодом на GitHub, который используется в различных разработках многими компаниями - производителями программного обеспечения. Liquid является основой всех тем Shopify и используется для загрузки динамического контента на страницы интернет-магазинов.

В этой статье

• Что такое язык шаблонов?
• Синтаксис Liquid
• Шаблоны тем
• Дополнительные ресурсы

Что такое язык шаблонов?

Дизайнеры и разработчики сайтов могут использовать язык шаблонов для создания веб-страниц, объединяющих статический контент являющийся единым для нескольких страниц, и динамический контент изменяющийся при переходе с одной страницы на другую. Язык шаблонов позволяет повторно использовать статические элементы, определяющие макет веб-страницы, пока страница динамически заполняется данными из магазина Shopify. Статические элементы пишутся на HTML, а динамические элементы на Liquid. Элементы Liquid в файле действуют как заполнители: когда код в файле компилируется и отправляется в браузер, Liquid заменяет их данными из магазина Shopify.

Синтаксис Liquid

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

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

• Объекты
• Теги
• Фильтры

Объекты

Liquid объекты получают данные с сервера Shopify. В шаблоне темы объекты помещены в двойные фигурные скобки {{ }} и выглядят так:

{{product.title}}

В приведенном выше примере product является объектом, а title является свойством этого объекта. Каждый объект имеет список связанных с ним свойств. Чтобы узнать больше о свойствах объекта продукта, перейдите по ссылке Объект product.

Liquid объект {{product.title}} можно найти в шаблоне «Товар» темы Shopify. Когда код файла компилируется и отображается на странице товара магазина Shopify, объект Liquid будет отображен в заголовке страницы. Например, в магазине одежды результатом может быть:

Великолепная футболка

Несмотря на то, что для каждого продукта в магазине Shopify используется один и тот же шаблон, объекты Liquid в шаблоне будут выводить разные данные в зависимости от просматриваемой страницы продукта.

Чтобы узнать больше о различных объектах Liquid, которые можно использовать в шаблонах тем, перейдите по ссылке Объекты Liquid.

Теги Liquid

Liquid теги используются для создания логических связей и потока управления в шаблонах. Процентные фигурные скобки {% %}, и текст, который они окружают, не дают видимых результатов при отображении веб-страницы, но позволяют назначать переменные и создавать условия или циклы.

Например, вы можете использовать теги Liquid для отображения различного контента на странице товара в зависимости от того, доступен ли товар или нет:

{% if product.available %}
  Цена: 99,99 $
{% else %}
  Извините, этот продукт продан.
{% endif %}

Если продукт доступен, то будет выведено следующее:

Цена: 99,99 $

Если продукт недоступен, то будет отображено:

Извините, этот продукт продан.

В приведенном выше примере используются if и else теги Liquid, которые являются тегами потока управления.

Liquid теги подразделяются на четыре типа:

• Теги контроля потока
• Теги циклов
• Теги темы
• Теги переменных

Фильтры

Liquid фильтры используются для изменения вывода чисел, строк, объектов и переменных. Они помещаются в тег {{ }} или {% %} и обозначаются символом «|».

Простым примером является фильтр capitalize:

{{ 'привет мир!' | capitalize }}

Фильтр изменяет строку путем ее капитализации. Будет выведено:

Привет мир!

В одном теге могут использоваться несколько фильтров, и они применяются слева направо:

{{ 'Привет мир!' | capitalize | remove: "мир" }}

Строка сначала выводится как заглавная, а затем слово мир удаляется. Отобразится следующее:

Привет !

Вы можете использовать фильтры Liquid для широкого спектра операций с данными. Фильтры подразделяются на 8 типов:

• Фильтры массивов
• Фильтры цвета
• Фильтры HTML
• Математические фильтры
• Денежные фильтры
• Фильтры строки
• Фильтры URL
• Дополнительные фильтры

Шаблоны тем

Вы можете получить доступ к файлам вашей темы из раздела «Темы» вашего кабинета в Shopify:

Дополнительные ресурсы

В дополнение к исчерпывающей справочной информации о Liquid, доступной в Справочном центре, вы можете использовать Shopify Cheat Sheet в качестве быстрого руководства по Liquid для вашего проекта.

Чтобы посмотреть видео-ролики на эту и другие темы, посетите Youtube-канал Shopify для разработчиков.