jade模板是MVC模型中的V--視圖,可以編寫網頁文件,元素和HTML相同,基本使用就是將html中的標籤尖括號去掉,如:
HTML:<p>這是HTML中的寫法</p>
jade:p 這是jade中的寫法
上述兩種寫法的顯示效果相同
但是在jade中沒有結束標籤,瀏覽器或者說編譯器(從jade編譯輸出成HTML)是怎麼判斷每個標籤的結束範圍呢
jade中採用的方法是縮進,子標籤比父標籤向後縮進兩個空格,同一級別的縮進表示同一級別的元素
jade中的縮進很重要,而且容易出錯,使用時要謹慎處理縮進
如:
doctype html
html
head
title 主頁
meta(charset='utf-8')
body
h1 This is login
上述代碼會自動編譯成
<!DOCTYPE html>
<html>
<head>
<title>主頁</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is login</h1>
</body>
</html>
include例子如下:
bodey.jade文件內容:
doctype html
html
include ./header.jade
body
h1 This is body
header.jade文件內容如下:
head
title jade-include測試
meta(charset='utf-8')
生成的HTML文件如下:
<!DOCTYPE html>
<html>
<head>
<title>jade-include測試</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is body</h1>
</body>
</html>
內容沒錯,注意代碼中的縮進,在body.jade中使用include時,include是和body同級,因爲此時直接把header.jade中的內容拿過來放在include位置(保持原有縮進)處,head會和body同級,但是在使用中如果把include頂個和html同級,在header文件中把所有的內容向後縮進兩格,這樣的結果是不行的,編譯會出錯,不知道爲什麼
另外在使用include時還有一個問題,就是吧head標籤和html放在一起的時候,具體例子如下:
header中的內容:
doctype html
html
head
title jade-include測試
meta(charset='utf-8')
body中的內容:
include ./header.jade
body
h1 This is body
理論上講此時body和head同級,會出現理想中的排版順序,就像上面的正常順序一樣,但是最後生成的HTML如下:
<!DOCTYPE html>
<html>
<head>
<title>jade-include測試
<body>
<h1>This is body</h1>
</body>
</title>
<meta charset="utf-8">
</head>
</html>
很明顯不對,不是自己想要的,所以此方法不能取,但是爲什麼我也不知道,另外還有一種就是按照上面的錯誤來看是把body寫成head的子元素了,那我們吧body中的標籤向前取消兩個空格縮進,看一下效果
<!DOCTYPE html>
<html>
<head>
<title>jade-include測試</title>
<meta charset="utf-8">
</head>
</html>
<body>
<h1>This is body</h1>
</body>
此時body又編程和html同級別的元素,所以此方法也不能用
entends:
我們使用entends和block語法試試
hearder中內容如下:
doctype html
html
head
title 主頁
meta(charset='utf-8')
block body
body中的內容:
extends header.jade
block body
body
h1 This is login
注意看語法的使用方法其中的縮進,header中block放在和head同一級別中,因爲在body中的第一個標籤是body,是要和head同級的
在body中block放在頂格位置,因爲此位置是要把整個header中的元素拿過來放在這,之後就是html第一級,head和body同爲第二級
extends 相當於是導入此header文件到body中
最後生成的HTML內容如下:
<!DOCTYPE html>
<html>
<head>
<title>主頁</title>
<meta charset="utf-8">
</head>
<body>
<h1>This is login</h1>
</body>
</html>