基于Node.js模板引擎教程-jade速學與實戰(zhàn)1
環(huán)境準備：
全局安裝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，如果標簽有內(nèi)容，可以直接寫在標簽的后面
然后在命令行用 jade -P index.jade 把index.jade文件編譯成index.html文件，-P( 把代碼整理成縮進格式的，如果不帶這個參數(shù)，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
div#box.box1.box2(class='box3')
#abc.box1.box2.box3
h3.box1.box2(class='abc def')
a(,
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
執(zhí)行編譯命令：jade -P <index2.jade> ghostwu.html 把index2.jade編譯成ghostwu.html文件，編譯之后的代碼如下：
<!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>
<div id="box" class="box1 box2 box3"></div>
<div id="abc" class="box1 box2 box3"></div>
<h3 class="box1 box2 abc def"></h3><a 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種寫法： 文本前面用豎線 ( | )，標簽后面跟內(nèi)容
三、注釋
jade模板代碼：
doctype html
html
head
meta(charset='utf8')
title jade模板引擎學習-by ghostwu
body
h3 單行注釋
// div.box.box2 這是一段div
h3 不會編譯到html文件的注釋
//- div#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> <!-- div.box.box2 這是一段div--> <h3>不會編譯到html文件的注釋</h3> <h3>塊注釋,也叫多行注釋</h3> <h3>這里不是注釋</h3> <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，塊注釋( 多行文本注釋 )，被注釋的內(nèi)容要另起一行
4，checkbox后面的顯示文字部分 要注意，不要挨著屬性的后面，要另起一行，寫在豎線的后面
四、jade模板實戰(zhàn)菜單
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:;') 網(wǎng)游小說
編譯( jade index.jade -P -w )之后的效果: -w: 實時監(jiān)控文件的修改，保存之后立刻刷新結果，也就是現(xiàn)代前端開發(fā)中很流行的熱加載技術
五、解釋變量
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:;') 網(wǎng)游小說
#{}： 可以解釋變量, toUpperCase():變量轉大寫
把json文件的數(shù)據(jù)在編譯的時候傳遞到模板,
新建data.json文件數(shù)據(jù)
{
"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文件的數(shù)據(jù)傳遞到模板
編譯后的結果：
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>JADE模板引擎學習-BY GHOSTWU</title> </head> <body> <h3>跟著ghostwu學習jade</h3> </body> </html>
以上這篇基于Node.js模板引擎教程-jade速學與實戰(zhàn)1就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了webpack打包nodejs項目,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
Nodejs開發(fā)grpc包含靜態(tài)和動態(tài)兩種代碼生成方式,靜態(tài)代碼生成需要提前通過.proto文件編譯生成JS源碼,而動態(tài)代碼生成則是在運行時指定IDL文件位置,實時生成源碼,兩者各有優(yōu)缺點,本文給大家介紹Nodejs開發(fā)grpc的實例代碼,感興趣的朋友一起看看吧2024-10-10
使用NodeJS編寫前端工具時,操作得最多的是文本文件,但遺憾的是,GBK編碼不在NodeJS自身支持范圍內(nèi),UTF8文件還可能帶有BOM,在讀取不同編碼的文本文件時,需要將文件內(nèi)容轉換為JS使用的UTF8編碼字符串后才能正常處理2023-11-11
這篇文章主要介紹了Node.js?Webpack常見的模式,Webpack的另一個核心是Plugin?，Plugin是可以用于執(zhí)行更加廣泛的任務如打包優(yōu)化資源管理?環(huán)境變量注入等，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了學習node.js 斷言的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
node.js中fs.stat與fs.fstat的區(qū)別詳解
fs.stat和fs.fstat他們都是用來獲取文件的狀態(tài)信息，下面這篇文章主要給大家介紹了關于node.js中fs.stat與fs.fstat區(qū)別的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
本文主要詳細介紹了node包管理工具，主要介紹了npm，cnpm及yarn，文中有詳細的代碼示例，對學習具有一定參考價值，需要的朋友可以參考一下2023-04-04
NodeJS中用來創(chuàng)建服務的模塊是http核心模塊，本篇就來介紹關于使用http模塊搭建HTTP服務器和客戶端的方法，以及模塊的基本 API，非常具有實用價值，需要的朋友可以參考下2018-10-10
在微信開發(fā)中有有付款就會有退款，這樣的功能非常常見，這篇文章主要介紹了node.js實現(xiàn)微信支付退款功能,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了Nodejs處理異常操作,結合實例形式分析了nodejs針對異常的捕獲與處理相關操作技巧,需要的朋友可以參考下2018-12-12