Переменные и вставка значений

Шаблон становится полезным, когда в нём есть данные: название кофейни, цены, год в подвале. В Pug можно писать строки обычного JavaScript и вставлять их результаты в разметку.

Строка кода и вывод через =

Строка, начинающаяся с - и пробела, — это JavaScript, который выполняется при сборке и ничего не выводит. Объявите переменную в src/index.pug и выведите её:

- const cafe = "Кофейня «Утро»"
h1= cafe

Знак = сразу после тега означает: содержимое тега — значение выражения, а не текст:

<h1>Кофейня «Утро»</h1>

Вставка в текст

Чтобы подставить значение в середину текста, используйте #{...}:

- const cafe = "Утро"
- const price = 3
p Добро пожаловать в кофейню «#{cafe}»!
p Два капучино стоят $#{price * 2}.

Внутри фигурных скобок — любое выражение JavaScript, его результат встаёт на место вставки:

<p>Добро пожаловать в кофейню «Утро»!</p>
<p>Два капучино стоят $6.</p>

Переменная в атрибуте

Значение атрибута — тоже выражение, поэтому переменную пишут без кавычек:

- const menuUrl = "menu.html"
a(href=menuUrl) Посмотреть меню

Pug подставил значение переменной:

<a href="menu.html">Посмотреть меню</a>

Несколько строк кода

Если кода больше одной строки, поставьте - отдельно и сдвиньте код ниже:

-
  const drinks = ["Эспрессо", "Капучино", "Какао"]
  const count = drinks.length
p Сегодня в меню напитков: #{count}.

Весь сдвинутый блок выполняется как JavaScript:

<p>Сегодня в меню напитков: 3.</p>

Данные из скрипта сборки

Обычно данные приходят снаружи. Всё, что вы передадите в pug.renderFile() вместе с настройками, станет переменными шаблона. Измените вызов в build.js:

// build.js
const html = pug.renderFile("src/index.pug", {
  pretty: true,
  year: 2026,
  phone: "+1 555 0100",
});

Теперь в src/index.pug переменные year и phone доступны без объявления:

footer
  p © #{year} Кофейня «Утро»
  p Телефон: #{phone}

После npm run build в подвале будут год и телефон:

<footer>
  <p>© 2026 Кофейня «Утро»</p>
  <p>Телефон: +1 555 0100</p>
</footer>

Значения, вставленные через = и #{...}, Pug экранирует: символы < и > превращаются в < и >, поэтому текст из данных не может стать тегом. Подробнее — в следующем уроке.

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

Забыть = или #{...}:

- const cafe = "Утро"
h1 cafe

После пробела идёт обычный текст, поэтому в заголовке слово, а не значение переменной:

<h1>cafe</h1>

Пишите h1= cafe или h1 #{cafe}.