- jade環境搭建
- jade標簽寫法
- jade注釋
- jade添加類名、id、屬性
- jade添加腳本，css
- jade變量
- jade多行文本顯示
- jade流程代碼:for,each,while
- jade流程代碼：if - else - unless ，case
- 可重用的jade塊Mixins
- 模板繼承（extends）
- 模板包含（include）
jade環境搭建
打開WebsStorm9.0.3，File—New Project…，project type選擇Node.js Express App，新建項目jadeTest，打開Terminal，輸入npm install 安裝程序需要的依賴項，安裝成功后，環境就搭好了，打開app.js文件，找到jade模板引擎的引用代碼如下
1 var express = require('express'); 2 var app = express(); 3 app.set('views', path.join(__dirname, 'views')); 4 app.set('view engine', 'jade');
接下來，我們開始學習jade語法，程序的默認頁面是index.jade,打開index.jade,然后在Terminal中輸入以下命令：
jade -P -w index.jade
命令行：jade -P -w index.jade 實時監控jade文件，自動編譯為不壓縮的html文件，方便實時查看寫的jade代碼和html的比較
jade標簽寫法
index.jade
1 doctype html 2 html 3 head 4 title jade標簽寫法 5 body 6 P 文檔聲明：doctype html 7 P 標簽省去尖括號，元素和文本用空格間隔 8 div 9 P 元素的父子關系用空格縮進表示
編譯成html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jade學習</title> 5 </head> 6 <body> 7 <P>文檔聲明：doctype html</P> 8 <P>標簽省去尖括號，元素和文本用空格間隔</P> 9 <div> 10 <P>元素的父子關系用空格縮進表示</P> 11 </div> 12 </body> 13 </html>
jade注釋
單行注釋： //
編譯成html：<!-- 單行注釋 -->
1 doctype html 2 html 3 head 4 title jade學習 5 body 6 p 單行注釋:// 7 //div 8 p 測試單行注釋
編譯成html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jade學習</title> 5 </head> 6 <body> 7 <p>單行注釋://</p> 8 <!--divp 測試單行注釋 9 --> 10 </body> 11 </html>
塊注釋：//
1 doctype html 2 html 3 head 4 title jade學習 5 body 6 p 塊注釋：// 7 // 8 div 9 p 測試塊注釋
編譯成html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jade學習</title> 5 </head> 6 <body> 7 7 <p>塊注釋：//</p> 8 <!-- 9 div 10 p 測試塊注釋 11 --> 12 </body> 13 </html>
非緩存注釋：注釋的內容不會顯示在編譯的html中
1 doctype html 2 html 3 head 4 title jade學習 5 body 6 P 非緩存注釋/塊注釋：//- 7 //-div 8 p 測試多行注釋 9
編譯成html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jade學習</title> 5 </head> 6 <body> 7 <P>非緩存注釋/塊注釋：//-</P> 8 </body> 9 </html>
jade添加類名、id、屬性
1 doctype html 2 html 3 head 4 title jade學習 5 body 6 div.className#idName 7 p.className 類名加點緊跟元素后面或者id后面，不用加空格，后面緊跟的文本屬性要加空格 8 p#idTest id名加#緊跟元素后面或者類后面，不用加空格，后面緊跟的文本要加空格 9 #testDiv div如果有className/id，可以省略元素div 10 .classDiv div如果有className/id，可以省略元素div 11 h1 屬性添加 12 .className 13 p 屬性放在小括號里，緊跟元素/id/ClassName后面，屬性之間用逗號隔開,id或class也可以放在括號內 14 input.classP(id='content',type='text',value="添加屬性")
編譯成html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jade學習</title> 5 </head> 6 <body> 7 <div id="idName" class="className"> 8 <p class="className">類名加點緊跟元素后面或者id后面，不用加空格，后面緊跟的文本屬性要加空格</p> 9 <p id="idTest">id名加#緊跟元素后面或者類后面，不用加空格，后面緊跟的文本要加空格</p> 10 </div> 11 <div id="testDiv">div如果有className/id，可以省略元素div</div> 12 <div class="classDiv">div如果有className/id，可以省略元素div</div> 13 <h1>屬性添加</h1> 14 <div class="className"> 15 <p>屬性放在小括號里，緊跟元素/id/ClassName后面，屬性之間用逗號隔開,id或class也可以放在括號內</p> 16 <input id="content" type="text" value="添加屬性" class="classP"> 17 </div> 18 </body> 19 </html>
Jade添加腳本，css
1 doctype html 2 html 3 head 4 meta 5 title #{title} 6 style. 7 .className{ 8 background: red; 9 width:200px; 10 } 11 #id1{ 12 background: blue; 13 width: 200px; 14 } 15 script. 16 var s='test'; 17 body
編譯成html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta> 5 <title></title> 6 <style> 7 .className{ 8 background: red; 9 width:200px; 10 } 11 #id1{ 12 background: blue; 13 width: 200px; 14 } 15 </style> 16 <script>var s='test';</script> 17 </head> 18 <body> 19 </body> 20 </html>
jade變量
服務器端代碼：以 '-'開頭的代碼
變量的引用方式：
#{表達式}
= 表達式
!{表達式}
!= 表達式
1 doctype html 2 html 3 head 4 title jade學習 5 body 6 -var test="以'-'開頭寫服務器端代碼" 7 p #{test} 8 -var str='test1' ; 9 -var strTest='<div><p>變量調用</p></div>'; 10 p #{str.toUpperCase()} 11 p= str 12 //轉義引用，(#{表達式} 等價於 =表達式) 13 p #{strTest} 14 p= strTest 15 //非轉義引用，(!{表達式}等價於 !=表達式) 16 p !{strTest} 17 p!= strTest
編譯成html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jade學習</title> 5 </head> 6 <body> 7 <p>以'-'開頭寫服務器端代碼</p> 8 <p>TEST1</p> 9 <p>test1</p> 10 <!--轉義引用，(#{表達式} 等價於 =表達式)--> 11 <p><div><p>變量調用</p></div></p> 12 <p><div><p>變量調用</p></div></p> 13 <!--非轉義引用，(!{表達式}等價於 !=表達式)--> 14 <p><div><p>變量調用</p></div></p> 15 <p><div><p>變量調用</p></div></p> 16 </body> 17 </html>
直接顯示#{title}表達式引用方法：
p \#{title}
p \!{title}
編譯成html
<p>#{title}</p>
<p>!{title}</p>
注意：
input(value=data),data有值就顯示值，沒有值就什么也不顯示
input(value=#{data})data有值就顯示值，沒有值顯示undifined
模板里的數據優先級高於外部傳進來的數據
可以傳遞json數據
可以對表達式進行進行操作，例如：
1 -var c='test1' ; 2 p #{c.toUpperCase()}
編譯成html為：
<p>TEST1</p>
jade多行文本顯示
多行文本顯示有2中方式
1.標簽后邊緊跟點
p#id2.className.
22222
<strong>6666</strong>
3333
<span>888</span>
4444
555
2.標簽后面的文本以|開頭
p#id3
|222
strong 888
|3333
span 9999
|444
jade流程代碼:for,each,while
for
遍歷數組的for
-var arry=[1,3,5,7,9]; ul -for (var i=0;i<arry.length;i++) li= arry[i]
編譯成html
<ul> <li>1</li> <li>3</li> <li>5</li> <li>7</li> <li>9</li> </ul>
遍歷對象屬性的for
-var json={name:'tom',age:9,phone:13222222222};
-for(var j in json)
p= json[j]
編譯成html
<p>tom</p> <p>9</p> <p>13222222222</p>
each
遍歷數組
-var arry=[1,3,5,7,9];
-each value,index in arry
p #{index}:#{value}
each item in arry
p= item
編譯成html
<p>0:1</p> <p>1:3</p> <p>2:5</p> <p>3:7</p> <p>4:9</p>
<p>1</p>
<p>3</p>
<p>5</p>
<p>7</p>
<p>9</p>
遍歷json數據
-var json={name:'tom',age:9,phone:13222222222};
ul
-each value,key in json
li #{key}:#{value}
編譯成html
<ul> <li>name:tom</li> <li>age:9</li> <li>phone:13222222222</li> </ul>
while
-var j=0;
ul
while j<3
li= j++
編譯成html
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
jade流程代碼：if - else - unless ，case
if - else - unless
-var arry=['hello','world','good','test']
if arry
if(arry.length>2)
div
p= arry[0] +':if'
p= arry[1]+':if'
else
p 數組長度等於小於2
else
p 數組為空
unless arry.length<=2
div
p= arry[0]
p= arry[1]
編譯成html
<div> <p>hello:if</p> <p>world:if</p> </div> <div> <p>hello</p> <p>world</p> </div>
注: unless 相當於非，unless false 才執行代碼
case
case相當於switch
-var arry=['hello','world','good','test']
each item in arry
case item
when 'hello'
when 'world'
p hello Tom!
when 'good': P Good News
default
P #{item}
編譯成html
<p>hello Tom!</p> <p>hello Tom!</p> <P>Good News</P> <P>test</P>
注意：
when 'world' p hello Tom!
或者 when 'good': P Good News
效果是一樣的
可重用的jade塊Mixins
1.Mixins簡單說就是代碼塊復用
//定義代碼塊
mixin bags
div.allBags
p 書包
p 文具包
p 公文包
p 工具包
//調用
+bags
編譯成html
<!--定義代碼塊-->
<!--調用-->
<div class="allBags">
<p>書包</p>
<p>文具包</p>
<p>公文包</p>
<p>工具包</p>
</div>
2.可以為mixin定義參數
//參數個數確定
mixin parameters(name,age)
p #{name}今年#{age}歲
+parameters('小明',6)
+parameters('小強',8)
//參數個數不確定
mixin parameterList(name,...items)
h1= name
ul
each nn in items
li= nn
+parameterList('小明','早晨讀書','中午練書法','下午練拳')
編譯成html
<!--參數個數確定-->
<p>小明今年6歲</p>
<p>小強今年8歲</p>
<!--參數個數不確定-->
<h1>小明</h1>
<ul>
<li>早晨讀書</li>
<li>中午練書法</li>
<li>下午練拳</li>
</ul>
3.mixin可以嵌套使用
mixin bags
div.allBags
p 書包
p 文具包
p 公文包
p 工具包
//調用
mixin getBags(name)
P(class= name) 請列舉包的種類
+bags
+getBags('back')
編譯成html
<P class="back">請列舉包的種類</P> <div class="allBags"> <p>書包</p> <p>文具包</p> <p>公文包</p> <p>工具包</p> </div>
4.mixin可以從外部傳入代碼塊
mixin bags
div.allBags
p 書包
p 文具包
p 公文包
p 工具包
//block:外部傳入的代碼塊關鍵字
if block
block
+bags
h1 外部代碼塊
div
p 外部代碼塊1
p 外部代碼塊2
編譯成html
<div class="allBags"> <p>書包</p> <p>文具包</p> <p>公文包</p> <p>工具包</p> <!--block:外部傳入的代碼塊關鍵字--> <h1>外部代碼塊</h1> <div> <p>外部代碼塊1</p> <p>外部代碼塊2</p> </div> </div>
5.mixin支持傳遞屬性
mixin GetAttrs(name1,name2) h1 傳遞屬性的方法1 p(class!=attributes.class)= name1 h1 傳遞屬性的方法2 p&attributes(attributes)= name2 +GetAttrs('方法1','方法2')(class='redColor',id='passId')
編譯成html
<h1>傳遞屬性的方法1</h1> <p class="redColor">方法1</p> <h1>傳遞屬性的方法2</h1> <p id="passId" class="redColor">方法2</p>
模板繼承（extends）
繼承者里如果與模板里有同名的block，繼承者里同名的block會覆蓋掉模板里的block
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
index7.jade
//layout.jdae與index7.jade是同一個目錄下
extends layout
block content
p 繼承模板layout
index7.jade編譯成html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<p>繼承模板layout</p>
</body>
</html>
模板包含（include）
把很多塊引用到一個頁面中
index8.jade
doctype html
html
head
include ../templates/head
body
p 引入靜態的jade css
include ../templates/css
p 引入html文件
include ../templates/content.html
P 引入頁腳模塊
include ../templates/footer
編譯成html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<p>引入靜態的jade css</p>
<style>
p{
background:blue;
}
</style>
<p>引入html文件</p><div>引用html</div>
<P>引入頁腳模塊</P>
<div>頁腳模塊</div>
</body>
</html>
下面這些文件的位置是在index8.jade上一級目錄templates中
head.jade
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
css.jade
style.
p{
background:blue;
}
content.html
<div>引用html</div>
footer.jade
div 頁腳模塊