Препроцессор Pug(jade). Часть 2

В предыдущей статье мы рассмотрели основы работы с популярным html препроцессором и шаблонизатором pug. В этой части хотелось бы рассмотреть другие, более мощные возможности данного инструмента.

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

Препроцессор Pug поддерживает наследование шаблонов. Давайте разберёмся, как это работает.

Мы можем создать отдельный шаблон страницы и в нём определить блоки кода, которые будут определяться или изменяться на странице-наследнике.
Для примера создадим шаблон template.pug и разместим его в директории templates. Его содержимое:

Ключевое слово block обозначает блок кода, который будет вставлен на странице, наследующей данный шаблон. Можно задать значение по умолчанию, как в случае тега link, подключающего таблицу стилей.

Теперь создадим файл, который унаследует данный шаблон:

Шаблон подключается с помощью конструкции extends путь_к_шаблону (в данном случае templates/template).
А далее описывается содержимое блоков. Например, в блоке content подключается шапка и содержится простая разметка в виде заголовка и абзаца с текстом.

Т.е сгенерированная страница будет иметь следующий вид:

Давайте вернёмся к блоку style, в котором подключается таблица стилей. Как видно, на странице не было определено содержимое данного блока, но, поскольку для него было определено значение по умолчанию, указанная таблица стилей будет подключаться. Если бы мы указали содержимое этого блока и подключили бы другую таблицу стилей, то подключилась бы только новая таблица стилей, вместо дефолтной.

Т.е если в шаблоне указано содержимое блока по умолчанию, новое определение его заменит. Но как быть в случае, если необходимо дополнить исходное содержимое? Т.е в контексте данного примера подключить и дефолтный файл стилей и дополнительный. Это делается очень просто — при помощи ключевого слова append или prepend.

В случае использования append новое содержимое будет вставлено после содержимого, определенного по умолчанию, а в случае использования prepend — перед ним.
Следует так же отметить, что в данном случае использование слова block становится необязательным. Можно написать просто append имя_блока.

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

2. Миксины

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

Миксин создаётся при помощи ключевого слова mixin. Вызов миксина осуществляется с помощью конструкции +имя_миксина.
Для примера создадим миксин list разметкой маркированного списка и выведем его:

Результат:

В скобках можно передать аргументы в миксин:

Результат:

Обратите внимание на символ «=». С его помощью осуществляется присваивание значения аргумента.

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

Результат

Или

Результьат:

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

Результат:

В общем случае, вызов миксина с 2 аргументами сформирует ссылку с указанными href и текстом, но, благодаря конструкции &attributes(attributes), в миксин можно передавать пары ‘имя_атрибута’=’значение_атрибута’, каждая из которых указывается в круглых скобках. И все эти пары будут преобразованы в дополнительные атрибуты.

Собственно, это можно описать иным образом:

При этом здесь выбор нужного атрибута рассматривается как свойство объекта attributes (attributes == {class: «btn»}). Использование этой конструкции становится достаточно очевидным, если вы знакомы с синтаксисом JavaScript.

Миксины могут использовать неизвестное количество аргументов. Для этого используется синтаксис «rest arguments». Он достаточно прост и заключается в использовании многоточия перед неизвестным количеством аргументов, например:

Результат:

3. Использование кода

Pug умеет очень гибко работать с кодом и использовать различные управляющие конструкции, циклы, переменные, массивы. Его синтаксис базируется на синтаксисе JavaScript, что не удивительно, ведь pug сам написан на этом языке.

Следует обратить внимание, что блок кода, например, объявление переменной должны начинаться со знака —

Цикл for

Цикл each позволяет перебирать массивы

Оператор case

Данная конструкция работает так же, как swith в JavaScript, т.е проверяет значение како-либо переменной и в зависимости от него выполняет какое-либо действие, а в случае pug, выводит каки-либо значения. Например:

Использование синтаксиса pug в сочетании с html разметкой

Очень часто возникает необходимость доработки страниц, блоков с готовой версткой и, может показаться, что для использования pug в таких ситуациях неудобно, т.к чревато переписыванием
части имеющейся разметки в синтаксисе pug. Но это не так. Pug корректно обрабатывает обычную html-разметку, не вызывая конфликтов. Например:

Результат:

Т.е pug корректно обработает такой код, пропуская html теги и обрабатывая участки с синтаксисом pug. Результат получится вполне корректным

В этой статье приведены далеко не все возможности pug. Более подробно ознакомиться с ними можно на официальном сайте pugjs.org.

One comment

  1. Если позволите, то я бы хотел добавить, что такие препроцессоры как SASS, Less и Stylus весьма активно используются в больших корпорациях. А все потому, что они реально решают конкретные проблемы. Jade не решает ни одну из проблем! Вместо этого он их создает:

Leave a Reply

Ваш e-mail не будет опубликован. Обязательные поля помечены *