在還沒接觸 pug 之前對於手刻 html 也早就習以為常,覺得沒什麼問題,習慣使用 pug 之後才意識到寫 html 也可以很輕鬆,pug 簡化了 html 的 start end tag 部份,使用斷行及縮排來構建版面,使 code 看起來更為簡單乾淨。
預設樣式
預設的樣式為 div,如果有內文則以一個空格連結
div 我是一段文字
也可以加上 class 或 id 名稱,當標籤使用 div 時,如果帶有 class 或 id 名稱 div 可以省略
div#container 內文 #container 內文 #container.wrap 內文
使用 div 以外標籤的狀況,階層使用斷行加縮排來排版
h5.title 標題 span.label 內文
有 attribute 的部份使用括號包覆,與標籤或 class 間無需空格
img(src="images/abc.jpg") 內文
註解
單行的註解使用雙斜線
// 我是一行註解
區塊註解使用斷行加縮排
// 我是多行註解 我是多行註解
不輸出的區塊註解
//- 我是不會被輸出的註解