Фильтры

Фильтры позволяют использовать другие языки в шаблонах Pug. Они принимают блок простого текста в качестве входных данных.

Чтобы передать параметры фильтру, добавьте их в скобки после имени фильтра (точно так же, как вы делаете это с атрибутами тега): :less(ieCompat=false).

Все модули JSTransformer могут использоваться в качестве фильтров Pug. Популярные фильтры включают :babel, :uglify-js, :scss, и :markdown-it. Ознакомьтесь с документацией JSTransformer, чтобы узнать о поддерживаемых параметрах для конкретного фильтра.

Если вы не можете найти подходящий фильтр для своего случая использования, вы можете написать свой собственный настраиваемый фильтр.

Например, если вы хотите использовать CoffeeScript и Markdown (используя рендерер Markdown-it) в вашем шаблоне Pug, вы должны сначала убедиться, что эти функции установлены:

$ npm install --save jstransformer-coffee-script
$ npm install --save jstransformer-markdown-it

Теперь вы должны иметь возможность отобразить следующий шаблон:

:markdown-it(linkify langPrefix='highlight-')
  # Markdown

  Markdown document with http://links.com and

  ```js
  var codeBlocks;
  ```
script
  :coffee-script
    console.log 'This is coffee script'

<h1>Markdown</h1>
<p>Markdown document with <a href="http://links.com">http://links.com</a> and</p>
<pre><code class="highlight-js">var codeBlocks;
</code></pre>
<script>
  (function() {
    console.log('This is coffee script');

  }).call(this);
</script>

Предупреждение

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

По умолчанию компиляция в браузере не имеет доступа к фильтрам на основе JSTransformer, если модули JSTransformer не упакованы явно и не доступны через платформу CommonJS (такую как Browserify или Webpack). Фактически, страница, которую вы сейчас читаете, использует Browserify для обеспечения доступности фильтров в браузере.

Шаблоны, предварительно скомпилированные на сервере, не имеют этого ограничения.

Синтаксис встроенного кода

Если содержимое фильтра короткое, можно даже использовать фильтры как если бы они были тегами:

p
  :markdown-it(inline) **BOLD TEXT**

p.
  In the midst of a large amount of plain
  text, suddenly a wild #[:markdown-it(inline) *Markdown*]
  appeared.

<p><strong>BOLD TEXT</strong></p>
<p>In the midst of a large amount of plain
  text, suddenly a wild <em>Markdown</em>
  appeared.</p>

Отфильтрованные включения

Вы также можете применять фильтры к внешним файлам, используя синтаксис включения.

Вложенные фильтры

Вы можете применять несколько фильтров к одному блоку текста. Для этого просто укажите фильтры в одной строке.

Фильтры применяются в обратном порядке. Текст сначала передается последнему фильтру; затем результат передается предпоследнему фильтру и так далее.

В следующем примере скрипт сначала преобразуется с помощью babel, а затем с помощью cdata-js.

script
  :cdata-js:babel(presets=['es2015'])
    const myFunc = () => `This is ES2015 in a CD${'ATA'}`;

<script>
  //<![CDATA[
  'use strict';

  var myFunc = function myFunc() {
    return 'This is ES2015 in a CD' + 'ATA';
  };
  //]]>
</script>

Настраиваемые фильтры

Вы можете добавить собственные фильтры в Pug с помощью filters параметра.

options.filters = {
  'my-own-filter': function (text, options) {
    if (options.addStart) text = 'Start\n' + text;
    if (options.addEnd)   text = text + '\nEnd';
    return text;
  }
};

p
  :my-own-filter(addStart addEnd)
    Filter
    Body

<p>
  Start
  Filter
  Body
  End
</p>