Фильтры

Фильтр обрабатывает кусок текста другой программой при сборке и вставляет результат в HTML. Самый частый случай — Markdown: длинный текст удобнее писать в нём, а не тегами Pug. Фильтр записывается двоеточием и именем: :markdown-it.

Установка фильтра

Pug сам не умеет превращать Markdown в HTML. Фильтры подключаются отдельными пакетами с именем jstransformer- и названием фильтра. Установите фильтр Markdown:

npm install --save-dev jstransformer-markdown-it

Pug найдёт пакет сам: имя фильтра markdown-it совпадает с окончанием имени пакета. Настраивать build.js не нужно.

Markdown внутри шаблона

Блок «О нас» на главной странице. В src/index.pug:

section
  :markdown-it
    ## Наша история
 
    Мы обжариваем зёрна **сами**.

Текст под фильтром сдвинут на уровень вправо. Решётки стали заголовком, звёздочки — жирным текстом:

<section><h2>Наша история</h2>
<p>Мы обжариваем зёрна <strong>сами</strong>.</p>
 
</section>

Пустая строка перед </section> — это перенос строки, который оставил Markdown; на странице его не видно.

Markdown из отдельного файла

Длинные тексты удобнее хранить в своих файлах. Создайте src/about.md:

## О нас
 
Кофейня «Утро» открылась в **2015** году.

И подключите его через include с фильтром в src/index.pug:

section
  include:markdown-it about.md

Файл прочитан и превращён в HTML при сборке:

<section><h2>О нас</h2>
<p>Кофейня «Утро» открылась в <strong>2015</strong> году.</p>
 
</section>

Так текст «О нас» может править человек, который не знает Pug.

Когда нужны фильтры

Для других языков тоже есть пакеты jstransformer-..., но большинству сайтов хватает Markdown.

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

Вставлять переменные в текст под фильтром:

- const cafe = "Утро"
:markdown-it
  Кофейня #{cafe}

Фильтр выполняется при разборе шаблона, до того как появляются данные, поэтому вставка осталась как есть:

<p>Кофейня #{cafe}</p>

Внутри фильтров пишите только постоянный текст. Если нужны данные, выводите их тегами Pug рядом с фильтром.