溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“基于Node.js模板引擎jade的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“基于Node.js模板引擎jade的示例分析”這篇文章吧。
環境準備：
全局安裝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 h4 歡迎學習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> <h4>歡迎學習jade</h4> </body> </html>
二、class,id等其他屬性與多行文本的書寫
新建index2.jade文件,代碼如下：
doctype html html head meta(charset='utf8') title jade template engine body h2 jade template engine h2 jade template engine h2 jade template engine h2 jade template engine div#box.box1.box2(class='box3') #abc.box1.box2.box3 h4.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 <index2.jade> ghostwu.html 把index2.jade編譯成ghostwu.html文件，編譯之后的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>jade template engine</title> </head> <body> <h2>jade template engine</h2> <h2>jade template engine</h2> <h2>jade template engine</h2> <h2>jade template engine</h2> <div id="box" class="box1 box2 box3"></div> <div id="abc" class="box1 box2 box3"></div> <h4 class="box1 box2 abc def"></h4><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，div#box.box1.box2(class='box3') 這種寫法是emmet的寫法 #就是id屬性 點(.)就是class屬性 括號也是屬性寫法
2，#abc.box1.box2.box3，全面沒有給元素標簽名稱，默認就是給div標簽加上這些屬性
3，多行文本的兩種寫法
p.
1,this is
<strong>hello</strong>
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 h4 單行注釋 // div.box.box2 這是一段div h4 不會編譯到html文件的注釋 //- div#box.box2.box3 h4 塊注釋,也叫多行注釋 //- input(type='checkbox', name='meinv', value='仙女') 仙女 input(type='checkbox', name='meinv', value='御姐') 御姐 h4 這里不是注釋 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> <h4>單行注釋</h4> <!-- div.box.box2 這是一段div--> <h4>不會編譯到html文件的注釋</h4> <h4>塊注釋,也叫多行注釋</h4> <h4>這里不是注釋</h4> <input type="checkbox" name="meinv" value="仙女">仙女 <input type="checkbox" name="meinv" value="御姐">御姐 </body> </html>
1，單行注釋
// div.box.box2 這是一段div
2，只在jade中注釋，不會被編譯到html文件
//- div#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
div#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
div#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
h4 #{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> <h4>跟著ghostwu學習jade</h4> </body> </html>
以上是“基于Node.js模板引擎jade的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
