→ → Обработчик шаблонов Twig. Быстрый старт. PHP шаблонизатор Twig. Введение Синтаксис twig

Обработчик шаблонов Twig. Быстрый старт. PHP шаблонизатор Twig. Введение Синтаксис twig

- "компилирующий обработчик шаблонов с открытым исходным кодом, написанный на языке программирования PHP. Armin Ronacher написал Twig в 2008 году для платформы блогов Chyrp. Он больше не возвращался к разработке и в большей степени занимался разработкой на Python. Синтаксис языка шаблонов Twig берёт начало от движков шаблонов Jinja и Django, первый из которых также создан Ронакером. Идею данного шаблонизатора развивает и поддерживает Fabien Potencier, ведущий разработчик и идеолог фреймворка Symfony, в котором Twig используется по умолчанию." (https://ru.wikipedia.org/wiki/Twig).

Все Twig шаблоны в Drupal 8 компилируются в php файлы и хранятся в каталоге sites/default/files/php/twig/. Файлы шаблонов при этом кешируются для повторного использования и хранятся в файловой системе для улучшения производительности, перекомпилируются только при очистке Twig кеша.

Все шаблоны в модулях и темах должны находиться в каталоге /templates .

Почему Twig? Во-первых, он более безопасный. В шаблонах Drupal 7 часто выводились неочищенные данные и это в принципе понятно, так как верстальщик не должен следить за работой программиста, который банально мог забыть пропустить данные из форм через check_plain(). В шаблонах же Drupal 8 переменные будут по-умолчанию экранироваться. Кроме этого многие наверняка в шаблонах наблюдали Sql запросы и прочие изыски логики приложения, но в Twig шаблонах это будет исключено.

Во-вторых, в Twig есть очень интересная особенность - наследование шаблонов. Теперь достаточно создать базовый родительский шаблон и затем при создании дочернего шаблона в теге extends указать родительский шаблон. К примеру чтобы создать дочерний шаблон ноды нужно в нем прописать:


{% extends "node.html.twig" %}

Рассмотрим наследование на примере шаблонов для блока. Базовый родительский шаблон для блока block.html.twig содержит примерно такой код

{{ title_prefix }} {% if label %} {{ label }} {% endif %} {{ title_suffix }} {% block content %} {{ content }} {% endblock %}

При этом содержимое тега block можно в дочернем шаблоне переписать. Рассмотрим код шаблона для блока с формой поиска block--search-form-block.html.twig

{% extends "block.html.twig" %} {% block content %} {{ parent() }} {% endblock %}

Дочерний шаблон будет содержать всю разметку block.html.twig за исключением переписанного содержимого внутри тега block:

{% block content %}{% endblock %}

Рассмотрим основные отличия PHPTemplate и Twig на примерах Именование файлов шаблонов и функций

PHPTemplate файл шаблона: node--article.tpl.php
Twig файл шаблона: node--article.html.twig

Большинство theme_ функций сейчас вынесено в шаблоны (огромный плюс)
PHPTemplate функция: theme_node_links()
Twig файл шаблона: node-links.html.twig

Docblock и комментарии

Docblock в PHPTemplate:

{# /** * @file * File description */ #}

Комментарии вместо стандартных php комментариев теперь выглядят так:

{# Twig комментарий #}

Работа с переменными Вывод переменных:

{{ content }}

Вывод свойств объектов и элементов массивов:

{{ content.body }}

Вывод элементов массива с хешем в имени ключа

{{ item["#item"].alt }}

Запись в переменную:

{% set image = content.field_image %}

Запись в переменную массива:

{% set classes = ["class1", "class2", "class3"] %}

Условия

{% if content.comments %} {% endif %}

{% if content.comments is not empty %} {% endif %}

{% if content.comments is defined %} {% endif %}

{% if count > 0 %} {% endif %}

Циклы

{% for user in users %} {% endfor %}

Управление пробелами

Twig позволяет убирать пробелы из вывода с помощью символа - в начале и/или конце структуры {{ }} для вывода переменных.

И в начале, и в конце:

{{- block.content -}} {# Результат: контент #}

Только в начале:

{{- block.content }} {# Результат: контент #}

Только в конце:

{{ block.content -}} {# Результат: контент #}

Официальная документация по Twig в Drupal 8

Мы разобрались с конфигами и значениями параметров. Сегодня научимся выводить настройки в браузере. А чтобы не было скучно просто писать html, подключим к проекту шаблонизатор Twig. Ему и будет посвящена основная часть статьи.

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

Подключаем Twig и рендерим первый шаблон.

Хотел скачать последнюю версию twig-a 2.x, но обломался. Он ставится через composer, а я в нем не шарю. Подозреваю, что composer мало чем отличается от фронтовых npm или bower, но погружаться сейчас не будем. Кто в теме, сделают composer require "twig/twig:^2.0" и без меня, а я как нормальный php-шник скачиваю версию 1.x через Download zip и не парюсь. Качать отсюда https://github.com/twigphp/Twig/tree/1.x

Ищем твигу местечко в проекте. Создадим папку admin/lib/Twig и закинем туда библиотеку. Идеально, смогли и без composer-a.

Идем дальше. Твигу нужна папка cache, куда он может свободно записывать отрендеренные шаблоны. Дискуссионный вопрос, куда определяют папку кэша нормальные пацаны? Я без фантазии создал прямо в admin - admin/cache. Ну и бог с ней. Главное, убедитесь, что в нее разрешена запись юзеру www-data. Если сидите на винде, то пофиг. А если нет, то смените владельца и дайте права на запись в cache

$ sudo chown -R www-data:www-data ./cache $ sudo chmod -R 755 ./cache/

Последнее, что нужно твигу - знать, где брать шаблоны. Для этого сделаем папку admin/templates и закинем в нее index.html c содержимым Hello, {{name}} . Ага, уже постигаем магию. Значение name будет передаваться в шаблон извне, из php-файла.

Давайте в admin/index.php подключим twig и отрендерим шаблон. Испокон веков автор фигачил разметку в index.php, а сейчас нет. Повзрослел. php-файл займется тем, чем и должен - логикой приложения. Даже звучит приятно, значит, пора реализовывать.

// Подключаем шаблонизатор require_once "./lib/Twig/Autoloader.php"; // Инициализируем Twig Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("./templates"); $twig = new Twig_Environment($loader, array("cache" => "./cache", "debug" => true)); // Рендерим шаблон echo $twig->render("index.html", array("name" => "Twig"));

В первой строке подключаем сам твиг. Дальше инициализация. В документации я прочитал, если возникнет Непредвиденный Случай и почему-то НЕ СРАБОТАЕТ, то напишите Twig_Autoloader::register();
Я человек-удача и тот самый случай поймал. Написал, что велено, и все стало хорошо. Надеюсь, Вам повезет больше и вместо 10 строк уложитесь в 9.

Дальше в $loader и $twig загружаем среду или что-то такое нужное для шаблонизатора. Указываем в параметрах путь к папкам шаблонов и кеша и важный параметр debug=true. На боевом сайте debug убирайте, но пока оставьте. Иначе при изменении шаблона в templates/index.html твигу будет наплевать и он сразу возьмет срендеренный из кэша. И будем удивляться, чо это шаблон правим, а в браузере не меняется.

Итак, обновим страницу и видим текст Hello, Twig . Поздравляю, наш первый шаблон отработал. Но прежде чем наполнять его полезным содержимым, немного изменим index.php. А точнее подключим класс админки и в шаблон отдадим не name=Twig, а настройки. Получится вот так.

// Подключаем шаблонизатор и класс админки require_once "./lib/Twig/Autoloader.php"; require_once "./admin.class.php"; // Инициализируем Twig Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("./templates"); $twig = new Twig_Environment($loader, array("cache" => "./cache", "debug" => true)); // Создаем объект админки $admin = new Admin(); // Рендерим шаблон echo $twig->render("index.html", array("settings" => $admin->getSettings()));

Редактируем шаблон.

В предыдущей статье засветился прототип. На него и ориентируемся. Нам понадобится заготовка html-документа и простая форма с названиями параметров и значениями.

Конечно, форма будет на bootstrap. Однажды я раздуплюсь и покажу какой-нибудь другой css-фреймворк, но пока лень. Оправдываю себя тем, что мы же с вами не css-ы верстаем, а ПРИЛОЖЕНИЯ ПРОГРАММИРУЕМ. Пока отмазка работает, возвращаемся к шаблону.

Заготовку беру с сайта bootstrap. В head скопипастим такое

А body придется писать самим.

Выглядит как обычная бутстраповская форма, но с твиговскими вставками.
Разберем по очереди.

{% for item in settings %}

Перебираем в цикле настройки и для каждой выводим label и input в форме.

item.key используется и как айди, и как название name инпута, и как значение for в label. Такой важный нужный key.
item.title - заголовок настройки.

А это текстовое поле со значением.

Теперь обновляем страницу и видим список настроек с нужными значениями. Красота! Поменяйте значения полей в config/values.json. Работает, опять красота.

На этом позитивном предложении автор закончил бы статью, но нельзя. Потому что внимательный читатель скажет: стоп, а картиночка-то не та! С прототипом не сходится. А любознательный читатель еще и спросит: а зачем в первом уроке столько мутили с конфигами и разными типами данных? Чтобы сейчас выводить их тупо в инпуты? Конечно, читатель прав. Поэтому автор сходит выпить чаю и напишет еще пару абзацев.

Итак, продолжаем. Мы хотим выводить разные инпуты-селекты в зависимости от типа найстройки. В этом помогут условия twig и поле type из конфига настроек. В наличии 4 типа настроек: text, number, checkbox и select. Под каждую из них делаем условие. Вместо

пишем так

{% if item.type == "text" %} {% endif %} {% if item.type == "number" %} {% endif %} {% if item.type == "checkbox" %}

{% endif %} {% if item.type == "select" %} {% for option in item.list %} {{ option }} {% endfor %} {% endif %}

Вроде прям много и развесисто, но посмотрим ближе и станет яснее.

  • текстовый инпут просто обернули в условие item.type == "text"
  • number - тот же инпут, только с type="number"
  • для checkbox отдельная верстка. Логично, чекбокс же, не просто инпут.
    Не забываем про атрибут checked, который ставится в зависимости от item.value (true или false).
    Интересно, что у самого чекбокса нет атрибута name со значением item.key. Зато name есть у скрытого инпута рядом с чекбоксом.
    Спойлер: так удобнее для отправки формы на бекенд, в следующей статье убедимся.
  • у select-а есть цикл, потому что выводим список возможных значений из поля item.list

    • Теперь еще раз обновим страницу. У меня получилось так

    Вот теперь все. Можно поиграть с настройками и значениями в json-файлах и посмотреть, как оно успешно раскидывается по формочке.

    Если прониклись твигом и хотите узнать больше, то вот документация на русском. https://x-twig.ru/intro/

    Следующий урок будет заключительным по теме "админка на файлах". Мы напишем js-код, который отправит данные на бекенд, и php-код, который эти данные сохранит. Бонусом внедрим уведомления, чтобы пользователь видел, не забыл ли он нажать кнопочку сохранить.

    Небольшой опрос напоследок и до встречи!

    Добавляем шаблонизатор Twig как плагин для WordPress.
    Возможно, многие из вас сейчас крутят у веска пальцем и задаются вопросом – «Зачем это нужно?», и возможно вполне правы, наверняка это весьма сумасшедшая идея, но я все же скажу – «а почему бы и нет?».

    Для начала познакомимся с Twig. Что это такое? – Twig это PHP шаблонизатор нового поколения, написанный Fabien Potencier, создателем фреймворка Symfony, в последней версии которого он как раз используется.

    Как говорится на официальном сайте, данного чуда:

    Быстрый – Twig компилирует шаблоны и при желании складывает их в Кеш, при этом скомпилированный PHP код полностью соответствует ООП, оптимизирован и скорость его последующей работы равна скорости работы обычного PHP кода.

    Безопасный – Twig имеет изоляционный режим (режим песочницы), для работы с ненадежным кодом шаблона. Пользователь, имеющий доступ к шаблону, и возможность его редактировать не сможет воспроизвести произвольный код, или получить доступ к данным не касающихся непосредственно его, и нанести ущерб системе в целом.

    Гибкий – Twig оснащен гибким лексическим и синтаксическим анализатором кода, это позволяет разработчику определять собственные пользовательские теги и фильтры.

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

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

    Я не очень люблю смешивать HTML и PHP теги, по этому в самописных проектах я предпочитаю использовать паттерн MVC, но в данном случаи такой возможности нет. Поэтому, после долгих размышлений, о том как реализовать мою идею, было принято решение написать плагин, который будет обеспечивать все необходимые задачи и позволит использовать twig.

    Сначала я создал папку с именем плагина wp_twig_engine, затем в неё копируем папку Lib шаблозатора, скачать шаблонизатор с офф. сайта , таким образом, мы превратили весь набор скриптов твига в плагин для WP.

    Затем создаем главный файл плагина: WP-twig.php, с содержимым

    Просмотр кода PHP

    Просмотр кода PHP

     

     
    Это интересно: