nodejs學習（二） ---- express中使用模板引擎jade

系列教程，上一節教程  express+nodejs快速建立一個項目

在建立一個項目後，views目錄下的文件後綴爲 .jade 。

 

打開 index.jade，具體內容以下圖（忽略 header.jade 和 footer.jade，下面教程會一步步建立）

 

頁面解析出的樣子以下圖。徹底是html標籤

 

1、jade 模板引擎 介紹

　　模板引擎是一個庫，或者一個使用必定的規則或者語言來解釋數據並渲染視圖的框架。模板引擎處理過的最終結果是一個視圖頁面，也就是html頁面或者用戶圖形界面GUI。在MVC框架中，模板屬於view層。

　　jade是nodejs的模板引擎，採用空格縮進的規則。

　　

　　jade省略了html中尖括號。採用了嚴格的縮進格式，劃分了層次結構，提升了可閱讀性。

　　注：若是環境已經正確安裝，那麼大多數狀況下的錯誤都是縮進惹的禍，必定必定要保持一致的縮進格式，建議統一將 tab 鍵輸出爲空格，並採用 4 個空格做爲標準縮進。

 

2、在express中使用jade

　　在app.js中能夠設置使用的模板，能夠設置爲 jsx/html

　　

 

3、元素及屬性

　　

　　1）標籤

 　　在jade中建立列表，標籤無需閉合。

　　 自閉和標籤jade會自動檢測，也能夠手動添加閉合標籤。例：img(src="images/1.jpg")  等同於  img(src="images/1.jpg")/

　　 元素包含的文本內容：跟在屬性的後面、或者等號後。

//標籤無需閉合
ul
    li item1
    li item2
    li item3

//自閉和標籤img
div
    img(src="images/1.jpg")/
div
    img(src="images/1.jpg")
    
//元素包含的文本
div
    a(href="https://www.baidu.com") baiduwenku

div='you are beautifull,i like'

　　生成的 HTML：

<ul>
　　<li>item1</li>
　　<li>item2</li>
　　<li>item3</li>
</ul>
<div>
　　<img src="images/1.jpg">
</div>

<div>
　　<img src="images/1.jpg">
</div>

<div>
　　<a href="https://www.baidu.com">baiduwenku</a>
</div>
<div>you are beautifull,i like</div>

 

　　2)屬性

　　jade屬性統一放在括號內，用逗號或者空格隔開。

　　布爾屬性，若將值設爲false，則不會加入該屬性。

　　屬性值能夠用「{}」包裹，不只能夠寫

//普通屬性
input(type='checkbox', checked)
input(type='checkbox' name='agreement' checked )

//布爾屬性
button(disabled=true) click me
button(disabled=false) click me

　　解析爲

<input type="checkbox" checked="">
<input type="checkbox" name="agreement" checked="">
<button disabled="">click me</button>
<button>click me</button>

 

　　3)文本

 　　「|」做用域只有一行。「|」 告訴jade模板解析器，將後面的內容原樣輸出。因此，「|」後面能夠包含元素。

div
    a(href="http://google.com") Google
    | If you think you can, you can.

p 文本若是太長，或者須要換行，須要在下一行加上 「|」,
　　|我是新的一行

　　解析爲

<div>
    <a href="http://google.com">Google</a>
    If you think you can, you can.
</div>
<p>文本若是太長，或者須要換行，須要在下一行加上 「|」,我是新的一行</p>

　　

　　「.」原樣輸出多行文本。通常填充<script>或<style>元素包含的內容

script(type="text/javascript").
    window.onload = function(){
        console.log('hello jade');
    };

　　解析爲

<script type="text/javascript">
    window.onload = function(){
        console.log('hello jade');
    };
</script>    

 

　　「#[ ]」在一段純文本中插入jade語句

p My name is #[b doudou]

　　解析爲

<p>My name is <b>doudou</b></p>

 

4、jade中使用Javascript代碼

　　嵌入的javascript代碼必須以「-」開頭。

-for(var i=0;i<3;i++)
      .divclass this is div element

 

　　解析爲

<div>This is div element</div>
<div>This is div element</div>
<div>This is div element</div>

 

 

5、jade語法

　　jade自帶語法，語句前不須要「-」。

　　each...in   --遍歷

　　while         --遍歷

　　if                --條件判斷

//each...in
-var ary= ['one','Two','Three'];
each item,index in ary
    div= index + ": "+item

//while
-var n = 0;
while n<3
    div= n++

//if
-var b0 = false,b1=true;
if b0
    div b0 is true
else if b1
    div b1 is true
else
    div all are false

 //case
-var gender=0;
case gender
    when 0
        div you are a girl
    default
        div you are a boy

　　解析爲

<!--each...in-->
<div>0: one</div>
<div>1: Two</div>
<div>2: Three</div>


<!--while-->
<div>0</div>
<div>1</div>
<div>2</div>


<!--if-->
<div>b1 is true</div>


<!--case-->
<div>you are a girl</div>

 

6、複用塊

　　jade複用塊用關鍵字 「mixin」 定義，「+」 調用。

　　複用塊 隱含參數 "block" 的使用

　　"block"  隱含參數  「attributes」。這裏用的是 「!=」，而不是 「=」。若是用「=」，表示後面的內容會被轉碼；「!=」表示不會被轉碼

//複用塊 可接收參數
mixin showName(name)
    div= name
+showName('test')
+showName('huang dou dou')

//隱含參數  block(通用塊) 參數
mixin showNameBlock(name)
    div= name
    if block
        block
+showNameBlock('HCH')
    div Welcome to here

//隱含參數 attributes
mixin showNameAttr(name)
    div(title!=attributes.title)= name
+showNameAttr('HCH')(title='this is your name')

　　解析爲

<!--複用塊 可接收參數-->
<div>test</div>
<div>huang dou dou</div>

<!--隱含參數  block(通用塊) 參數-->
<div>HCH</div>
<div>Welcome to here</div>

<!--隱含參數 attributes-->
<div title="this is your name">HCH</div>

 

7、填充數據

　　 「=」 、「!=」 、「#{}」、「!{}」 。

　　 「=」、「#{}」 會對數據進行轉碼。 「!=」 、「!{}」 不會轉碼

//數據填充
- var str = 'my name is <b>CYF</b>';
div= str
div #{str}

//數據填充
- var str = 'my name is <b>CYF</b>';
div!= str
div !{str}

　　解析爲

<!--數據填充-->
<div>my name is &lt;b&gt;CYF&lt;/b&gt;</div>
<div>my name is &lt;b&gt;CYF&lt;/b&gt;</div>

<!--數據填充-->
<div>my name is <b>CYF</b></div>
<div>my name is <b>CYF</b></div>

 

8、模板包含、模板引用

　　使用 include 在模板中包含其餘模板的內容。就像PHP

　　使用extends 引用外部的jade模塊

 

　　head.jade

head
    title 個人網站

 

　　layout.jade

doctype html
html
　　include head
    meta(charset="UTF-8")
    meta(name="viewport",content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
    link(rel='stylesheet', href='/stylesheets/style.css')
    body
        block content

　

　index.jade

extends layout

block content
    p welcome to my express

 

 

解析爲

<html>
<head>

　　<title>個人網站</title>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
　　<link rel="stylesheet" href="/stylesheets/style.css">

</head> <body> 　　<p>welcome to my express</p> </body></html>