过滤器(Filters)

¥Filters

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

¥Filters let you use other languages in Pug templates. They take a block of plain text as an input.

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

¥To pass options to the filter, add them inside parentheses after the filter name (just as you would do with tag attributes): :less(ieCompat=false).

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

¥All JSTransformer modules can be used as Pug filters. Popular filters include :babel, :uglify-js, :scss, and :markdown-it. Check out the documentation for the JSTransformer for the options supported for the specific filter.

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

¥If you can’t find an appropriate filter for your use case, you can write your own custom filter.

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

¥For example, if you want to be able to use CoffeeScript and Markdown (using Markdown-it renderer) in your Pug template, you would first make sure that these features are installed:

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

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

¥Now, you should be able to render the following template:

<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>

警告

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

¥Filters are rendered at compile time. This makes them fast, but it also means that they cannot support dynamic content or options.

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

¥By default, compilation in the browser does not have access to JSTransformer-based filters, unless the JSTransformer modules are explicitly packed and made available through a CommonJS platform (such as Browserify or Webpack). In fact, the page you are reading right now uses Browserify to make the filters available in the browser.

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

¥Templates pre-compiled on the server do not have this limitation.

内联语法(Inline Syntax)

¥Inline Syntax

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

¥If the content of the filter is short, one can even use filters as if they are tags:

<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>

过滤包含(Filtered Includes)

¥Filtered Includes

你还可以使用包含语法.filter 将过滤器应用于外部文件。

¥You can also apply filters to external files, using the include syntax.

嵌套过滤器(Nested Filters)

¥Nested Filters

你可以对同一文本块应用多个过滤器。为此，只需在同一行指定过滤器即可。

¥You can apply multiple filters on the same block of text. To do so, simply specify the filters on the same line.

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

¥The filters are applied in reverse order. The text is first passed to the last filter; then, the result is passed to the second last filter, and so on.

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

¥In the following example, the script is first transformed by babel, and then by cdata-js.

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

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

自定义过滤器(Custom Filters)

¥Custom Filters

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

¥You can add your own filters to Pug via the filters option.

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>

过滤器(Filters)

警告

内联语法(Inline Syntax) ¶

过滤包含(Filtered Includes) ¶

嵌套过滤器(Nested Filters) ¶

自定义过滤器(Custom Filters) ¶

内联语法(Inline Syntax)

过滤包含(Filtered Includes)

嵌套过滤器(Nested Filters)

自定义过滤器(Custom Filters)