Текст
Короткий текст пишется в одной строке с тегом. Для длинного текста и для смеси текста с тегами в Pug есть ещё два способа: строки с вертикальной чертой и блок текста после точки.
Текст в строке тега
Всё, что стоит после имени тега и пробела, — текст. Добавьте в src/index.pug:
p Свежий кофе каждый день.Это самый частый способ:
<p>Свежий кофе каждый день.</p>Строки с вертикальной чертой
Если текст длинный, его можно продолжить на следующих строках. Каждая такая строка начинается с | и пробела:
p
| Мы варим кофе
| из свежих зёрен.Pug склеит строки в одном абзаце и сохранит переносы между ними:
<p>
Мы варим кофе
из свежих зёрен.
</p>Браузер показывает перенос строки как пробел, поэтому на странице получится одна фраза.
Блок текста
Точка сразу после тега говорит Pug: всё, что сдвинуто ниже, — только текст, теги там не ищутся:
p.
Кофейня «Утро» работает с 2015 года.
Мы обжариваем зёрна сами.Вертикальные черты больше не нужны:
<p>
Кофейня «Утро» работает с 2015 года.
Мы обжариваем зёрна сами.
</p>Блок с точкой особенно удобен для тегов style и script, в которых записан CSS или JavaScript:
style.
.note { color: brown; }
script.
console.log("Привет из Pug");Код внутри Pug не разбирает и переносит как есть:
<style>.note { color: brown; }</style>
<script>console.log("Привет из Pug");</script>Под примером появится строка «Привет из Pug» — её вывел скрипт.
Тег внутри текста
Чтобы выделить слово внутри абзаца, используйте запись #[тег текст]:
p Звоните нам: #[strong +1 555 0100]Внутри квадратных скобок работает обычный синтаксис Pug — с классами и атрибутами:
<p>Звоните нам: <strong>+1 555 0100</strong></p>Частая ошибка
Потерянный пробел между текстом и тегом. Строки с | и теги на отдельных строках склеиваются вплотную:
p
| Подробнее в
a(href="menu.html") меню
| .На странице получится «Подробнее вменю.»:
<p>Подробнее в<a href="menu.html">меню</a>.</p>Внутри предложения ставьте тег через #[...]: p Подробнее в #[a(href="menu.html") меню]. — тогда пробелы останутся там, где вы их написали.