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

Материал из Insales Wiki
Перейти к: навигация, поиск
(→‎Выражения сравнения)
Строка 123: Строка 123:
 
== Теги ==
 
== Теги ==
  
−
Теги используются для управления выводом в шаблоне.
+
Теги используются для добавления логики в шаблон.
  
 
=== Комментарии ===
 
=== Комментарии ===
 +
 +
Комментарий должен начинаться с "{% comment %}" и заканчиваться "{% endcomment %}". Все что заключено между этими тегами будет игнорироваться и не попадет на конечную страницу. Комментарии могут быть как однострочными так и многострочными.
  
 
<pre>{% comment %} закомментированный текст {% endcomment %}</pre>
 
<pre>{% comment %} закомментированный текст {% endcomment %}</pre>
  
−
=== Условия if / else ===
+
=== Условия If / Else / Unless ===
  
 +
Оператор позволяет [проверить условие|#Выражения сравнения] и в зависимости от результата выполнить ту или иную ветку. Оператор Unless в отличии от оператора If удобен, если надо проверить отрицание условия, так как в Liquid нет оператора отрицания.
  
 
<pre>
 
<pre>
 
{% if user %}
 
{% if user %}
−
   Привет {{ user.name }}
+
   Привет, {{ user.name }}
 +
{% endif %}
 +
 
 +
{% if user.name == 'Вася' %}
 +
  Привет, Вася!
 +
{% endif %}
 +
 
 +
{% if product.title contains 'колбаса' %}
 +
  Это колбаса
 +
{% endif %}
 +
 
 +
{% unless product.title contains 'колбаса' %}
 +
  Это не колбаса
 +
{% endunless %}
 +
 
 +
{% if product.description == null %}
 +
  В разработке
 
{% endif %}
 
{% endif %}
 
</pre>
 
</pre>
  
 +
=== Конструкция Case ===
 +
 +
Если у вас несколько проверок на равенство, то удобно использовать Case.
 +
 +
<pre>
 +
{% case condition %}
 +
{% when 1 %}
 +
hit 1
 +
{% when 2 %}
 +
 +
hit 2
 +
{% else %}
 +
elseblock
 +
{% endcase %}
 +
</pre>
 +
 +
 +
<pre>
 +
{% case template %}
 +
 +
{% when 'index' %}
 +
    // {{ page.title }}
 +
{% when 'product' %}
 +
    // {{ product.title }}
 +
{% else %}
 +
    // {{ title }}
 +
{% endcase %}
 +
</pre>
 +
 +
=== Чередование Cycle ===
 +
 +
Часто есть необходимость чередовать цвета, для таких задач в Liquid есть тег cycle.
 +
 +
<pre>
 +
{% cycle 'odd', 'even' %}<br />
 +
{% cycle 'odd', 'even' %}<br />
 +
{% cycle 'odd', 'even' %}<br />
 +
{% cycle 'odd', 'even' %}
 +
 +
вернет
 +
 +
odd
 +
even
 +
odd
 +
even
 +
 +
</pre>
 +
 +
Если не указано имя группы, то предполагается, что все вызовы относятся к одной и той же группе.
 +
 +
Если вы хотите указывать к какой из групп относится вызов, то вы можете его задать имя группы.
  
 +
<pre>
 +
{% 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
 +
</pre>
  
 
=== Цикл For ===
 
=== Цикл For ===
 +
 
Цикл для обхода массивов
 
Цикл для обхода массивов
  
Строка 161: Строка 243:
 
   forloop.last        # => последняя итерация?
 
   forloop.last        # => последняя итерация?
  
−
Можно задавать сдвиг и максимальное числое элементов для обхода:
+
Можно задавать сдвиг и максимальное число элементов для обхода:
 +
 
 +
'''limit'''  позволяет ограничить число обходимых элементов.
 +
'''offset''' позволяет начать обход с n-ого элемента.
 +
 
 +
<pre>
 +
  # Если array = [1,2,3,4,5,6] ...
 +
  {% for item in array limit:2 offset:1 %}
 +
    {{ item }}
 +
  {% endfor %}
 +
  # вернёт 2,3
 +
</pre>
 +
 
 +
Вместо обхода значений существующего массива, можно задать диапазон чисел, которые надо обойти. Диапазон можно прописать в коде или задать переменной:
  
 
<pre>
 
<pre>
−
# array = [1,2,3,4,5,6]
+
  # Если item.quantity = 4 ...
−
{% for item in array limit:2 offset:1 %}  
+
  {% for i in (1..item.quantity) %}
−
  {{ item }}
+
    {{ i }}
−
{% endfor %}
+
  {% endfor %}
−
# 2,3
+
  # вернёт 1,2,3,4
 
</pre>
 
</pre>
  
Строка 194: Строка 289:
 
   tablerowloop.col_first    # => первая колонка?
 
   tablerowloop.col_first    # => первая колонка?
 
   tablerowloop.col_last    # => последняя колонка?
 
   tablerowloop.col_last    # => последняя колонка?
 +
 +
=== Определение переменных ===
 +
 +
При помощи тега '''assign''' вы можете определять и менять значения своих переменныx, которые потом будут использованы на ровне с имеющимися.
 +
 +
<pre>
 +
  {% assign name = 'свежая' %}
 +
  {% for product in collection.products %}{% if product.description contains name %}
 +
    <p>Свежая!</p>
 +
  {% endif %}{% endfor %}
 +
</pre>
 +
 +
Для объединения нескольких переменных в одну строку удобно использовать тег '''capture'''. Хотя он выглядит как блок, его содержимое попадает в переменную, а не на экран.
 +
 +
<pre>
 +
  {% 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>
 +
</pre>

Версия 20:28, 4 января 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>
Источник — «https://wiki.insales.ru/index.php?title=Liquid&oldid=3147»