在還沒接觸 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") 內文

 

註解

單行的註解使用雙斜線

// 我是一行註解

 

區塊註解使用斷行加縮排

//
  我是多行註解
  我是多行註解

 

不輸出的區塊註解

//- 我是不會被輸出的註解

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料