Введення в Ліквід

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 для розробників.