Дочерний шаблон будет содержать всю разметку 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 комментарий #}

Работа с переменными

Вывод переменных:

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

body; ?>

{{ content.body }}

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

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

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

field_image; ?>

{% set image = content.field_image %}

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

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

Условия

comments): endif; ?>

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

comments)): endif; ?>

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

comments)): endif; ?>

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

0): endif; ?>

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

Циклы

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

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

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

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

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

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

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

Twig 2 - Twig for Template Designers

Twig для дизайнеров шаблонов

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

конспект

Шаблон - это просто текстовый файл. Он может генерировать любой текстовый формат (HTML, XML, CSV, LaTeX и т. Д.). У него нет определенного расширения, .html или.xml просто отлично.

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

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

{% for item in navigation %}
• {{ item.caption }}
{% endfor %}

My Webpage

Существует два типа разделителей: {% ... %} и {{ ... }} . Первый используется для выполнения таких операторов, как for-loops, последний печатает результат выражения в шаблоне.

Интеграция с IDE

Многие IDE поддерживают подсветку синтаксиса и автозаполнение для Twig:

• Textmate через пакет Twig
• Vim через плагин синтаксиса Jinja или плагин vim-twig
• Netbeans через плагин синтаксиса Twig (до 7.1, родной по 7.2)
• PhpStorm (родной от 2.1)
• Eclipse через плагин Twig
• Возвышенный текст через пакет Twig
• GtkSourceView через определение языка Twig (используется gedit и другими проектами)
• Coda и SubEthaEdit через синтаксический режим Twig
• Coda 2 через другой синтаксический режим Twig
• Комодо и Комодо Редактировать через режим Twid подсветки / синтаксиса
• Блокнот ++ через Notepad ++ Twig Highlighter
• Emacs через web-mode.el
• Atom через PHP-ветку для атома
• Код Visual Studio через пакет Twig

Реализация

Для удобства foo.bar выполняет следующие действия на уровне PHP:

• если нет, и если foo является объектом, проверьте, что bar является допустимым свойством;
• если нет, и если foo является объектом, проверьте, что bar является допустимым методом (даже если bar является конструктором - вместо этого используйте __construct());
• если нет, и если foo является объектом, проверьте, что getBar является допустимым методом;
• если нет, и если foo является объектом, проверьте, что isBar является допустимым методом;
• если нет, и если foo является объектом, проверьте, что hasBar является допустимым методом;

foo["bar"] с другой стороны, работает только с массивами PHP:

• проверьте, является ли foo массивом и bar действительный элемент;
• если нет, верните null значение.

Глобальные переменные

В шаблонах всегда доступны следующие переменные:

• _self: ссылается на текущее имя шаблона;
• _context: ссылается на текущий контекст;
• _charset: ссылается на текущую кодировку.

Установка переменных

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

{% set foo = "foo" %} {% set foo = %} {% set foo = {"foo": "bar"} %}

фильтры

Переменные могут быть изменены фильтрами . Фильтры отделяются от переменной символом (|) и могут иметь необязательные аргументы в круглых скобках. Несколько фильтров могут быть скованы цепью. Выход одного фильтра применяется к следующему.

В следующем примере удаляются все теги HTML из name и заголовков:

{{ name|striptags|title }}

Фильтры, которые принимают аргументы, имеют круглые скобки вокруг аргументов. Этот пример присоединяется к списку через запятую:

{{ list|join(", ") }}

Чтобы применить фильтр к разделу кода, оберните его в тег filter :

{% filter upper %} This text becomes uppercase {% endfilter %}

Members

{% for user in users %}
• {{ user.username|e }}
{% endfor %}

По умолчанию фильтр-победитель использует html стратегию, но в зависимости от контекста экранирования вы можете явно использовать любые другие доступные стратегии:

{{ user.username|e("js") }} {{ user.username|e("css") }} {{ user.username|e("url") }} {{ user.username|e("html_attr") }}

Работа с автоматическим экранированием

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

{% autoescape %} Everything will be automatically escaped in this block (using the HTML strategy) {% endautoescape %}

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

{% autoescape "js" %} Everything will be automatically escaped in this block (using the JS strategy) {% endautoescape %}

Спасаясь

Иногда желательно или даже необходимо, чтобы Twig игнорировали части, которые иначе обрабатывались бы как переменные или блоки. Например, если используется синтаксис по умолчанию, и вы хотите использовать {{ качестве исходной строки в шаблоне и не запускать переменную, вам нужно использовать трюк.

Самый простой способ - вывести разделитель переменных ({{), используя переменное выражение:

Для больших разделов имеет смысл отметить блок verbatim .

макрос

Макросы сопоставимы с функциями на обычных языках программирования. Они полезны для повторного использования часто используемых фрагментов HTML, чтобы не повторять себя.

{% if phone matches "/^[\\d\\.]+$/" %} {% endif %}

Оператор сдерживания

Оператор in выполняет тест на герметичность.

Он возвращает true если левый операнд содержится справа:

{# returns true #} {{ 1 in }} {{ "cd" in "abcde" }}

Наконечник

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

Чтобы выполнить отрицательный тест, используйте оператор not in операторе:

{% if 1 not in %} {# is equivalent to #} {% if not (1 in ) %}

Оператор тестирования

Оператор выполняет тесты. Тесты могут быть использованы для проверки переменной на общее выражение. Правильный операнд - это имя теста:

{# find out if a variable is odd #} {{ name is odd }}

Тесты также могут принимать аргументы:

{% if post.status is constant("Post::PUBLISHED") %}

Тесты могут быть сведены на нет с помощью оператора is not:

{% if post.status is not constant("Post::PUBLISHED") %} {# is equivalent to #} {% if not (post.status is constant("Post::PUBLISHED")) %}

На сегодняшний день существует большое количество способов осуществить вывод на html страницу. Всё чаще и чаще для этих целей веб разработчики пользуются так называемыми шаблонизаторами. Сегодня мы рассмотрим небольшой пример использования шаблонизатора Twig.

Особенности Twig

• феноменально быстрая скорость работы (в сравнении с другими шаблонизаторами)
• компиляция шаблонов в хорошо оптимизированный PHP код
• применение “наследования” (можно определить базовый и дочерние шаблоны)
• позволяет создавать и использовать макросы

Установка

Существует множество способов установки Twig-a. Самый простой и быстрый - это скачивание компонента с GitHub , после чего архив необходимо распаковать, и перекинуть каталог lib в папку с нашим проектом.

Структура проекта

Ну а теперь давайте приступим к делу и рассмотрим структуру нашего небольшого проекта:

• compilation_cache
• lib
  • Twig
• templates
  • base.html
  • books.html
• index.php

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

В папке templates мы будем хранить файлы шаблонов. В нашем случае, этих файлов 2: base.html с базовым html кодом и books.html с выводом списка книг.

В каталоге compilation_cache будут помещаться PHP файлы, созданные Twig-ом для работы.

Подключение и базовая конфигурация Twig-a

Итак, первое что нам необходимо сделать, так это подключить Twig:

Require_once "lib/Twig/Autoloader.php"; Twig_Autoloader::register();

После этого сообщаем шаблонизатору, где у нас хранятся файлы шаблонов. В качестве аргумента передаём путь к каталогу templates :

$loader = new Twig_Loader_Filesystem("templates");

Затем создаём объект шаблонизатора и указываем ещё несколько опций:

$twig = new Twig_Environment($loader, array("cache" => "compilation_cache", "auto_reload" => true));

Параметру cache передаём путь к каталогу compilation_cache . Активируем опцию auto_reload, для того чтобы при обновлении страницы Twig заново обрабатывал шаблоны, и мы видели изменения. Если этого не сделать, то шаблонизатор просто закэширует страницы. Когда же работа над проектом будет завершена, эту опцию можно убрать, чтобы ваши страницы закэшировались и грузились ещё быстрее.

Данные

Для реализации нашего небольшого примера, возьмём список книг и сформируем массив вида ключ - значение:

$books = array(array("number" => "Книга 1", "title" => "Гарри Поттер и философский камень", "date" => "30.06.1997"), array("number" => "Книга 2", "title" => "Гарри Поттер и Тайная комната", "date" => "2.07.1998"), array("number" => "Книга 3", "title" => "Гарри Поттер и узник Азкабана", "date" => "8.07.1999"), array("number" => "Книга 4", "title" => "Гарри Поттер и Кубок огня", "date" => "8.07.2000"), array("number" => "Книга 5", "title" => "Гарри Поттер и Орден Феникса", "date" => "21.07.2003"), array("number" => "Книга 6", "title" => "Гарри Поттер и Принц-полукровка", "date" => "16.07.2005"), array("number" => "Книга 7", "title" => "Гарри Поттер и Дары Смерти", "date" => "21.07.2007"));

Загрузка файла и передача данных

Для того чтобы передать данные в какой-то шаблон и вывести html результат, нам необходимо воспользоваться методом render(); В качестве первого аргумента передаём название файла шаблона, который будем выводить. В качестве второго -массив вида ключ - значение. В дальнейшем по заданным ключам мы будем получать доступ к нашим данным в самих шаблонах.

Echo $twig->render("books.html", array("books" => $books));

index.php

Общий вид файла index.php

Require_once "lib/Twig/Autoloader.php"; Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader, array("cache" => "compilation_cache", "auto_reload" => true)); $books = array(array("number" => "Книга 1", "title" => "Гарри Поттер и философский камень", "date" => "30.06.1997"), array("number" => "Книга 2", "title" => "Гарри Поттер и Тайная комната", "date" => "2.07.1998"), array("number" => "Книга 3", "title" => "Гарри Поттер и узник Азкабана", "date" => "8.07.1999"), array("number" => "Книга 4", "title" => "Гарри Поттер и Кубок огня", "date" => "8.07.2000"), array("number" => "Книга 5", "title" => "Гарри Поттер и Орден Феникса", "date" => "21.07.2003"), array("number" => "Книга 6", "title" => "Гарри Поттер и Принц-полукровка", "date" => "16.07.2005"), array("number" => "Книга 7", "title" => "Гарри Поттер и Дары Смерти", "date" => "21.07.2007")); echo $twig->render("books.html", array("books" => $books));

Настройка базового шаблона

Базовый шаблон представляет собой обычный html документ со специальными вставками:

В нашем главном шаблоне мы прописываем 2 блока: title и content. Названия блоков выбираем сами.

В последствии, в эти общие блоки мы будем внедрять характерную для дочерних страниц информацию.

Настройка шаблона вывода книг

Для начала в дочернем шаблоне нам необходимо указать шаблон родителя:

{% block title %}Серия романов о Гарри Поттере{% endblock %}

Затем, пишем содержание, которое внедрится в блок под названием content в базовом шаблоне:

{% block content %}

Серия романов о Гарри Поттере

Тут же в цикле for (Twig for) мы проходимся по всем книгам, которые передали в данный шаблон с помощью записи $twig->render("books.html", array("books" => $books)); и для извлечения значений обращаемся к элементам массива по ключам: {{book.number}}, {{book.title}} и так далее.

Таким образом, после срабатывания метода $twig->render("books.html", array("books" => $books)) , Twig подгрузит шаблон books.html и сформирует html содержание. Далее он распознает, что books.html - это дочерний шаблон base.html, и поместит сформированное содержание в базовый шаблон. После всего этого Twig вернёт нам полноценную html страницу.

Итог

Пример работы данного скрипта вы можете посмотреть в demo или скачать архив с готовым примером.

Ждём впечатлений в комментариях. Если вас заинтересовала данная тема, то в дальнейшем мы продолжим разговор о шаблонизаторе Twig.

В этой статье рассмотрим Twig теги - конструкции шаблонизатора, которые выполняют разнообразные задачи, такие как: условные операторы, циклы, экранирование данных, создание макросов, использование наследования шаблонов, запись в переменные и многое другое. В общем виде они записываются с помощью открывающего тега и закрывающего (именуется префиксом end). Закрывающий тег нужен не для всех конструкций. Пример абстрактного тега выглядит так:

{% tag %} {% endtag %}

Управляющие конструкции: условные операторы и циклы

Тег if

Тег if в Twig сравним с условным оператором if в PHP. В простейшей форме вы можете использовать его, чтобы проверить выражение на истинность:

{% if label_display == "after" %} {{ label }} {% endif %}

Вы также можете проверить массив или строку на существование:

{% if page.footer_fifth %}

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

empty - проверяет, является ли переменная пустой:

{# возвращает true, если переменная foo равна null, false, пустой массив, или пустая строка #} {% if foo is empty %} ... {% endif %} {# возможен вариант с оператором отрицания not #} {% if foo is not empty %} ... {% endif %}

even и odd - возвращает true если данное число является четным или нечетным, соответственно:

{{ if var is even }} ... {% endif %} {{ if var is odd }} ... {% endif %}

iterable - проверяет, является ли переменная массивом или объектом (экземпляром класса, имплементирующего интерфейс Traversable):

{% if users is iterable %} {% for user in users %} Hello {{ user.name }}! {% endfor %} {% else %} {# users вероятно являетcя строкой #} Hello {{ users }}! {% endif %}

null - возвращает true, если переменная равна NULL :

{{ if var is null }} ... {% endif %}

constant - проверяет, имеет ли переменная точно такое же значение, как константа. Вы можете использовать либо глобальные константы, либо константы класса:

{% if status is constant("MARK_NEW") %} {{ "New"|t }} {% elseif status is constant("MARK_UPDATED") %} {{ "Updated"|t }} {% endif %}

divisible - проверяет, делится ли переменная на число:

{% if loop.index is divisible by(3) %} ... {% endif %}

same as - проверяет, указывают ли две переменные на одну ячейку памяти. Аналогичен оператору эквивалентности === в php:

{% if foo.attribute is same as(false) %} foo.attribute эквивалентен значению "false" {% endif %}

defined - проверяет, определена ли переменная:

{# defined работает как с именами переменных #} {% if foo is defined %} ... {% endif %} {# так и с атрибутами переменных #} {% if foo.bar is defined %} ... {% endif %} {% if foo["bar"] is defined %} ... {% endif %}

В условиях можно использовать логические операторы and, or, not:

{% if not page %} {% if foo and bar %} {% if foo or bar %} {# Возможны и сложные составные условия #} {% if (a and b) or (c and d) %}

В условиях имеется возможность использовать регулярные выражения

{% if phone matches "/^[\\d\\.]+$/" %} {% endif %}

Можно также проверить, начинается ли или заканчивается строка с определенного символа:

{% if "Drupal" starts with "D" %} {% endif %} {% if "Drupal" ends with "l" %} {% endif %}

Также вы можете использовать более сложные выражения if-elseif (кстати switch-case в Twig отсутствует ):

{% if rows %}

Тег for

Тег for аналогичен конструкции for в php и осуществляет "перебор" элементов массива или свойств объекта, если объект является экземпляром класса, имплементирующего Traversable интерфейс.

В качестве примера рассмотрим шаблон поля и в нем перебор множественных значений поля:

{% for item in items %} {{ item.content }} {% endfor %}

Переменные, доступные внутри цикла:

• loop.index - Текущая итерация цикла (начинается с 1)
• loop.index0 - Текущая итерация цикла (начинается с 0)
• loop.revindex - Количество итераций с конца цикла (начинается с 1)
• loop.revindex0 - Количество итераций с конца цикла (начинается с 0)
• loop.first - Флаг равный True, если текущая итерация является первой
• loop.last - Флаг равный True, если текущая итерация является последней
• loop.length - Количество элементов в последовательности
• loop.parent - Родительский контекст (используется для вложенных циклов)

В отличие от PHP нельзя прервать или продолжить цикл (continue и break). Однако можно создавать правила, позволяющие пропускать элементы по условиям for-if . В примере ниже неактивные пользователи пропускаются в итерациях:

{% for user in users if user.status %}
• {{ user.name }}
{% endfor %}

Также в Twig возможна конструкция for-else для выполнения действий, если массив или объект оказался пустым:

{% for user in users %}
• {{ user.name }}
{% else %}
• {{ no_found|t }}
{% endfor %}

В Twig также возможны итерации с перебором и ключей, и значений

{% for key, value in values %}

Наследование шаблонов в Twig

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

Тег extends

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

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