フィルター

フィルターを使用すると、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

これで、次のテンプレートをレンダリングできるようになります。

警告

フィルターはコンパイル時にレンダリングされます。これにより高速になりますが、動的なコンテンツやオプションをサポートできません。

デフォルトでは、ブラウザでのコンパイルは、JSTransformerモジュールが明示的にパックされ、CommonJSプラットフォーム（BrowserifyやWebpackなど）を介して利用可能にされていない限り、JSTransformerベースのフィルターにアクセスできません。実際、現在読んでいるページは、フィルターをブラウザで利用できるようにするためにBrowserifyを使用しています。

サーバーで事前にコンパイルされたテンプレートには、この制限はありません。

インライン構文

フィルターのコンテンツが短い場合は、タグのようにフィルターを使用することもできます。

フィルターされたインクルード

インクルード構文を使用して、外部ファイルにフィルターを適用することもできます。

ネストされたフィルター

同じテキストブロックに複数のフィルターを適用できます。そのためには、同じ行にフィルターを指定するだけです。

フィルターは逆順に適用されます。テキストは最初に最後のフィルターに渡され、次にその結果が最後から2番目のフィルターに渡される、というように繰り返されます。

次の例では、スクリプトは最初に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>