[note] Pug

在行內使用 pug

String Interpolation

- var msg = "not my inside voice";
p This is #{msg.toUpperCase()}

Tag Interpolation

p.
  This is a very long and boring paragraph that spans multiple lines.
  Suddenly there is a #[strong strongly worded phrase] that cannot be
  #[em ignored].

interpolation @ PugJS

註解方式

單行註解

• 使用 // 註解時，會轉換成 <!-- -->，稱作 buffered comments。
• 使用 //- 註解時，在 HTML 上不會呈現，稱作 unbuffered comments

多行註解

使用方式和上面一樣，只是在 // 和 //- 後方用縮排。

body
  //-
    Comments for your template writers.
    Use as much text as you want.
  //
    Comments for your HTML readers.
    Use as much text as you want.

直接使用 HTML 註解

由於在 PUG 中所有以 < 開頭的文字都會被當作純文字，因此一般的 HTML comment <!-- --> 也可以使用來當作註解。

Comments @ Pug

Plain Text 純文字

Inline：適合少量文字

在 tag 接著一個空格後的任何內容都會以純文字呈現：

p This is plain old <em>text</em> content.

<!-- HTML -->
<p>This is plain old <em>text</em> content.</p>

Piped Text：適合較多文字

在 tag 下一行縮排後使用 | 後的任何內容會以純文字呈現：

p
    | The pipe always goes at the beginning of its own line,
    | not counting indentation.

<!-- HTML -->
<p>The pipe always goes at the beginning of its own line, not counting indentation.</p>

Block：適合用在程式碼區塊

在 tag 或在帶有屬性的 tag 後的括號()後加上 .：

script.
    if (usingPug)
      console.log('you are awesome')
    else
      console.log('use pug')

<!-- HTML -->
<script>
  if (usingPug) console.log('you are awesome');
  else console.log('use pug');
</script>

也可以在建立一個 dot block 來放純文字：

div
    p This text belongs to the paragraph tag.
    br
    .
        This text belongs to the div tag.

<!-- HTML -->
<div>
  <p>This text belongs to the paragraph tag.</p>
  <br />This text belongs to the div tag.
</div>

空白（Whitespace Control）

Whitespace Control @ Pug Official

在將 Pug 編譯成 HTML 的時候：

• Pug 會移除所有的縮排（indentation）、元素與元素間的空白（whitespace）

<p>這是一個元素區塊</p>

<!-- 元素區塊和元素區塊間的空白會被過濾掉 -->

<p>這是一個元素區塊</p>

• Pug 會保留所有元素內的空白

<p>在一個元素區塊內的空白都會被保留</p>

參考資料

PUG