1.類名和id名
a.button
a(class="button")
a#button
a(id = "button")
編譯後：
如果前面沒指定標籤名，則預設div
2.屬性
用（）包裹，屬性值之間用逗號隔開。可實現根據條件設定屬性的語法形式
&atrributes() 更方便新增自定義屬性
3.文字內容
a(href="google.com",title ="google") hello world
多行文字：
p.******x
******
***或者
p|***xhey
|***x
|xx4.變數
-var htmldata ='srf
p# 或者 p=htmldata
p!=htmldata 或者 p!
5.注釋
jade支援兩種注釋：單行注釋和多行注釋。沒中注釋支援兩種模式：輸出原始檔和不輸出原始檔
//單行輸出
//-單行不輸出
多行輸出
多行不輸出
6. **嵌入
6.1 第一種方式 - ，特殊字元不會被轉義
- for(var x=0;x<3;x++)
li 編譯後：
6.2 第二種方式：使用= 特殊字元會被轉義
p= 'this code is !'
編譯之後：this code is <:escaped >:!
6.3第三種方式：使用 ！=
p!='this code is !'
編譯之後：this code is!
7. 插值語法
預先指定乙個位置，方便以後插入乙個新值，簡稱插值。
轉義字串插值 #{} ：-var thegreat = "escape!";
p this will be safe: #
不轉義字串插值 !{}：-var thegreat = "escape!";
p this be safe: !
標籤插值：p#[a(href ="jade-lang.com") jade]
編譯生成：
this will be safe:<:span>:escape!<:/span>:
this will be safe: escape!
jade
7.條件語句 if……else…… /unless
case ……when……
jade中沒有類似與break語法，所有條件預設一種輸出
8.遍歷語句
使用each對陣列和物件遍歷
//遍歷陣列
uleach val,index in ['zero','one','two']
li = index +':'+val
//遍歷物件
uleach val,index in
li = index +':' + val;
9. mixins 混合巨集 ,具有復用、解耦、可讀、可擴，可維護。建立混合巨集例項時，需要使用+識別符號
mixin list
ulli foo
li bar
li baz
+list
+list
混合巨集還可以用來傳遞引數
mixin pet(name)
li.pet = name
ul+pet('cat')
+pet('dog')
+pet('pig')
還可以用...識別符號表示不數量的引數。
需要替換混合巨集的某個部分，那麼就可以使用block識別符號來佔位
有關屬性的混合巨集：
mixin link(href, name)
a(href=href)&attributes(attributes)=name
+link('/foo','foo')(class = "btn")
編譯後：foo
10.includes
實現高度復用的另一種方式就是將**片段儲存到不同檔案中，然後再需要匯入的地方匯入。
11.extends
//- layout.jade
doctype html
html
head
block title
title default title
body
block content
//- index.jade
extends ./layout.jade
block title
title article title
block content
h1 my article
pug模板引擎
其實檔案結構啥的是為了業務邏輯更加清晰 index是主頁面,從default繼承.default裡面也include了includes檔案裡的內容,乙個是css樣式link,乙個是js的原始檔script extends layouts default block title title koa d...
pug新手學習
感覺自己有段時間沒有跟新了,唉,只是一直找不到可以寫的必要 其實我一直對pug特別感興趣的,安裝點我 記得全域性安裝pug和pug cli就行了 在webstorm配環境記得在前面加 p a img內聯式語法 input 自閉合 button.btn.btn tt.btn aaa type butt...
Pug模板繼承與拓展
pug 支援使用block和extends關鍵字進行模板的繼承 block代表乙個 塊 一 塊的替換 如下 便有三個 塊block scripts,block content,block foot layout.pug html head title 我的站點 block scripts scrip...