學習教程
注意事項
- 如果想直接運行.jade文件，需要全局安裝 jade -> npm install jade –save-dev
- jade index.jade -P -w -O index.json 以上命令的意思是：將index.jade文件編譯成-P(格式化)、-w(實時監控)、-O index.json(引入index.json文件數據)的html文件
- 一定要使用空格來縮進(如果使用Tab鍵，很容易出問題)
- 建議使用p #{obj}的語法(p #{obj} #{obj}正常編譯)，而不是p= obj的語法(p= obj= obj會報錯)
- 關鍵詞前面一律不要加-(如:each、while、else…)
- 可以在sublime中安裝jade代碼高亮插件
代碼示例
基礎語法
doctype html html head meta(charset='utf-8') title test //樣式語法 style. body { background: red; } body div //id class 屬性語法 p#a.b(a='a', b=111) 222333 //換行文本語法 div. 111 222 //聲明變量 - var obj1 = {name: 'hvb'} - var job = '<span>worker</span>' //對象取值 安全轉義 設置屬性 p(id='obj1.name', class=obj1.name) #{obj1.name} #{age} #{job} !{job} \#{} - var obj2 = {a: 1, b: 2} - var obj3 = [11, 22] - var obj4 = [{name: 'hvb', age: [1, 2]}, {name: 'hvj', age: [3, 4]}] //for in 循環 - for (var k in obj2) p #{obj2[k]} //each 循環遍歷對象 each v, k in obj2 p #{k}: #{v} //each 循環遍歷數組 each v, k in obj3 p #{k}: #{v} //each 循環嵌套 each v1, k1 in obj4 p #{v1.name} //3元運算 each v2, k2 in v1.age span #{v2%2 ? v2+'奇數' : v2+'偶數'} - var num = 0 //while 循環 while num < 3 p #{num++} - var index = 2 //if 判斷 if index < 2 p 111 else if index >= 2 && index < 4 p 222 else p 333 //unless 判斷 unless index != 3 p 444 //switch 判斷 case index when 1 p 1 when 2 when 3 p 3 default p 0 // - var a = 'qqq' p(b=a) #{a} //mixin 傳參 設置屬性(繁瑣) mixin animate(name, pet) p(id=attributes.id, class=pet) this is #{name} #{attributes.id} +animate('dog', 'dogs')(id='aDog') //mixin 設置屬性(簡便) mixin animate2(name) p&attributes(attributes) #{name} +animate2('sheep')(id='sheep', class='sheep') //mixin 傳參(不固定個數) mixin animate3(...obj) p #{obj} +animate3(1, 2, 3) //mixin 嵌套 mixin cat(name, say) +animate(name) p it can #{say} +cat('cat', 'miao~') //mixin 代碼塊 mixin pig if block block p there are blocks else p no block +pig p one block p other block //定義繼承 block desc p this is block //引用繼承 block desc script. var a = 1; var b = 2; console.log(a+b)模版引用include和模版繼承extends使用示例
- index.jade(主頁模版) layout.jade(佈局模版) head.jade(頭部模版) foot.jade(尾部模版) 此4個文件爲同級目錄
head.jade
div.head p this is headfoot.jade
div.foot p this is footlayout.jade
doctype html html head meta(chatset="utf-8") body include head block content include footindex.jade
extends layout block content div.content p this is contentindex.html(由index.jade編譯)
<!DOCTYPE html> <html> <head> <meta chatset="utf-8"> </head> <body> <div class="head"> <p>this is head</p> </div> <div class="content"> <p>this is content</p> </div> <div class="foot"> <p>this is foot</p> </div> </body> </html>使用 node 編譯
var jade = require(‘jade’)
// compile 編譯
var html1 = jade.compile(‘p #{name}’, {})({name: ‘hvb’})
console.log(‘html1’, html1)// render 渲染
var html2 = jade.render(‘p #{name}’, {name: ‘hvj’})
console.log(‘html2’, html2)// rendFile 讀取文件渲染
var html3 = jade.renderFile(‘views/index.jade’, {name: ‘hvb’, pretty: true})
console.log(‘html3’, html3)
html2jade(html轉jade插件)
- 全局安裝 npm install html2jade -g
- 局部安裝 npm install html2jade –save-dev
- 保存網頁爲jade文件(這個有問題。如何解決請告知) html2jade http://www.baidu.com > baidu.jade
- 轉換本地文件 html2jade index.html > index.jade
使用 node 運行
var html2jade = require('html2jade') // html 轉成 jade html2jade.convertHtml('<div><p>jade</p></div>', {}, function(err, jade) { console.log(jade) })
