模版引擎是產生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即可看到以下內容

blog

看一下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,明明是一樣的內容,但是長的就是不一樣

20131231-154220

可由html原始碼中看出這是因為django沒有套用css所造成的;上為express,下為django

20131231-154755

讓我們為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,所呈現的風格就統一了

20131231-231107

再接著看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/畫面如下

20131231-233154  

文章標籤
創作者介紹
創作者 長風破浪會有時 的頭像
長風破浪會有時

行路難 多歧路

長風破浪會有時 發表在 痞客邦 留言(0) 人氣()