本文主要為大家帶來一篇基於Node.js模板引擎教學-jade速學與實戰1。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
環境準備：
全域安裝jade: npm install jade -g
初始化項目package.json: npm init --yes
#安裝完成之後，可以使用jade --help 查看jade的命令列用法
一、在專案目錄下新建index.jade檔案
inde.jade程式碼：
doctype html html head meta(charset='utf-8') title body h3 欢迎学习jade
1，標籤依照html的縮排格式寫
2，標籤的屬性可以採用圓括號
3，如果標籤有內容，可以直接寫在標籤的後面
然後在命令列用jade -P index.jade 把index.jade檔案編譯成index.html文件，-P( 把程式碼整理成縮排格式的，如果不帶這個參數，index.html就是壓縮格式，不利於閱讀)
編譯之後的index.html程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>欢迎学习jade</h3> </body> </html>
二、class,id等其他屬性與多行文字的書寫
新index2.jade檔,程式碼如下：
doctype html html head meta(charset='utf8') title jade template engine body h1 jade template engine h1 jade template engine h1 jade template engine h1 jade template engine p#box.box1.box2(class='box3') #abc.box1.box2.box3 h3.box1.box2(class='abc def') a(href='http://www.taobao.com', target = 'blank') 淘宝 input(type='button', value='点我') br p. 1,this is <strong>hello</strong> 2,test 3,string p | 1, this is strong hello | 2, test | 3, test string
執行編譯指令：jade -P
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>jade template engine</title> </head> <body> <h1>jade template engine</h1> <h1>jade template engine</h1> <h1>jade template engine</h1> <h1>jade template engine</h1> <p id="box" class="box1 box2 box3"></p> <p id="abc" class="box1 box2 box3"></p> <h3 class="box1 box2 abc def"></h3><a href="http://www.taobao.com" rel="external nofollow" target="blank">淘宝</a> <input type="button" value="点我"><br> <p> 1,this is <strong>hello</strong> 2,test 3,string </p> <p> 1, this is<strong>hello</strong> 2, test 3, test string </p> </body> </html>
1，p#box.box1.box2(class='box3') 這種寫法是emmet的寫法#就是id屬性點(.)就是class屬性括號也是屬性寫法
2，#abc.box1 .box2.box3，全面沒有給元素標籤名稱，預設就是給p標籤加上這些屬性
3，多行文字的兩種寫法
p.
1,this is
hello
2,test
3,string
多行文字第1種寫法：p標籤後面要跟一個.裡面用原始的html標籤寫法
p
| 1, this is
strong hello
| 2, test
| 3, test string
多行文字第2種寫法： 文字前面用垂直線( | )，標籤後面跟內容
三、註解
jade範本程式碼：
doctype html html head meta(charset='utf8') title jade模板引擎学习-by ghostwu body h3 单行注释 // p.box.box2 这是一段p h3 不会编译到html文件的注释 //- p#box.box2.box3 h3 块注释,也叫多行注释 //- input(type='checkbox', name='meinv', value='仙女') 仙女 input(type='checkbox', name='meinv', value='御姐') 御姐 h3 这里不是注释 input(type='checkbox', name='meinv', value='仙女') | 仙女 input(type='checkbox', name='meinv', value='御姐') | 御姐
編譯之後:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>jade模板引擎学习-by ghostwu</title> </head> <body> <h3>单行注释</h3> <!-- p.box.box2 这是一段p--> <h3>不会编译到html文件的注释</h3> <h3>块注释,也叫多行注释</h3> <h3>这里不是注释</h3> <input type="checkbox" name="meinv" value="仙女">仙女 <input type="checkbox" name="meinv" value="御姐">御姐 </body> </html>
1，單行註解
// p.box.box2 這是一段p
2，只在jade中註釋，不會被編譯到html檔
//- p#box.box2.box3
3，塊註解( 多行文字註解)，被註解的內容要另起一行
4，checkbox後面的顯示文字部分要注意，不要挨著屬性的後面，要另起一行，寫在垂直線的後面
#四、jade模板實戰選單
doctype html
html
head
meta(charset='utf8')
title jade模板引擎学习-by ghostwu
style.
* { margin : 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; color: white; }
#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
#nav li { float:left; }
#nav li.active { background:red; }
#nav li:hover { background:#09f; }
#nav li a{ padding: 5px 10px; }
body
p#nav
ul
li.active
a(href='javascript:;') 首页
li
a(href='javascript:;') 玄幻小说
li
a(href='javascript:;') 修真小说
li
a(href='javascript:;') 都世小说
li
a(href='javascript:;') 科幻小说
li
a(href='javascript:;') 网游小说編譯( jade index.jade -P -w )之後的效果: -w: 即時監控檔案的修改，保存之後立刻刷新結果，也就是現代前端開發中很流行的熱加載技術
五、解釋變數
doctype html
html
head
meta(charset='utf8')
- var title = 'jade模板引擎学习-by ghostwu';
title #{title.toUpperCase()}
style.
* { margin : 0; padding: 0; }
li { list-style-type: none; }
a { text-decoration: none; color: white; }
#nav { width:980px; height: 34px; margin:20px auto; line-height:34px; background:#800;}
#nav li { float:left; }
#nav li.active { background:red; }
#nav li:hover { background:#09f; }
#nav li a{ padding: 5px 10px; }
body
p#nav
ul
li.active
a(href='javascript:;') 首页
li
a(href='javascript:;') 玄幻小说
li
a(href='javascript:;') 修真小说
li
a(href='javascript:;') 都世小说
li
a(href='javascript:;') 科幻小说
li
a(href='javascript:;') 网游小说#{}：可以解釋變數, toUpperCase():變數轉大寫
把json檔案的資料在編譯的時候傳遞到模板,
新data.json檔案資料
{
"content" : "跟着ghostwu学习jade"
}
index2.jade文件模板:doctype html
html
head
meta(charset='utf8')
- var title = 'jade模板引擎学习-by ghostwu';
title #{title.toUpperCase()}
body
h3 #{content}編譯指令：jade index2.jade -P -O data.json -O 指定一個json文件，把json檔案的資料傳遞到範本
編譯後的結果：
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>JADE模板引擎学习-BY GHOSTWU</title> </head> <body> <h3>跟着ghostwu学习jade</h3> </body> </html>
相關推薦：
以上是Node.js模板引擎jade實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
