PJCHENder 未整理筆記

[Note] PUG 學習筆記(Learn to Use PUG)

2017-09-25

[Note] PUG 學習筆記(Learn to Use PUG)

@(HTML)[pug]

在行內使用 pug

String Interpolation

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

Tag Interpolation

1
2
3
4
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

多行註解

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

1
2
3
4
5
6
7
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 接著一個空格後的任何內容都會以純文字呈現:

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

Piped Text:適合較多文字

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

1
2
3
p
| The pipe always goes at the beginning of its own line,
| not counting indentation.
1
2
3
4
5
<!-- HTML -->
<p>
The pipe always goes at the beginning of its own line,
not counting indentation.
</p>

Block:適合用在程式碼區塊

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

1
2
3
4
5
script.
if (usingPug)
console.log('you are awesome')
else
console.log('use pug')
1
2
3
4
5
6
7
<!-- HTML -->
<script>
if (usingPug)
console.log('you are awesome')
else
console.log('use pug')
</script>

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

1
2
3
4
5
div
p This text belongs to the paragraph tag.
br
.
This text belongs to the div tag.
1
2
3
<!-- 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)
1
2
3
4
5
<p>這是一個元素區塊</p>

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

<p>這是一個元素區塊</p>
  • Pug 會保留所有元素內的空白
1
<p>在一個元素區塊內的空白都會被保留</p>

參考資料

PUG

掃描二維條碼,分享此文章