Jade 模板引擎使用

時間  2020-03-24
標籤 jade 模板 引擎 使用 欄目 Node.js 简体版
原文   原文鏈接

轉載自http://www.lellansin.com/jade-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E4%BD%BF%E7%94%A8.html

在 Express 中調用 jade 模板引擎

1
2
3
4
5
6
7
8
9
10
11
12
13
var express = require( 'express' );
var http = require( 'http' );
var app = express();
app.set( 'view engine' , 'jade' ); // 設置模板引擎
app.set( 'views' , __dirname);  // 設置模板相對路徑(相對當前目錄)
 
app.get( '/' , function (req, res) {
     res.render( 'test' ); // 調用當前路徑下的 test.jade 模板
})
 
var server = http.createServer(app);
server.listen(3002);
console.log( 'server started on http://127.0.0.1:3002/' );

test.jadejavascript

1
p hello jade

其上的 jade 模板會被解析成css

1
<p>hello jade</p>

雖然日常咱們修改 node.js 代碼以後須要重啓來查看變化，可是 jade 引擎不在此列，由於是動態加載的，因此咱們修改完 jade 文件以後能夠直接刷新網頁來查看效果的。html

若是文本比較長可使用java

1
2
3
p
   | foo bar baz
   | rawr rawr

或者node

1
2
3
p.
   foo bar baz
   rawr rawr

兩種狀況均可以處理爲jquery

1
<p>foo bar baz rawr rawr</p>

jade 變量調用

jade 的變量調用有 3 種方式express

  1. #{表達式}
  2. =表達式
  3. !=表達式

注意：- 開頭在 jade 種屬於服務端執行的代碼json

1
2
3
4
- console.log('hello'); // 這段代碼在服務端執行
- var s = 'hello world' // 在服務端空間中定義變量
p #{s}
p= s

會被渲染成爲markdown

1
2
< p >hello world</ p >
< p >hello world</ p >

如下代碼效果相同app

1
2
3
- var s = 'world'
p hello #{s}
p= 'hello' + s

方式1能夠自由的嵌入各個地方
方式2返回的是表達式的值
= 與 != 雷同，聽說前者會編碼字符串（如 <stdio.h> 變成 &lt;stdio.h&gt;），後者不會，不過博主沒試出來不知道什麼狀況。

除了直接在 jade 模板中定義變量，更常見的應用是在 express 中調用 res.render 方法的時候將變量一塊兒傳遞進模板的空間中，例如這樣：

1
2
3
res.render(test, {
     s: 'hello world'
});

調用模板的時候，在 jade 模板中也能夠如上方那樣直接調用 s 這個變量

if 判斷

方式1

1
2
3
4
5
6
7
- var user = { description: '我喜歡貓' }
- if (user.description)
     h2 描述
     p.description= user.description
- else
     h1 描述
     p.description 用戶無描述

結果：

1
2
3
4
< div id = "user" >
   < h2 >描述</ h2 >
   < p class = "description" >我喜歡貓</ p >
</ div >

方式2

上述的方式有種省略寫法

1
2
3
4
5
6
7
8
- var user = { description: '我喜歡貓' }
#user
   if user.description
     h2 描述
     p.description= user.description
   else
     h1 描述
     p.description 用戶無描述

方式3

使用 Unless 相似於 if 後的表達式加上了 ! 取反

1
2
3
- var user = { name: 'Alan', isVip: false }
unless user.isVip
   p 親愛的 #{user.name} 您並非 VIP

結果

1
< p >親愛的 Alan 您並非 VIP</ p >

注意這個 unless 是 jade 提供的關鍵字，不是運行的 js 代碼

循環

for 循環

1
2
3
4
5
- var array = [1,2,3]
ul
   - for (var i = 0; i < array.length; ++i) {
     li hello #{array[i]}
   - }

結果

1
2
3
4
5
< ul >
     < li >hello 1</ li >
     < li >hello 2</ li >
     < li >hello 3</ li >
</ ul >

each

一樣的 jade 對於循環液提供了省略 「-」 減號的寫法

1
2
3
ul
   each val, index in ['西瓜', '蘋果', '梨子']
     li= index + ': ' + val

結果

1
2
3
4
5
< ul >
   < li >0: 西瓜</ li >
   < li >1: 蘋果</ li >
   < li >2: 梨子</ li >
</ ul >

該方法一樣適用於 json 數據

1
2
3
ul
   each val, index in {1:'蘋果',2:'梨子',3:'喬布斯'}
     li= index + ': ' + val

結果：

1
2
3
4
5
< ul >
   < li >1: 蘋果</ li >
   < li >2: 梨子</ li >
   < li >3: 喬布斯</ li >
</ ul >

Case

相似 switch 裏面的結果，不過這裏的 case 不支持case 穿透，若是 case 穿透的話會報錯。

1
2
3
4
5
6
7
8
- var friends = 10
case friends
   when 0
     p you have no friends
   when 1
     p you have a friend
   default
     p you have #{friends} friends

結果：

1
< p >you have 10 friends</ p >

簡略寫法：

1
2
3
4
5
- var friends = 1
case friends
   when 0: p you have no friends
   when 1: p you have a friend
   default: p you have #{friends} friends

結果：

1
< p >you have a friend</ p >

在模板中調用其餘語言

1
2
3
4
5
6
:markdown
   # Markdown 標題
   這裏使用的是 MarkDown 格式
script
   :coffee
     console.log '這裏是 coffee script'

結果：

1
2
3
< h1 >Markdown 標題</ h1 >
< p >這裏使用的是 MarkDown 格式</ p >
< script >console.log('這裏是 coffee script')</ script >

可重用的 jade 塊 (Mixins)

1
2
3
4
5
6
7
8
9
10
//- 申明可重用的塊
mixin list
   ul
     li foo
     li bar
     li baz
 
//- 調用
+list()
+list()

結果：

1
2
3
4
5
6
7
8
9
10
< ul >
   < li >foo</ li >
   < li >bar</ li >
   < li >baz</ li >
</ ul >
< ul >
   < li >foo</ li >
   < li >bar</ li >
   < li >baz</ li >
</ ul >

你也能夠給這個重用塊制定參數

1
2
3
4
5
6
mixin pets(pets)
   ul.pets
     - each pet in pets
       li= pet
 
+pets(['cat', 'dog', 'pig'])

結果：

1
2
3
4
5
< ul class = "pets" >
   < li >cat</ li >
   < li >dog</ li >
   < li >pig</ li >
</ ul >

Mixins 同時也支持在外部傳入 jade 塊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mixin article(title)
   .article
     .article-wrapper
       h1= title
       //- block 爲 jade 關鍵字表明外部傳入的塊
       if block
         block
       else
         p 該文章沒有內容
         
+article('Hello world')
 
+article('Hello Jade')
   p 這裏是外部傳入的塊
   p 再寫兩句

結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
< div class = "article" >
   < div class = "article-wrapper" >
     < h1 >Hello world</ h1 >
     < p >該文章沒有內容</ p >
   </ div >
</ div >
< div class = "article" >
   < div class = "article-wrapper" >
     < h1 >Hello Jade</ h1 >
     < p >這裏是外部傳入的塊</ p >
     < p >再寫兩句</ p >
   </ div >
</ div >

Mixins 同時也能夠從外部獲取屬性。

1
2
3
4
mixin link(href, name)
   a(class!=attributes.class, href=href)= name
   
+link('/foo', 'foo')(class="btn")

結果：

1
< a href = "/foo" class = "btn" >foo</ a >

模板包含 (Includes)

你可使用 Includes 在模板中包含其餘模板的內容。就像 PHP 裏的 include 同樣。

index.jade

1
2
3
4
5
6
7
doctype html
html
   include includes/head
body
   h1 個人網站
   p 歡迎來到個人網站。
   include includes/foot

includes/head.jade

1
2
3
4
head
   title 個人網站
   script(src='/javascripts/jquery.js')
   script(src='/javascripts/app.js')

includes/foot.jade

1
2
#footer
   p Copyright (c) foobar

調用 index.jade 的結果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
< html >
   < head >
     < title >個人網站</ title >
     < script src = '/javascripts/jquery.js' ></ script >
     < script src = '/javascripts/app.js' ></ script >
   </ head >
   < body >
     < h1 >個人網站</ h1 >
     < p >歡迎來到個人網站。</ p >
     < div id = "footer" >
       < p >Copyright (c) foobar</ p >
     </ div >
   </ body >
</ html >

模板引用 (Extends)

就絕

layout.jade

1
2
3
4
5
6
7
8
9
doctype html
html
   head
     title 個人網站
     meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
     link(type="text/css",rel="stylesheet",href="/css/style.css")
     script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
   body
     block content

article.jade

1
2
3
4
5
6
7
8
//- extends 拓展調用 layout.jade
extends ../layout
block content
   h1 文章列表
   p 憶賈大山 :將啓動新核電項目
   p 朴槿惠:"歲月號"船長等人棄船行爲等同於殺人
   p 普京疑換膚：眼袋黑眼圈全無 領導人整容疑雲
   p 世界最大兔子重45斤長逾1米 1年吃2萬元食物

res.render('article') 的結果：

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< html >
   < head >
     < title >個人網站</ title >
     < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" ></ head >
     < link type = "text/css" rel = "stylesheet" href = "/css/style.css" ></ head >
     < script src = "/js/lib/jquery-1.8.0.min.js" type = "text/javascript" ></ script >
   </ head >
   < body >
     < h1 >文章列表</ h1 >
     < p >憶賈大山 :將啓動新核電項目</ p >
     < p >朴槿惠:"歲月號"船長等人棄船行爲等同於殺人</ p >
     < p >普京疑換膚：眼袋黑眼圈全無 領導人整容疑雲</ p >
     < p >世界最大兔子重45斤長逾1米 1年吃2萬元食物</ p >
   </ body >
</ html >
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程