內插

Pug 提供各種內插需求的運算子。

字串內插，已轉譯

考慮以下範本的區域變數放置：title、author 和 theGreat。

<h1>On Dogs: Man's Best Friend</h1>
<p>Written with love by enlore</p>
<p>This will be safe: &lt;span&gt;escape!&lt;/span&gt;</p>

title 遵循評估範本區域變數的基本模式，但 #{ 和 } 之間的程式碼會經過評估、轉譯，並將結果緩衝到要呈現的範本輸出中。

這可以是任何有效的 Javascript 表達式，因此您可以盡情發揮。

<p>This is NOT MY INSIDE VOICE</p>

Pug 足夠聰明，可以找出表達式結束的位置，因此您甚至可以包含 } 而不用轉譯。

<p>No escaping for }!</p>

如果您需要包含逐字的 #{，您可以轉譯它，或使用內插。（這麼後設！）

<p>Escaping works with #{interpolation}</p>
<p>Interpolation works with #{interpolation} too!</p>

字串內插，未轉譯

您不必小心謹慎。您也可以將未轉譯的值緩衝到您的範本中。

<div class="quote">
  <p>Joel: <em>Some of the girls are wearing my mother's clothing.</em></p>
</div>

注意

請記住，如果未轉譯的內容來自您的使用者，將其緩衝到您的範本中可能會非常危險。絕不要信任使用者的輸入！

標籤內插

內插不僅適用於 JavaScript 值，也適用於 Pug。只要使用標籤內插語法，如下所示

<p>This is a very long and boring paragraph that spans multiple lines.
  Suddenly there is a <strong>strongly worded phrase</strong> that cannot be
  <em>ignored</em>.</p>
<p>And here's an example of an interpolated tag with an attribute:
  <q lang="es">¡Hola Mundo!</q></p>

您也可以透過在 Pug 中內嵌 HTML 標籤來達成相同的目的…但這樣寫 Pug 的意義何在？將內嵌 Pug 標籤宣告包在 #[ 和 ] 中，它就會經過評估並緩衝到其包含標籤的內容中。

空白控制

標籤內插語法對於內嵌標籤特別有用，其中標籤前後的空白很重要。

不過，Pug 預設會移除標籤前後的所有空白。查看以下範例

<p>If I don't write the paragraph with tag interpolation, tags like<strong>strong</strong>and<em>em</em>might produce unexpected results.</p>
<p>If I do, whitespace is <strong>respected</strong> and <em>everybody</em> is happy.</p>

請參閱純文字頁面中的空白區段，以進一步討論此主題。

內插

字串內插，已轉譯 ¶

字串內插，未轉譯 ¶

注意

標籤內插 ¶

空白控制 ¶

字串內插，已轉譯

字串內插，未轉譯

標籤內插

空白控制