過濾器

過濾器讓您在 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

現在，您應該能夠渲染以下範本

<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><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[
  'use strict';

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

自訂濾鏡

您可以透過 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>

過濾器

警告

內嵌語法 ¶

已篩選的包含 ¶

巢狀篩選器 ¶

自訂濾鏡 ¶

內嵌語法

已篩選的包含

巢狀篩選器

自訂濾鏡