Комментарии

Комментарий — заметка в коде, которую браузер не показывает. В Pug их два вида: обычный // попадает в готовый HTML как <!-- ... -->, а комментарий //- остаётся только в шаблоне и в результат не попадает.

Комментарий в HTML

Строка, начинающаяся с //, превращается в HTML-комментарий. Добавьте в src/index.pug:

// Шапка сайта
header
  h1 Кофейня «Утро»

В результате комментарий стоит перед header:

<!-- Шапка сайта-->
<header>
  <h1>Кофейня «Утро»</h1>
</header>

Посетитель не видит его на странице, но может прочитать, открыв исходный код страницы в браузере.

Комментарий только для шаблона

Добавьте дефис — //-, и комментарий останется в файле .pug:

header
  //- Логотип добавим, когда дизайнер пришлёт файл
  h1 Кофейня «Утро»

В HTML от заметки ничего не осталось:

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

Такие комментарии подходят для заметок разработчикам: они не увеличивают страницу и не видны посетителям.

Комментарий из нескольких строк

Если после // или //- ничего не написать, комментарием станут все строки, сдвинутые ниже:

//
  Меню обновляется
  каждый понедельник
p Сегодня в меню пять напитков.

Сдвинутые строки вошли в один HTML-комментарий:

<!--
Меню обновляется
каждый понедельник
-->
<p>Сегодня в меню пять напитков.</p>

Так же удобно временно выключить кусок разметки: поставьте над ним //- и сдвиньте его на один уровень вправо.

Когда какой

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

Писать обычным // то, что посетителям видеть не стоит: внутренние планы, имена служебных файлов или адреса тестового сервера. Такой комментарий окажется в коде страницы, и любой посетитель прочитает его через «Просмотр кода». Для всех заметок, не предназначенных для HTML, используйте //-.