Атрибуты

Атрибуты тега в Pug пишутся в круглых скобках сразу после имени тега, класса или id. Внутри скобок — пары имя="значение", как в HTML.

Один атрибут

Ссылка на страницу меню в src/index.pug:

a(href="menu.html") Меню

Текст ссылки стоит после закрывающей скобки и пробела:

<a href="menu.html">Меню</a>

Несколько атрибутов

Атрибуты разделяются пробелом. Запятые между ними тоже допустимы, но не обязательны:

img(src="cup.jpg" alt="Чашка капучино" width="200")

Тег img не имеет содержимого, поэтому текста после скобок нет:

<img src="cup.jpg" alt="Чашка капучино" width="200"/>

Здесь нет строки doctype html, поэтому Pug закрыл одиночный тег в стиле XHTML — />. В странице с doctype html будет обычный <img ...>.

Атрибуты на нескольких строках

Если атрибутов много, перенесите их на отдельные строки с отступом. Форма подписки на новости кофейни:

form(action="/subscribe" method="post")
  input(
    type="email"
    name="email"
    placeholder="Ваш email"
  )
  button(type="submit") Подписаться

Закрывающая скобка может стоять на своей строке — в HTML всё окажется в одном теге:

<form action="/subscribe" method="post">
  <input type="email" name="email" placeholder="Ваш email"/>
  <button type="submit">Подписаться</button>
</form>

Логические атрибуты

Атрибуты вроде checked, required и disabled пишутся без значения:

label
  input(type="checkbox" checked)
  span Без сахара

Флажок на странице будет отмечен:

<label>
  <input type="checkbox" checked="checked"/><span>Без сахара</span>
</label>

В фрагменте без doctype html Pug пишет checked="checked", а в странице с doctype html — просто checked. Браузер понимает обе записи.

Если логическому атрибуту присвоить false, Pug его не выведет: button(disabled=false) даст <button> без атрибута. Это пригодится, когда значение будет приходить из переменной.

Атрибуты data-

Свои атрибуты data- пишутся так же, как обычные:

ul
  li(data-price="3") Капучино
  li(data-price="2") Эспрессо

Скрипт на странице сможет прочитать цену через dataset.price:

<ul>
  <li data-price="3">Капучино</li>
  <li data-price="2">Эспрессо</li>
</ul>

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

Значение атрибута в Pug — это выражение JavaScript, а не просто текст. Без кавычек Pug пытается вычислить его как код:

a(href=menu.html) Меню

Сборка останавливается с ошибкой «Cannot read properties of undefined (reading 'html')»: Pug искал переменную menu. Строки всегда заключайте в кавычки: a(href="menu.html"). Зато без кавычек можно подставить переменную — об этом урок о переменных.