Перейти к содержанию

Шаблонизатор Twig⚓︎

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

Лёгкий синтаксис и простые процессы делают его естественным для всех, кто знаком с Smarty, Django, Jinja, Liquid или Stencil.

Мы используем его для наших шаблонов Grav отчасти из-за его гибкости и присущей ему безопасности. Тот факт, что это один из самых быстрых шаблонизаторов для PHP, сделал его выбор для использования в Grav несомненным.

Twig компилирует шаблоны в простой PHP. Это сокращает количество накладных расходов на PHP до минимума, что приводит к более быстрой и оптимизированной работе разработчиков.

Кроме того, это очень гибкий движок благодаря лексеру и парсеру. Это позволяет разработчику создавать свои собственные теги и фильтры. Лексер и синтаксический анализатор Twig также позволяет создавать собственный предметно-ориентированный язык (DSL).

Когда речь заходит о безопасности, Twig не срезает углы. Он предоставляет разработчику режим «песочницы», в котором он может изучить любой недоверенный код. Это дает возможность использовать Twig в качестве языка шаблонов для приложений, предоставляя пользователям возможность изменять дизайн шаблона.

По сути, это мощный движок, который дает вам контроль над пользовательским интерфейсом. В сочетании с YAML для конфигурирования, это делает мощную и простую систему для работы с любым разработчиком или менеджером сайтов.

Как работает Twig?⚓︎

Twig работает, убирая все «фокусы» из дизайна шаблонов. Шаблоны - это, по сути, просто текстовые файлы, содержащие переменные или выражения, которые заменяются значениями по мере анализа шаблона.

Теги также являются важной частью файла шаблона, так как они контролируют логику самого шаблона.

В Twig есть два основных языковых ограничения.

  • {{ }} выводит результат вычисления выражения;
  • {% %} выполняет инструкции.

Вот базовый шаблон, созданный с помощью Twig:

<!DOCTYPE html>
<html>
    <head>
        <title>Всё о печенюшках</title>
    </head>
    <body>
        Меня зовут {{ name }} и я обожаю печенье.
        Мои самые любимые виды печенья:
        <ul>
        {% for cookie in cookies %}
            <li>{{ cookie.flavor }}</li>
        {% endfor %}
        </ul>
        <h1>Печенье — лучшее, что придумано человеком!</h1>
    </body>
</html>

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

Шаблон сначала загружается, а затем передается через lexer, где его исходный код маркируется и разбивается на мелкие кусочки. В этот момент синтаксический анализатор принимает токены и превращает их в абстрактное синтаксическое дерево.

Как только это делается, компилятор превращает это в PHP-код, который затем может быть проанализирован и отображён пользователю.

Twig также может быть расширен для добавления дополнительных тегов, фильтров, тестов, операторов, глобальных переменных и функций. Более подробную информацию о расширении Twig можно найти в его официальной документации.

Синтаксис Twig⚓︎

Шаблон Twig имеет несколько ключевых компонентов, которые помогают ему понять, что именно вы хотели бы сделать. К ним относятся теги, фильтры, функции и переменные.

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

Теги⚓︎

Теги говорят Twig, что ему нужно делать. Он позволяет вам установить, какой код Twig должен обрабатывать, а какой — игнорировать во время анализа.

Существует несколько различных типов тегов, и каждый из них имеет свой собственный специфический синтаксис, который отличает их друг от друга.

Комментарии⚓︎

Теги комментариев (`{#Insert Comment Here#}') используются для установки комментариев, которые существуют в файле шаблона Twig, но фактически не видны конечному пользователю. Они удаляются во время парсинга, не анализируются и не выводятся.

Хорошо использовать эти теги для объяснения того, что делает конкретная строка кода или команда, чтобы другой разработчик или дизайнер в вашей команде мог быстро прочитать и понять.

Вот пример тега комментария, который вы найдете в файле шаблона Twig:

{# Шоколадное печенье — это здорово! Никому не рассказывай! #}

Выходные теги⚓︎

Теги вывода ({{ Insert Output Here }}) будут проанализированы и добавлены в сгенерированный вывод. Здесь вы поместите всё, что хотите отобразить на главной странице или в другом генерируемом контенте.

Вот пример выходных тегов, используемых в шаблоне Twig:

Меня зовут {{ name }} и я обожаю печенье.

Переменная name была вставлена в эту строку и будет показана конечному пользователю как Меня зовут Джейк и я обожаю печенье., так как Джейк было значение переменной имени.

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

Теги действий⚓︎

Теги действий — это путеводители в мире Twig. Эти теги на самом деле что-то делают, в отличие от других, которые либо передают что-то, либо сидят сложа руки в исходном коде, ожидая, пока дизайнер прочитает его.

Теги действий задают переменные, цикл через массивы и условия тестирования. Ваши for и if заявления сделаны с использованием этих меток.

Вот как может выглядеть тег действия в шаблоне Twig:

{% set hour = now | date("G") %}
{% if hour >= 9 and hour < 17 %}
    <p>Время печенья!</p>
{% else %}
    <p>Пора испечь ещё печенюшек!</p>
{% endif %}

Первоначальный тег действия устанавливает час как текущий час в 24-часовом формате. Это значение затем используется для определения, находится ли оно между 9 утра и 5 вечера. Если это так, то отображается Время для печенюшек!. Если это не так, то вместо этого отображается Пришло время испечь ещё печенья!.

Очень важно, чтобы метки не перекрывали друг друга. Вы не можете поместить выходной тег внутри тега действия или наоборот.

Фильтры⚓︎

Фильтры полезны, особенно когда вы используете выходные теги для отображения данных, которые могут быть отформатированы не так, как вы хотите.

Допустим, значение переменной name может включать нежелательные SGML/XML тэги. Вы можете отфильтровать их, используя код, приведенный ниже:

{{ name|striptags }}

Функции⚓︎

Функции могут генерировать контент. За ними, как правило, следуют аргументы, которые появляются в скобках, помещаемых непосредственно после вызова функции. Даже если аргумент отсутствует, функция все равно будет иметь скобки (), расположенные непосредственно после нее.

{% if date(cookie.created_at) < date('-2days') %}
    {# Съешь это! #}
{% endif %}

Ресурсы⚓︎