EugeneMir.com
Блог программиста про IT и создании сайтов
Краткое руководство по Liquid для Shopify
32Прочее

Liquid - это шаблонизатор который является основой тем Shopify и используется для загрузки динамического контента на витринах магазинов. Liquid используется в Shopify с 2006 года и в настоящее время используется многими другими web-приложениями.


Введение

Важно! Любому разработчику важно понимать, что есть Liquid который используется в Shopify и его функционал отличается от публичного шаблонизатора Liquid. Самая актуальная документация по Liquid для Shopify тут: Liquid шаблонизатор - shopify.com.

Основы шаблонизатора Liquid

Код шаблонизатора можно разделить на:

  1. Объекты - Выходная разметка (которая может преобразовываться в текст)
  2. Теги - Разметка тега (которая не может быть преобразована в текст)
  3. Фильтры - Фильтры изменяют выход объектов. Они используются в выводе и разделены символом | .

Основные операторы

== равняется

!= не равно

> больше чем

< меньше, чем

>= больше или равно

<= меньше или равно

or логично или

and логично и

contains - contains проверяет наличие "подстроки" внутри строки.

contains можно только искать строки. Вы не можете использовать его для проверки объекта в массиве объектов

{% if product.tags contains "Hello" %}
  This product has been tagged with "Hello".
{% endif %}

Объекты

Объекты и имена переменных обозначаются двойными фигурными скобками: {{ и }}.

{{ page.title }}
========================================================================
Выведет:
Some title

Теги

Теги создают логику и поток управления для шаблонов. Они обозначены фигурными скобками и знаками процента: {% а %}.

Разметка, используемая в тегах, не создает видимого текста. Это означает, что вы можете назначать переменные и создавать условия и циклы, не показывая никакой логики Liquid на странице.

{% if user %}
  Hello {{ user.name }}!
{% endif %}
========================================================================
Выведет:
Hello Adam!

Вот список поддерживаемых в настоящее время тегов:

  • assign - создает новую именованную переменную;
  • capture - заблокировать тег, который захватывает текст в переменную;
  • increment - создает новую числовую переменную и увеличивает ее значение на единицу каждый раз, когда она вызывается. Начальное значение 0;
  • decrement - создает новую числовую переменную и уменьшает ее значение на 1 каждый раз, когда decrementвызывается переменная. Начальное значение счетчика -1;
  • case - блочный тег, это стандартный случай ... когда блок;
  • comment - блокирует тег, комментирует текст в блоке;
  • cycle - цикл обычно используется в цикле для чередования значений, таких как цвета или классы DOM;
  • for - для цикла;
  • break - выход из цикла;
  • continue - пропускает оставшийся код в текущем цикле for и продолжает следующий цикл;
  • if - стандартный блок if / else;
  • include - включает другой шаблон; полезно для кусков кода которые повторяются;
  • raw - временно отключить обработку тегов, чтобы избежать синтаксических конфликтов;
  • unless - зеркало оператора if (разве что).

Ссылки по теме:

Liquid документация - shopify.com

Документация liquid

Liquid - github.com

Liquid for Designers