Создание шаблона страницы в Twig

Cloud Server, Linux, VPS | Amber | Комментировать запись

Что такое Twig?

Twig – это легкий в использовании современный шаблонизатор, разработанный для PHP. Этот эффективный механизм шаблонов является отличной альтернативой PHPTemplate, поскольку имеет более простой синтаксис и устраняет необходимость выполнения лишних динамических PHP-операций в файлах шаблона.

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

Комментирование в Twig

Добавление комментариев к странице – первое, чему нужно научиться. Для этого существует простой синтаксис: {# #}. Все, что заключено внутри этого блока, не будет парситься. Данный блок может содержать несколько строк:

{#
This is a comment that won’t be parsed.
#}

Переменные Twig

В предыдущем руководстве было показано, как передать переменную в файл шаблона и вывести ее (заключив в двойные фигурные скобки). В том примере была использована простая строковая переменная PHP. Тем не менее, при помощи команды render() можно передавать массивы или объекты.

Предположим, в приложении используется  следующий PHP-класс:

class Box
{
public $shape = 'square';
public function displayShape() {
return $this->shape;
}
}

Если на основе этого класса создать новый объект (назовем его myBox) и передать его в шаблон Twig, можно использовать его следующим образом. Чтобы вывести атрибут $shape, нужно указать:

{{ myBox.shape }}

Чтобы вывести метод displayShape():

{{ myBox.displayShape() }}

Операции с массивами выполняются подобным образом. Предположим, myBox является массивом с ключом shape. Чтобы вывести его, используйте тот же синтаксис, что и для атрибута объекта:

{{ myBox.shape }}

Кроме того, Twig позволяет задать новые переменные в файле шаблона с помощью разделителя {%%}:

{% set shape = 'square' %}

Фильтры Twig

Еще одно весомое преимущество Twig – наличие ряда весьма полезных и простых в использовании фильтров. Проще всего рассмотреть данные фильтры на примере:

{{ shape|upper }}

Это вернет значение переменной shape заглавными буквами. При необходимости можно объединить несколько фильтров:

{{ shape|upper|trim }}

Этот фильтр обрезает пробелы в начале и в конце значения переменной. Кроме того, фильтры можно применять на целый блок:

{% filter upper %}
This box is {{ shape }}.
{% endfilter %}

Данное выражение переведет все в пределах блока фильтра в верхний регистр.

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

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

Поскольку ни один файл шаблона не может обойтись без цикла или оператора if/else, Twig также позволяет использовать различные управляющие структуры. Например, чтобы постоянно повторять цикл foreach, используйте:

{% for shape in shapes %}
{{ shape }}
{% endfor %}

Этот код замкнется на массиве shapes и будет выводить каждую переменную shape. Оператор if/else выглядит примерно так:

{% if shape is defined %}
{{ shape }}
{% endif %}

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

Добавление и наследование шаблонов

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

{% include 'header.html' %}

Этот оператор загрузит файл header.html и воспроизведет его в текущем контексте шаблона. Это означает, что файл получит доступ ко всем переменным, находящимся в шаблоне.  Благодаря этой особенности Twig позволяет хранить несколько файлов в гораздо более чистом виде.

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

Шаблон А (layout.html) содержит следующее (не забывайте, это всего лишь пример):

<div class=”eight columns”>{% block mainContent %}{% endblock %}</div>
<div class=”four columns”>{% block rightSidebar %}{% endblock %}</div>

Как видите, в уже определенных блоках нет никакого контента. При желании его можно добавить, но можно также  расширить этот шаблон при помощи шаблона В и добавить контент в эти блоки:

{% extends "layout.html" %}
{% block mainContent %}Some page text{% endblock %}
{% block rightSidebar %}Some sidebar content{% endblock %}

Как видите, шаблон В расширяет шаблон А (в целом, он заполняет шаблон А и воспроизводит его на странице), а также заполняет его заданные блоки, которые в были пусты. Если бы блоки в шаблоне А были заполнены каким-то контентом, шаблон B перезаписал бы этот контент. Чтобы добавить контент к уже существующему контенту, а не перезаписывать его, нужно использовать формат:

{% block mainContent %}
{{ parent() }}
Some page text
{% endblock %}

Таким образом, блок mainContent загружает контент родительского шаблона, воспроизводит его и добавляет еще немного контента ниже.

Некоторые ключевые моменты

При расширении шаблона блок extends должен быть первым блоком страницы. Также в таком случае нельзя оставлять контент вне блоков, определенных в расширяемом шаблоне. Поэтому весь контент шаблона В должен входить в один из блоков, определенных в шаблоне А.

Чтобы получить более подробную информацию о наследовании шаблонов, обратитесь к документации Twig.

Итоги

Данная статья знакомит с созданием шаблонов, использованием управляющих структур и системы комментариев, выводом переменных (как простых, так и сложных вроде массивов и объектов), а также с добавлением и расширением шаблонов. Конечно, это лишь малая часть возможностей файлов Twig; с остальными функциями и возможностями можно ознакомиться в ходе работы с шаблонизатором. Запомните: Twig является шаблонизатором по умолчанию Symfony2; также он будет включен в выпускаемый вскоре Drupal 8.