Оглавление
Pug
Шаблонизатор HTML: короткая запись разметки, переменные, циклы, миксины и наследование шаблонов.
1.Начало работы
- Что такое PugЧто такое шаблонизатор, как выглядит разметка на Pug, во что она превращается и где Pug применяют.
- Установка и сборкаКак установить Pug через npm и превратить шаблон в HTML-файл небольшим скриптом на Node.js.
- Pug вместе с ViteКак подключить шаблоны Pug к проекту на Vite через плагин vite-plugin-pug-transformer.
2.Синтаксис
- Теги и отступыКак в Pug записываются теги, как отступы задают вложенность и как выглядит каркас страницы с doctype.
- Классы и idКороткая запись классов и id в Pug: точка и решётка после имени тега и div по умолчанию.
- АтрибутыКак задавать атрибуты тегов в Pug: скобки, несколько атрибутов, перенос на строки и логические атрибуты.
- ТекстТри способа записать текст в Pug: в строке тега, через вертикальную черту и блоком с точкой, а также теги внутри текста.
- КомментарииДва вида комментариев в Pug: те, что попадают в HTML, и те, что остаются только в шаблоне.
3.Данные и логика
- Переменные и вставка значенийСтроки кода с дефисом, вывод значения через =, вставка #{} в текст и передача данных в шаблон из скрипта сборки.
- Вставка без экранированияЧем !{} и != отличаются от #{} и =, когда они нужны и почему с данными от посетителей они опасны.
- УсловияКак показывать разную разметку в зависимости от данных: if и else, unless и case в Pug.
- ЦиклыКак выводить списки из данных в Pug: each по массивам и объектам, номер элемента, else для пустого списка и while.
4.Повторное использование
- МиксиныКак в Pug объявить повторяющийся кусок разметки один раз и вызывать его с аргументами и вложенным содержимым.
- Подключение файловКак вынести шапку, подвал и миксины в отдельные файлы и вставлять их в страницы командой include.
- Наследование шаблоновОбщий макет страницы с блоками, extends и block в страницах, append и prepend для дополнения блоков.
- ФильтрыКак вставить в шаблон Pug текст на другом языке разметки, например Markdown, с помощью фильтров.
5.На практике
- Многостраничный сайтСборка сайта кофейни из трёх страниц: общий макет, шапка с активным пунктом меню, подвал и скрипт, который собирает все страницы.
- Pug и ExpressКак сервер на Express собирает страницы из шаблонов Pug при каждом запросе через res.render.
- Pug и другие шаблонизаторыЧем Pug отличается от обычного HTML и от EJS, Nunjucks и Handlebars и когда его стоит выбирать.