HTML: Препроцессор Pug
2026-02-26 20:08 Diff
https://ru.hexlet.io/courses/html-pug/lessons/mixin/theory_unit

При разработке сайта количество одинаковых по структуре блоков велико. Представьте каталог интернет-магазина. Он может состоять из сотен карточек, которые отличаются только данными. При разработке «по старинке», без шаблонизаторов, все эти карточки верстаются методом «копировать-вставить». Не идеальное решение, но вполне рабочее. Именно так кажется до тех пор, пока не произойдет изменение карточек. Любое добавление/удаление элементов приведет к часам, а то и дням работы по изменению верстки.

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

Для переиспользования верстки в Pug используются миксины — конструкции, позволяющие описывать и подставлять код в любую часть верстки. Это отличное решение для создания компонентов.

В качестве примера используем компонент кнопки. Это несложная конструкция, которая может состоять всего из одного тега. Для создания миксина используется ключевое слово mixin, после чего идет произвольное имя миксина. Это имя вы выбираете сами, при этом не забывайте о грамотном именовании. Внутрь миксина помещается весь HTML, который будет нужен. В данном случае один тег <button>:

Вот и все. Простая конструкция, но с множеством возможностей, о которых поговорим чуть ниже. Сейчас необходимо вызвать этот миксин, чтобы его тело попало в итоговый HTML-код. Здесь важно понимать, что сам миксин никак не попадает в итоговую разметку. Для вызова миксина указывается символ + и название миксина. После этого он подставится в HTML-код:

Каждый миксин может быть вызван неограниченное количество раз:

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

Если нужна обертка для логического компонента, то используется mixin, если нужно подключить шаблон в конкретный Pug-файл, то используется конструкция include.

Миксины как функции

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

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

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

Вызов таких миксинов осуществляется следующим образом:

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

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

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

Единожды создав миксин, у вас появилась возможность использовать его с абсолютно разными данными, которые придут в Pug. Можно пойти еще дальше и проверять поля, типы значений, валидировать и нормализовать данные. В качестве значения по умолчанию был указан пустой массив. Это гарантирует, что если данные отсутствуют или переменная не существует, то будет подставлен пустой массив:

Передача вложенного контента в миксин

Миксины могут использоваться в виде «скелета» структуры компонента. Это может быть оформление статьи, которая выводится на странице в виде следующего шаблона:

Если таких статей много на сайте, то есть смысл вынести шаблон в отдельный миксин. Но как же передать данные? Тут есть два пути:

  1. Определить аргументы, и передавать их отдельно в миксин.
  2. Каким-то образом сразу передать всю статью.

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

Главный вопрос: а куда подставится результат выполнения include:markdown-it main.md. На самом деле никуда! Миксин не знает, что делать с этими данными, хотя и может их принять. Для подстановки вложенных в миксин данных используется конструкция block, в которой и хранится то, что было вложено в миксин. Можно считать это «невидимым аргументом», который всегда есть, но не объявляется явно. Теперь можно реализовать логику миксина:

Дополнительное задание

Доработайте миксин с добавлением статьи на страницу:

  1. Проверьте, что существует контент для отображения. Если его нет, то выведите ошибку
  2. Добавьте значения по умолчанию для аргументов. В качестве имени статьи используйте «Hexlet». В качестве автора «Кодовенок»