Filters

フィルタ

フィルタを使うと、Pugの中で別の言語を使うことができます。 フィルタにはプレーンテキストを入力します。

フィルタにオプションを渡すには括弧で囲みます。 (ちょうどタグの属性と同じように。)
:less(ieCompat=false)

全てのJSTransformerモジュールは Pugのフィルタとして使うことができます。 人気のフィルタは:babel、:uglify-js、:scss、:markdown-itです。
特定のフィルタでサポートされているオプションはJSTransformerのドキュメントを参照してください。

もし希望のフィルタが見つからない場合は、フィルタをカスタマイズすることができます。

例えば、もしCoffeeScriptとマークダウン(Markdown-it)を使いたい場合、 最初に下記モジュールがインストールされていることを確認します。

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

注意

フィルタはコンパイル時にレンダリングされます。つまり、動的コンテンツや動的オプションは使えません。

通常、ブラウザではBrowserifyやWebpack等を通してJSTransformerが利用可能な場合の覗いて、 JSTransformerを使うことはできません。 実際は、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>

インクルード

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

ネスト

複数のフィルタを1つのブロックに適用することもできます。 単に同じ行に追加するだけです。

フィルタは逆順に適用されます。 まず初めに、最後に定義したフィルタが適用されます。 続いて最後から2番めに定義したフィルタに渡され、以降同様に処理します。

以下の例では、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>

* 上記コードを試すには下記モジュールをインストールしてください。

$ npm install --save jstransformer-cdata
$ npm install --save jstransformer-babel
$ npm install --save babel-preset-es2015

カスタムフィルタ

フィルタオプションを使って 独自フィルタを追加することができます。

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>