Jade是一款基于html的html模板引擎,采用JavaScript實(shí)現(xiàn),可以方便的在node.js、Yeoman等框架中使用补胚，已改名為pug
1.全局安裝
npm install jade -g
2. 創(chuàng)建文件，后綴名為.jade
3.編譯jade文件為html
jade test.jade
jade -P test.jade //不壓縮html
jade -P -w test.jade //監(jiān)聽文件變化，即生成html
jade語法
1.通過縮進(jìn)關(guān)系,代替以往html的層級(jí)包含關(guān)系,注意要統(tǒng)一使用tab或者空格縮進(jìn),不要混用
2.內(nèi)聯(lián)書寫層級(jí) a: img
3.style屬性: div(style={width:"200px",color:"red"})
4.使用"-"來定義變量,使用"="把變量輸出到元素內(nèi)
通過 #{variable} 插入相應(yīng)的變量
html 元素屬性: 在標(biāo)簽右邊通過括號(hào)包含(可以通過判斷添加)
文本: 通過在文本前添加豎線"|"可讓jade原樣輸出內(nèi)容在html標(biāo)簽,標(biāo)記后,通過空格隔開文本內(nèi)容
注釋: 可以通過雙斜杠進(jìn)行注釋, jade注釋有三種:可以分別對(duì)應(yīng)輸出html注釋,多行html注釋,塊級(jí)html注釋
循環(huán): -each val in [1,2,3]
判斷語句: if else / case when default
mixin: 混合模式
左邊jade / 生成右邊html
