模版引擎是產生MVC中View、MTV中的Template的方法
說明白了就是產生使用者所看到的html網頁
Node.js中預設使用的是jade；django是自帶的模版引擎
先說說jade
根據DRY(Don’t Repeat Yourself)原則，jade利用extends 和block分別用來繼承模版與套用內容
就好像是做Powerpoint時先設定好母片，之後的投影片就可以完全套用母片的樣式與內容，不用每一頁都重複編輯樣式，只要專心寫出該張投影片的內容
Extends 就像是套用母片動作
Block 寫入投影片內容
看一下以下例子，layout寫了html中的head內容；而index繼承了layout中head內容，再加上自己的body內容，就形成完整的html
//layout.jade 此為母片
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content //被套用後可被寫入/取代的內容
//index.jade 名叫index的投影片
extends layout //繼承layout母片
block content //寫入
h1= title
p Welcome to #{title}
layout + index所產生index.html檔案
<!DOCTYPE html> <html> <head> <title>Express</title> <link rel="stylesheet" href="/stylesheets/style.css"></head> <body> <!—以上內容由layout.jade提供 --> <h1>Express</h1> <!-根據index.jade而來 --> <p>Welcome to Express</p> <!-根據index.jade而來 --> </body> </html>
Express的View還支援部份視圖(partials)，就是將網頁的部份區塊分割出去，顯示另外一個View，而分割出來的這個View用來顯示獨立的內容或是用於反覆運算
這個功能在jade中被稱為include
//app.js加上此行
app.get('/list', routes.list);
// routes/index.js 加上以下內容
exports.list = function(req, res) {
res.render('list', {
title: 'List',
items: [2014, 'Hello', 'World', 'Node.js']
});
};
在views資料夾中新增list.jade和 listitem.jade
//list.jade extends layout block content h1= title include listitem //加入listitem.jade的內容
//listitem.jade
p all items in list
each item in items
li= 'item: ' + item
完成之後啟動伺服器，進入127.0.0.1:3000/list即可看到以下內容
看一下list.html
<!DOCTYPE html> <html> <head> <title>List</title> <link rel="stylesheet" href="/stylesheets/style.css"></head> <body> <!—以上內容由layout.jade提供 --> <h1>List</h1> <!—由list.jade提供 --> <p>all items in list</p> <!—由listitem.jade提供 --> <li>item: 2014</li> <!—由listitem.jade提供 --> <li>item: Hello</li> <!—由listitem.jade提供 --> <li>item: World</li> <!—由listitem.jade提供 --> <li>item: Node.js</li> <!—由listitem.jade提供 --> </body></html>
django
Django的模版預設存放在templates資料夾中，相同的也擁有繼承與include的功能
先看一下下圖，左側為express，右側為django，明明是一樣的內容，但是長的就是不一樣
可由html原始碼中看出這是因為django沒有套用css所造成的；上為express，下為django
讓我們為django以繼承的方式套用html的head，並在其中加入css連結參照
首先進到microblog目錄，建立static資料夾，並在其中建立css資料夾，目錄架構應該如下
Mysite --Manage.py -- Mysite -- Microblog ----Static ------ Css --------Style.css
在css資料夾中新建style.css檔案，內容如下
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
上述的style.css其實就是照抄express中的style.css
完成之後再進入microblog/templates，建立一個layout.html檔案
<!DOCTYPE html>
<html>
<head>
<title>django</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>{% block content %}{% endblock %}
</html>
接著再編輯index.html如下
{% extends 'layout.html' %}
{% block content %}
<h1>{{ title }}</h1>
<p> Welcome to {{ title }}</p>
{% endblock %}
重新刷新瀏覽器http://127.0.0.1:8080/microblog/
可以看到django(右)與express(左)因套用相同的css，所呈現的風格就統一了
再接著看django的include功能
在urls.py新增此行
url(r'^list/', views.lists),
view.py新增函數lists
def lists(request):
return render(request, 'list.html', {'title': 'List', 'items': [2014, 'Hello', ‘world', 'Node.js']})
進入templates資料夾，新增list.html 與itemlist.html
{% extends 'layout.html' %}
{% block content %}
<h1>{{ title }}</h1>
{% include "itemlist.html" %}
{% endblock %}
<p> all items in list </p>
{% for item in items %}
<li> item: {{item}} </li>
{% endfor %}
最後進入http://127.0.0.1:8080/microblog/list/畫面如下
留言列表
