关于HTML预处理器Pug的使用文档
Pug的使用
Pug是一款健壯、靈活、功能豐富的HTML模板引擎,專門為 Node.js 平臺開發。Pug是由Jade 改名而來。
是一種通過縮進（表示標簽間的嵌套關系）的方式來編寫代碼的過程，在編譯的過程中，不需要考慮標簽是否閉合的問題。可以加快寫代碼速度，也為代碼復用提供了便捷。
1. 標簽
在默認情況下，在每行文本的開頭（或者緊跟白字符的部分）書寫這個 HTML 標簽的名稱。使用縮進來表示標簽間的嵌套關系，這樣可以構建一個 HTML 代碼的樹狀結構。
ulli Item Ali Item Bli Item C <ul><li>Item A</li><li>Item B</li><li>Item C</li> </ul>塊展開
為了節省空間， Pug 為嵌套標簽提供了一種內聯式語法。
a: img <a><img/></a>自閉合標簽
諸如 img, meta, 和 link 之類的標簽都是自動閉合的（除非您使用 XML 類型的 doctype）。 您也可以通過在標簽后加上 / 來明確聲明此標簽是自閉合的，但請您僅在明確清楚這是在做什么的情況下使用。
foo/ foo(bar='baz')/ <foo/> <foo bar="baz" />2. 屬性
標簽屬性和 HTML 語法非常相似，但它們的值就是普通的 JavaScript 表達式。您可以用逗號作為屬性分隔符，不過不加逗號也是允許的。
a(href='baidu.com') 百度 a(class='button' href='baidu.com') 百度 a(class='button', href='baidu.com') 百度上述代碼相當于
<a href="baidu.com">百度</a> <a class="button" href="baidu.com">百度</a> <a class="button" href="baidu.com">百度</a>類可以使用 .classname 語法來定義
ID 可以使用 #idname 語法來定義
如果您的屬性名稱中含有某些奇怪的字符，并且可能會與 JavaScript 語法產生沖突的話，請您將它們使用 "" 或者 '' 括起來。您還可以使用逗號來分割不同的屬性。這種屬性的例子有 Angular 2 中經常用到的 [] 和 ()。
div(class='div-class' (click)='play()') div(class='div-class', (click)='play()') div(class='div-class' '(click)'='play()')緊跟著標簽寫在括號里，用**,**隔開(不加逗號也是允許的)，class和id可以直接寫在元素后面，例如#id.class表示的就是一個div標簽
第一種情況下，(click) 會被當作函數調用而不是屬性名稱，這會導致一些稀奇古怪的錯誤。
第二三種，是一樣的效果
變量屬性
- var url = 'pug-test.html'; a(href='/' + url) 鏈接布爾值屬性
在 Pug 中，布爾值屬性是經過映射的，這樣布爾值（true 和 false）就能接受了。當沒有指定值的時候，默認是 true。
input(type='checkbox' checked) input(type='checkbox' checked=true) input(type='checkbox' checked=false) input(type='checkbox' checked=true.toString())樣式屬性
style（樣式）屬性可以是一個字符串（就像其他普通的屬性一樣）還可以是一個對象，這在部分樣式是由 JavaScript 生成的情況下非常方便。
a(style={color: 'red', background: 'green'}) <a style="color:red;background:green;"></a>類屬性
class（類）屬性可以是一個字符串（就像其他普通的屬性一樣）還可以是一個包含多個類名的數組，這在類是由 JavaScript 生成的情況下非常方便。
- var classes = ['foo', 'bar', 'baz'] a(class=classes) a.bang(class=classes class=['bing'])它還可以是一個將類名映射為 true 或 false 的對象，這在使用條件性的類的時候非常有用。
- var currentUrl = '/about' a(class={active: currentUrl === '/'} href='/') Home a(class={active: currentUrl === '/about'} href='/about') About&attributes
可以將一個對象轉化為一個元素的屬性列表
-var a= {'data-foo': 'bar'} div#foo(data-bar="foo")&attributes(a)這個對象不一定必須是一個字面值，它同樣也可以是一個包含值的對象
- var attributes = {}; - attributes.class = 'baz'; div#foo(data-bar="foo")&attributes(attributes)3. 純文本
標簽加空格
p 這是一個文本以<開頭的會被作為純文本
<html>bodyp 縮進 body 標簽沒有意義，p 因為 HTML 本身對空格不敏感。</html>在行前添加|管道符號
p| 管道符號總是在最開頭，| 不算前面的縮進。用 script 和 style 內嵌 JavaScript 和 CSS 代碼。為此，只需要在標簽后面緊接一個點 .，在標簽有屬性的時候，則是緊接在閉括號后面。
? 也可以在父塊內，創建一個“點”塊，跟在某個標簽的后面。
divp This text belongs to the paragraph tag.p.This text belongs to the div tag.4. 空格
Pug 保留符合以下條件的元素內的空格：
一行文本之中所有中間的空格；
在塊的縮進后的開頭的空格；
a ……用一個鏈接結束的句子 p一行末尾的空格；
純文本塊、或者連續的管道文本行之間的換行。
p|第一個空格|第二個|文字5. 代碼
用 - 開始一段不直接進行輸出的代碼
- for (var x = 0; x < 3; x++)li=x塊代碼
-var list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"] each item in listli= item6. 分支條件
case 是 JavaScript 的 switch 指令的縮寫
- var friends = 10 case friendswhen 0p 您沒有朋友when 1p 您有一個朋友defaultp 您有 #{friends} 個朋友像switch一樣傳遞
- var friends = 0 case friendswhen 0when 1p 您的朋友很少defaultp 您有 #{friends} 個朋友不同之處在于，在 JavaScript 中，傳遞會在明確地使用 break 語句之前一直進行。而在 Pug 中則是，傳遞會在遇到非空的語法塊前一直進行下去。
塊展開
- var friends = 1 case friendswhen 0: p 您沒有朋友when 1: p 您有一個朋友default: p 您有 #{friends} 個朋友7. 條件
- var test = 1 if testp 成功 else if test == 0p 失敗 elsep 其他Pug 同樣也提供了它的反義版本 unless
- var test = 0 if !testp 成功 - var test = 0 unless testp 成功這兩條的效果是一樣的
8. 嵌入
- var title = "the first title"; h1=title p #{title}這兩種方法都可以達到字符串嵌入效果， 但在 #{ 和 } 里面的代碼也會被求值，轉義，并最終嵌入到模板的渲染輸出中。
嵌入也可以嵌入pug的標簽 用#[ ]
p #[p.class 嵌入]9. 迭代
Pug 目前支持兩種主要的迭代方式： each 和 while。
您也可以使用 for 作為 each 的別稱。
這是 Pug 的頭等迭代方式，讓您在模板中迭代數組和對象更為簡便：
uleach val in [1, 2, 3, 4, 5]li= val您還可以在迭代時獲得索引值：
uleach val, index in ['〇', '一', '二']li= index + ': ' + valPug 還讓您能夠迭代對象中的鍵值：
uleach val, index in {1:'一',2:'二',3:'三'}li= index + ': ' + val用于迭代的對象或數組僅僅是個 JavaScript 表達式，因此它可以是變量、函數調用的結果，又或者其他的什么東西。
- var values = [1,2,3,4,5]; uleach val in values.length ? values : ['沒有內容']li= val - var values = []; uleach val in valuesli= valelseli 沒有內容您也可以使用 while 來創建一個循環：
- var n = 0 ulwhile n < 4li= n++10. 混入 Mixin
混入是一種允許您在 Pug 中重復使用一整個代碼塊的方法。
//- 定義 mixin listulli fooli barli baz//- 使用 +list +list它們會被編譯成函數形式，您可以傳遞一些參數：
mixin pet(name)li.pet= name ul+pet('貓')+pet('狗')+pet('豬')混入塊
把一整個代碼塊混入
mixin article(title).article.article-wrapperh1= titleif blockblockelsep 沒有提供任何內容。+article('Hello world')+article('Hello world')p 這是我p 隨便寫的文章+article(‘Hello world’)
+article(‘Hello world’)
p 這是我
p 隨便寫的文章
總結
以上是生活随笔為你收集整理的关于HTML预处理器Pug的使用文档的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 理财投资还要看贵金属
- 下一篇： HTML第七章作业