Liquid — различия между версиями

Материал из Insales Wiki
Перейти к: навигация, поиск
(Определение переменных)
Строка 292: Строка 292:
 
=== Определение переменных ===
 
=== Определение переменных ===
  
При помощи тега '''assign''' вы можете определять и менять значения своих переменныx, которые потом будут использованы на ровне с имеющимися.  
+
При помощи тега '''assign''' вы можете определять и менять значения своих переменныx, которые потом будут использованы наравне с имеющимися.  
  
 
<pre>
 
<pre>

Версия 11:56, 6 января 2010

Про 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>