Что такое Pug

Шаблонизатор — это программа, которая собирает HTML из шаблона и данных. Шаблон описывает разметку один раз, а шаблонизатор подставляет в неё заголовки, списки и ссылки и выдаёт готовые HTML-файлы. Pug — популярный шаблонизатор для Node.js с короткой записью: вместо угловых скобок и закрывающих тегов он использует отступы.

Курс использует Pug 3 — текущую версию пакета pug. Раньше пакет назывался Jade; в старых статьях вы встретите это имя и файлы .jade.

От Pug к HTML

Вот небольшое меню навигации в файле src/index.pug:

nav
  a(href="index.html") Главная
  a(href="menu.html") Меню
  a(href="contacts.html") Контакты

Имя тега стоит в начале строки, атрибуты — в скобках, текст — после пробела. Вложенность задаётся отступом: ссылки сдвинуты вправо, значит, они внутри nav. Pug превращает этот файл в обычный HTML:

<nav><a href="index.html">Главная</a><a href="menu.html">Меню</a><a href="contacts.html">Контакты</a></nav>

Закрывающие теги Pug расставил сам. Браузер получает только этот HTML, а файл .pug остаётся у вас.

Что даёт Pug

Где работает Pug

Pug запускается в Node.js, а не в браузере. Есть два способа:

• при сборке — скрипт превращает файлы .pug в .html, и вы выкладываете готовые страницы на любой хостинг;
• на сервере — сервер, например на Express, собирает страницу заново при каждом запросе и подставляет свежие данные.

Большая часть курса использует первый способ, второму посвящён один из последних уроков.

Пример курса

Через весь курс строится небольшой сайт кофейни «Утро» из трёх страниц: главная, меню и контакты. У всех страниц общий макет, шапка с навигацией и подвал, а меню собирается из списка напитков с ценами.

Частая ошибка

Браузер не понимает Pug. Если вставить код Pug в файл .html или подключить файл .pug, браузер покажет его как обычный текст:

nav
  a(href="index.html") Главная

Сначала превратите шаблон в HTML, а в браузере открывайте результат. Как это сделать, показано в следующем уроке.