Условия

Условие выбирает, какую разметку вывести. В Pug для этого есть if, else if и else, их противоположность unless и выбор из нескольких вариантов case. Скобки и фигурные скобки, как в JavaScript, не нужны: что выводить, определяет отступ.

if и else

Покажем на главной странице, открыта ли кофейня. В src/index.pug:

- const isOpen = true
if isOpen
  p.status Мы открыты, заходите!
else
  p.status Сейчас закрыто.

После if пишется выражение JavaScript, ниже с отступом — разметка для случая «да». Переменная равна true, поэтому выведена первая строка:

<p class="status">Мы открыты, заходите!</p>

Поменяйте значение на false, пересоберите страницу — появится «Сейчас закрыто.»

else if

Несколько условий проверяются по очереди, срабатывает первое верное:

- const hour = 21
if hour < 8
  p Ещё закрыто, откроемся в 8:00.
else if hour < 20
  p Открыто до 20:00.
else
  p На сегодня всё, ждём вас завтра.

Значение 21 не меньше 8 и не меньше 20, поэтому сработала ветка else:

<p>На сегодня всё, ждём вас завтра.</p>

unless

unless — это «если не». Кнопка заказа показывается, только если напиток не закончился:

- const soldOut = false
unless soldOut
  button Заказать

Запись unless soldOut означает то же, что if !soldOut, но читается проще:

<button>Заказать</button>

case

Когда одну переменную сравнивают с несколькими значениями, удобнее case. Часы работы зависят от дня недели:

- const day = "sunday"
case day
  when "saturday"
  when "sunday"
    p Выходные: с 10:00 до 18:00.
  default
    p Будни: с 8:00 до 20:00.

when без разметки под ним переходит к следующему when, поэтому суббота и воскресенье дают одно и то же. default срабатывает, когда ни одно значение не подошло:

<p>Выходные: с 10:00 до 18:00.</p>

Условие в атрибуте

Для одного атрибута отдельный if не нужен — хватит тернарного оператора:

- const soldOut = true
li(class=soldOut ? "sold-out" : undefined) Какао

Если значение атрибута undefined, Pug атрибут не выводит. Здесь класс добавлен:

<li class="sold-out">Какао</li>

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

else с другим отступом, чем у if:

if isOpen
  p Открыто.
  else
    p Закрыто.

Pug считает else вложенным в if и останавливает сборку с ошибкой «unexpected token "else"». Ставьте else и else if ровно под своим if.