Code

コード

PugはテンプレートにインラインでJavaScriptを含めることができます。 非出力処理(Unbuffered)、出力処理(Buffered)、非エスケープ出力処理(Unescaped Buffered)の3種類があります。

非出力処理

非出力処理は、先頭に-を指定します。 この処理は、処理の内容を出力しません^*1。

*1 非出力処理は、forやcase等の処理を行いますが、処理内容を出力しないということです。

- for (var x = 0; x < 3; x++)
  li item

<li>item</li>
<li>item</li>
<li>item</li>

また、非出力処理をブロックで指定することも出来ます。

-
  var list = ["Uno", "Dos", "Tres",
          "Cuatro", "Cinco", "Seis"]
each item in list
  li= item

<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>

出力処理

出力処理は、先頭に=を指定します。 JavaScriptを評価して、結果を出力します^*2。 セキュリティ面から、最初にHTMLをエスケープします。

*2 出力処理は、処理内容をそのまま出力するということです。

p
  = 'This code is <escaped>!'

<p>This code is &lt;escaped&gt;!</p>

+を使ってインラインで書くことも出来ます。 JavaScriptで使える表現は全てサポートしています。

p= 'This code is' + ' <escaped>!'

<p>This code is &lt;escaped&gt;!</p>

非エスケープ出力処理

非エスケープ出力処理は、先頭に!=を指定します。 JavaScriptを評価して、結果を出力します。 HTMLをエスケープせずに出力します。

p
  != 'This code is <strong>not</strong> escaped!'

<p>This code is <strong>not</strong> escaped!</p>

+を使ってインラインで書くことも出来ます。 JavaScriptで使える表現は全てサポートしています。

p!= 'This code is' + ' <strong>not</strong> escaped!'

<p>This code is <strong>not</strong> escaped!</p>

注意

&attributesで適用された属性は自動エスケープされません。XSSを防ぐには、ユーザーの入力情報を全て適切にサニタイズする必要があります。 mixinからattributesが呼び出された場合は自動エスケープします。