过滤器

过滤器允许你在 Pug 模板中使用其他语言。它们将一段纯文本作为输入。

要将选项传递给过滤器，请在过滤器名称后面用括号将它们添加进去（就像你对标签属性所做的那样）：:less(ieCompat=false)。

所有JSTransformer 模块都可以用作 Pug 过滤器。流行的过滤器包括 :babel、:uglify-js、:scss 和 :markdown-it。查看 JSTransformer 的文档，了解特定过滤器支持的选项。

如果你找不到适合你用例的过滤器，你可以编写自己的自定义过滤器。

例如，如果你想在 Pug 模板中使用 CoffeeScript 和 Markdown（使用 Markdown-it 渲染器），你首先要确保安装了这些功能

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

现在，你应该能够渲染以下模板

警告

过滤器在编译时渲染。这使得它们很快，但也意味着它们无法支持动态内容或选项。

默认情况下，浏览器中的编译无法访问基于 JSTransformer 的过滤器，除非 JSTransformer 模块已明确打包并通过 CommonJS 平台（例如 Browserify 或 Webpack）提供。事实上，你现在正在阅读的页面使用 Browserify 在浏览器中提供过滤器。

在服务器上预编译的模板没有此限制。

内联语法

如果过滤器的内容很短，甚至可以使用过滤器，就像它们是标签一样

过滤包含

你还可以使用 包含语法 对外部文件应用过滤器。

嵌套过滤器

你可以在同一文本块上应用多个过滤器。要做到这一点，只需在同一行上指定过滤器即可。

过滤器按相反的顺序应用。文本首先传递给最后一个过滤器；然后，结果传递给倒数第二个过滤器，依此类推。

在以下示例中，脚本首先由 babel 转换，然后由 cdata-js 转换。

自定义过滤器

你可以通过 filters 选项 将你自己的过滤器添加到 Pug。

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>