Skip to main content

[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

Last updated on