Liquid
Содержание
Про Liquid
Для управление дизайном в InSales используется язык шаблонов Liquid. Это простой в освоении и достаточно мощный язык. Он был разработан компанией jadedPixel в рамках проекта shopify.com и сейчас является open source проектом. Более подробная информация о нем, а так же полная документация на английском языке находится на сайте: http://www.liquidmarkup.org/. Более подробная инструкция http://wiki.github.com/tobi/liquid/liquid-for-designers. Справочник: http://liquid.rubyforge.org/.
Введение
В языке Liquid есть два основных вида конструкций: Вывод данных (Output) и Теги (Tag).
- Вывод данных заключается в {{ двойные фигурные скобки }}
- Теги заключаются в {% фигурные скобки с процентом %}
Блики вывода данных всегда заменяются на то на что они ссылаются. Если ваш в ваш шаблон передается информация о товаре через переменную product, то конструкция {{ product.title }} выведет его имя.
Теги управляют логикой шаблонов. При их помощи вы можете организовывать циклы и логику ветвления.
Вывод данных
Пример вывода данных:
Привет, {{ name }}!
Привет, {{ user.name }}!
Привет, {{ 'Имярек' }}!
Фильтры
Для преобразования выходных данных можно использовать фильтры. Фильтры это обычные функции. Первый аргумент пишется слева от имени фильтра.
Привет, {{ name | upcase }}!
В слове 'магазин' {{ 'магазин' | length }} букв
{{ product.sale_price | money }}
Результат выполнения фильтра может быть первым аргументом для следующего фильтра, находящегося справа от него, если таковой имеется.
{{ array | sort | last }}
Если у фильтра больше одного аргумента то остальные аргументы перечисляются справа от имени фильтра после ':' через запятую:
{{ 'Яндекс' | link_to: 'http://yandex.ru' }} => <a href="http://yandex.ru" title="">Яндекс</a>
{{ 'Яндекс' | link_to: 'http://yandex.ru', 'ссылка на яндекс' }} => <a href="http://yandex.ru" title="ссылка на яндекс">Яндекс</a>
Список стандартных фильтров
- capitalize – сделать первую букву строки заглавной
- date – преобразовать дату в нужный формат
- downcase – привести строку к нижнему регистру
- first – вернуть первый элемент массива
- join – соединить элементы массива в строку
- last – вернуть последний элемент массива
- size – вернуть размер массива или строки
- sort – отсортировать массив
- strip_html – вырезать html-теги
- truncate – обрезать строку до x символов
- truncatewords - обрезить строку до x слов
- upcase – привести строку к верхнему регистру
Выражения сравнения
При сравнении доступны следующие операторы:
| == | равенство |
| != | неравенство |
| <> | неравенство |
| < | меньше |
| > | больше |
| >= | больше либо равно |
| <= | меньше либо равно |
| contains | строка слева содержит строку справа |
| and | логическое и |
| or | логическое и |
Для вызова фильтров при сравнении надо использовать '.', а на '|'. Таким образом можно использовать только фильтры с одним аргументом.
{% if array.size > 10 %} - правильно
{% if array | size > 10 %} - не правильно
Обратите внимание, что нет оператора отрицания, если вам нужно отрицание, надо либо преобразовать условие, либо использовать else, а основную ветку оставить пустой.
{% if product.title contains 'asus' %}
{% else %}
...
{% end %}
При сравнении объектов разного типа, например, чисел со строками, всегда возвращается false.
{% if products.size == 0 %} - правильно
{% if products.size == '0' %} - неправильно
При обращении к несуществующим методам тоже возвращается false.
{% if products.size == 0 %} - правильно
{% if products.empty %} - не вернет ошибку, но будет всегда возвращать false
Список значений, которые при приведении к Boolean становятся false в языке Liquid совпадает с языком ruby, который сильно отличается от, аналогичного списка в PHP.
False
- false
- nil
True - все остальное
- “”
- 0
- “0”
- “false”
Теги
Теги используются для добавления логики в шаблон.
Комментарии
Комментарий должен начинаться с "{% comment %}" и заканчиваться "{% endcomment %}". Все что заключено между этими тегами будет игнорироваться и не попадет на конечную страницу. Комментарии могут быть как однострочными так и многострочными.
{% comment %} закомментированный текст {% endcomment %}
Условия If / Else / Unless
Оператор позволяет [проверить условие|#Выражения сравнения] и в зависимости от результата выполнить ту или иную ветку. Оператор Unless в отличии от оператора If удобен, если надо проверить отрицание условия, так как в Liquid нет оператора отрицания.
{% if user %}
Привет, {{ user.name }}
{% endif %}
{% if user.name == 'Вася' %}
Привет, Вася!
{% endif %}
{% if product.title contains 'колбаса' %}
Это колбаса
{% endif %}
{% unless product.title contains 'колбаса' %}
Это не колбаса
{% endunless %}
{% if product.description == null %}
В разработке
{% endif %}
Конструкция Case
Если у вас несколько проверок на равенство, то удобно использовать Case.
{% case condition %}
{% when 1 %}
hit 1
{% when 2 %}
hit 2
{% else %}
elseblock
{% endcase %}
{% case template %}
{% when 'index' %}
// {{ page.title }}
{% when 'product' %}
// {{ product.title }}
{% else %}
// {{ title }}
{% endcase %}
Чередование Cycle
Часто есть необходимость чередовать цвета, для таких задач в Liquid есть тег cycle.
{% cycle 'odd', 'even' %}<br />
{% cycle 'odd', 'even' %}<br />
{% cycle 'odd', 'even' %}<br />
{% cycle 'odd', 'even' %}
вернет
odd
even
odd
even
Если не указано имя группы, то предполагается, что все вызовы относятся к одной и той же группе.
Если вы хотите указывать к какой из групп относится вызов, то вы можете его задать имя группы.
{% cycle 'group 1': 'odd', 'even' %}<br />
{% cycle 'group 1': 'odd', 'even' %}<br />
{% cycle 'group 2': 'one', 'two', 'three' %}<br />
{% cycle 'group 2': 'one', 'two', 'three' %}
вернет
odd
even
one
two
Цикл For
Цикл для обхода массивов
{% for item in array %}
{{ item }}
{% endfor %}
При обходе массива доступны дополнительные переменные:
forloop.length # => количество элементов в массиве forloop.index # => номер текущей итерации forloop.index0 # => номер текущей итерации (считая от нуля) forloop.rindex # => сколько элементов осталось forloop.rindex0 # => сколько элементов осталось (считая от нуля) forloop.first # => первая итерация? forloop.last # => последняя итерация?
Можно задавать сдвиг и максимальное число элементов для обхода:
limit позволяет ограничить число обходимых элементов. offset позволяет начать обход с n-ого элемента.
# Если array = [1,2,3,4,5,6] ...
{% for item in array limit:2 offset:1 %}
{{ item }}
{% endfor %}
# вернёт 2,3
Вместо обхода значений существующего массива, можно задать диапазон чисел, которые надо обойти. Диапазон можно прописать в коде или задать переменной:
# Если item.quantity = 4 ...
{% for i in (1..item.quantity) %}
{{ i }}
{% endfor %}
# вернёт 1,2,3,4
Таблицы
По аналогии с циклом for можно создавать таблицы:
{% tablerow item in items cols: 2 limit: 6 %}
{{ item }}
{% endtablerow %}
Дополнительные переменные, доступные при обходе массива:
tablerowloop.length # => количество элементов в массиве tablerowloop.index # => номер текущей итерации tablerowloop.index0 # => номер текущей итерации (считая с нуля) tablerowloop.rindex # => сколько элементов осталось tablerowloop.rindex0 # => сколько элементов осталось (считая с нуля) tablerowloop.first # => первый элемент? tablerowloop.last # => последний элемент? tablerowloop.col # => номер колонки в текущей строчке tablerowloop.col0 # => номер колонки в текущей строчке (считая с нуля) tablerowloop.col_first # => первая колонка? tablerowloop.col_last # => последняя колонка?
Определение переменных
При помощи тега assign вы можете определять и менять значения своих переменныx, которые потом будут использованы на ровне с имеющимися.
{% assign name = 'свежая' %}
{% for product in collection.products %}{% if product.description contains name %}
<p>Свежая!</p>
{% endif %}{% endfor %}
Для объединения нескольких переменных в одну строку удобно использовать тег capture. Хотя он выглядит как блок, его содержимое попадает в переменную, а не на экран.
{% capture select_id %}option-{{ option.id }}{% endcapture %}
<label for="{{ select_id }}">Цвет:</label>
<select name="options[{{ option.id }}][]]" id="{{ select_id }}">
<option value="black">Черный</option>
<option value="yellow">Жёлтый</option>
<option value="white">Белый</option>
</select>
