Синтаксис TWIG

Главные Аддоны Виджет Строитель визуализирует HTML, CSS и JavaScript вашего виджета через a Механизм шаблонов Twig-синтаксиса. Если вы коснулись Twig в Timber или Craft CMS, синтаксис будет казаться знакомым: {{ tokens }} значения полей печати, {% if %} блоки показывают или скрывают разметку, и {% for %} петли проходят через ряды ретрансляторов.

Это безопасное подмножество, встроенное в плагин, а не полная библиотека Twig. за ним нет eval и скомпилированного PHP, и каждое напечатанное значение экранируется на основе его типа поля. вы получаете части Twig, которые имеют значение для шаблонов виджетов, без частей, которые могли бы превратить конструктор страниц в проблему безопасности.

Где вы пишете код шаблона #

Редактор Widget Builder имеет три кодовые вкладки, и движок работает на всех из них:

• HTML: наценка вашего виджета Здесь живут жетоны, условия, петли.
• CSS: стили вашего виджета Токены работают внутри значений свойств, поэтому поле Цвет может питаться background: непосредственно.
• ДШ: необязательный JavaScript. Токены работают и здесь, что удобно для передачи значений полей в скрипт.

Каждый элемент управления, добавляемый на панель параметров виджета, становится переменной шаблона, названной в честь поля Имя настройка. Добавить а Текстовое поле названный title и {{ title }} печатает все, что пользователь напечатал. на боковой панели Документация рядом с редактором кода перечисляет токен для каждого поля при его добавлении, поэтому вам никогда не придется угадывать написание.

Примечание. Шаблон HTML отображается в каждой сборке, но вывод CSS и JS поставляется с Мастер Аддоны Про, так же, как и сам Widget Builder в полном составе.

Печать значений с помощью токенов #

Самый простой шаблон - разметка плюс токены:

<div class="hero">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <a href="{{ button_link }}">{{ button_text }}</a>
</div>

Несколько правил, которые стоит знать:

• Пунктирные дорожки охватить структурированные ценности: {{ item.name }} внутри петли, или {{ tabs.tab_1.person }} для управления вкладками.
• Медиа поля печатают свой URL. Когда токен содержит изображение или видеомассив, механизм выводит его url часть автоматически, так что <img src="{{ photo }}"> просто работает.
• Побег следует типу поля. Поля URL проходят через URL-адрес, поля WYSIWYG и Code позволяют безопасный HTML, а все остальное - HTML-эскейп Вам не нужно ничего очищать самостоятельно.

Фильтры #

Добавить фильтр к токену с символом трубы Двигатель поддерживает пять:

• {{ title|upper }} печатает значение в UPPERCASE.
• {{ title|lower }} печатает строчными буквами.
• {{ title|trim }} полосы пробелы с обоих концов.
• {{ content|raw }} пропускает побег и печатает значение как есть.
• {{ content|e }} (или |escape) силы, уходящие обратно после a raw.

Лечить |raw как острый инструмент. существует для случаев, когда поле намеренно удерживает разметку, и использование его в простом текстовом поле означает, что все, что вводит редактор страниц, попадает на вашу страницу без экранирования. Если поле представляет собой тип WYSIWYG или кода, вам редко нужно raw в любом случае, поскольку эти типы уже позволяют безопасным HTML-тегам проходить.

Условная наценка с блокировкой if #

Ан {% if %} блок отображает свое содержимое только тогда, когда условие проходит Это внешний партнер опции "Условия" на стороне панели: Условия скрывают управление на панели Elementor, и if блок удаляет соответствующую разметку со страницы.

{% if show_badge %}
  <span class="badge">{{ badge_text }}</span>
{% endif %}

Голая переменная проверяется на истинность, стиль Twig: пустые струны, 0пустые списки и неустановленные значения считаются ложными. Поскольку а Поле коммутатора магазины yes когда включено и пустое значение когда выключено, {% if show_badge %} это все, что вам нужно для переключателя.

Полное ветвление тоже работает:

{% if layout == "card" %}
  <div class="item item--card">...</div>
{% elseif layout == "list" %}
  <div class="item item--list">...</div>
{% else %}
  <div class="item">...</div>
{% endif %}

Операторы, которых можно использовать в условиях #

• Сравнения: ==, !=, >, <, >=, <=. Значения сравниваются как числа, когда обе стороны имеют числовое значение, а в противном случае - текст.
• Логика: and, or, not, написанный строчными словами.
• Литералы: цитируемые строки ("card" или 'card'), цифры, true, falseи null.

Объедините их свободно: {% if show_price and price > 0 %}или {% if not hide_footer %}или {% if plan == "pro" or plan == "agency" %}.

Петля через ряды ретрансляторов #

The Поле ретранслятора где {% for %} зарабатывает себе на жизнь. Назван ретранслятор menu_items с подобластями dish, priceи photo визуализирует так:

<ul class="menu">
{% for item in menu_items %}
  <li class="menu__row">
    <img src="{{ item.photo }}" alt="{{ item.dish }}">
    <span class="menu__dish">{{ item.dish }}</span>
    <span class="menu__price">{{ item.price }}</span>
  </li>
{% endfor %}
</ul>

Переменная цикла (здесь item, но любое слово работает) держит по одной строке за раз, и каждое подполе доступно через пунктирный путь под именем, которое вы ему дали Условия работают внутри циклов, поэтому для каждого ряда переключатели находятся на расстоянии одного вложенного блока:

{% for member in team %}
  <div class="member">
    <h3>{{ member.name }}</h3>
    {% if member.role %}<p class="role">{{ member.role }}</p>{% endif %}
  </div>
{% endfor %}

Чтение вкладок и полей Popover #

Два структурных элемента управления раскрывают их дочерние ценности через специальные формы токенов:

• Вкладки: детей читают по трехчастному пути: {{ tabs_name.tab_name.field_name }}. Имя элемента управления вкладками tabs с а tab_1 вкладка, содержащая person полевые отпечатки как {{ tabs.tab_1.person }}. Петля не требуется.
• Поповер Переключить: каждое поле внутри поповера получает комбинированный токен: имя переключателя, подчеркивание, затем имя поля. названный поповер overlay с ан opacity поле внутри отпечатков как {{ overlay_opacity }}.

Токены в CSS #

Вкладка CSS работает через один и тот же механизм, поэтому поля стиля подключаются прямо к значениям свойств:

.hero {
  background: {{ bg_color }};
  color: {{ text_color }};
}

{% if enable_shadow %}
.hero {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
{% endif %}

Ан if блокировка вокруг целого правила - это чистый способ отправки необязательного стиля: правило существует только в выводе, когда переключатель включен. Медиа-поле работает и здесь, например background-image: url("{{ hero_image }}");, поскольку токен переходит к URL-адресу файла.

Токены в JavaScript #

Вкладка JS позволяет передавать значения панели в скрипт. Цитировать значения строк и полагаться на правдивость для переключений:

var speed = {{ slide_speed }};
var autoplay = "{{ autoplay }}" === "yes";

if (autoplay) {
  startSlider(speed);
}

Значения, напечатанные в JS, экранируются, как и любой другой токен, поэтому пользователь не может вырваться из вашего сценария, введя кавычки в текстовое поле.

Практичные рецепты #

Несколько шаблонов, которые появляются почти в каждом виджете:

• Дополнительная вторая кнопка: заверните весь якорь {% if second_button_text %} так что кнопка исчезает, когда текстовое поле пустое. переключатель не требуется.
• Класс макета из избранного: распечатайте поле прямо в атрибуте класса: <div class="pricing pricing--{{ layout }}">, затем стиль каждого варианта в CSS.
• Резервное содержание: {% if caption %}{{ caption }}{% else %}Untitled{% endif %} удерживает разметку от рендеринга пустых элементов.
• Пронумерованные ценовые уровни: {% if price >= 100 %}<span class="premium-tag">Premium</span>{% endif %} реагирует на значение поля Число.
• Надкорпусные этикетки: {{ eyebrow|upper }} позволяет CSS оставаться свободным от text-transform когда дизайн требует кепок только в одном месте.
• Галереи, меню, временные рамки и отзывы с ретранслятором: один {% for %} цикл плюс ретранслятор заменяет фиксированное количество блоков копирования.

Что двигатель не поддерживает #

Знание ребер экономит время отладки Это преднамеренное подмножество, поэтому несколько функций полного Twig отсутствуют:

• Нет {% set %}, макросы, включает или наследование шаблонов.
• Никаких математических вычислений внутри выражений: сравнивайте значения, но вычисляйте в CSS calc() или во вкладке JS.
• Никаких фильтров дальше raw, escape/e, upper, lowerи trim.
• Нет loop.index или другие метаданные цикла внутри {% for %}.
• Никаких круглых скобок для логики группировки. упорядочить свой and/or цепочки, чтобы они читали правильно, или разбились на вложенные if блоки.

Если шаблону нужна более тяжелая логика, чем эта, это обычно знак для перемещения решения в панель, например поле "Выбрать", параметры которого несут значения, которые вы пытались вычислить.

Часто задаваемые вопросы #

Завершая #

Синтаксический движок Twig - это то, что соединяет поля Widget Builder с вашей разметкой: {{ tokens }} значения печатной панели, {% if %} удаляет дополнительную разметку при ее выключении, и {% for %} позволяет одному блоку HTML обслуживать неограниченное количество ретрансляторов. начните с простых токенов, добавьте блок if для вашего первого переключения, затем перейдите к циклам, когда дизайн повторяется. Оттуда Ретранслятор, Выбратьи Коммутатор поля охватывают большинство динамических виджетов, которые вам когда-либо нужно будет построить. Новое для самого строителя? Обзор виджета-строителя проходит через редактор, и страница ценообразования показывает, что включает в себя каждый план.