雖然我們跑通了一個(gè)最簡(jiǎn)單的MVC，但是頁(yè)面效果肯定不會(huì)讓人滿意。
對(duì)于復(fù)雜的HTML前端頁(yè)面來(lái)說(shuō)，我們需要一套基礎(chǔ)的CSS框架來(lái)完成頁(yè)面布局和基本樣式。另外，jQuery作為操作DOM的JavaScript庫(kù)也必不可少。
從零開始寫CSS不如直接從一個(gè)已有的功能完善的CSS框架開始。有很多CSS框架可供選擇。我們這次選擇uikit這個(gè)強(qiáng)大的CSS框架。它具備完善的響應(yīng)式布局，漂亮的UI，以及豐富的HTML組件，讓我們能輕松設(shè)計(jì)出美觀而簡(jiǎn)潔的頁(yè)面。
可以從uikit首頁(yè)下載打包的資源文件。
所有的靜態(tài)資源文件我們統(tǒng)一放到www/static目錄下，并按照類別歸類：
+- css/
| +- addons/
| | +- uikit.addons.min.css
| | +- uikit.almost-flat.addons.min.css
| | +- uikit.gradient.addons.min.css
| +- awesome.css
| +- uikit.almost-flat.addons.min.css
| +- uikit.gradient.addons.min.css
| +- uikit.min.css
+- fonts/
| +- fontawesome-webfont.eot
| +- fontawesome-webfont.ttf
| +- fontawesome-webfont.woff
| +- FontAwesome.otf
+- js/
+- awesome.js
+- html5.js
+- jquery.min.js
+- uikit.min.js
由于前端頁(yè)面肯定不止首頁(yè)一個(gè)頁(yè)面，每個(gè)頁(yè)面都有相同的頁(yè)眉和頁(yè)腳。如果每個(gè)頁(yè)面都是獨(dú)立的HTML模板，那么我們?cè)谛薷捻?yè)眉和頁(yè)腳的時(shí)候，就需要把每個(gè)模板都改一遍，這顯然是沒有效率的。
常見的模板引擎已經(jīng)考慮到了頁(yè)面上重復(fù)的HTML部分的復(fù)用問題。有的模板通過include把頁(yè)面拆成三部分：
|
1
2
3
4
5
|
<html> <% include file="inc_header.html" %> <% include file="index_body.html" %> <% include file="inc_footer.html" %></html> |
這樣，相同的部分inc_header.html和inc_footer.html就可以共享。
但是include方法不利于頁(yè)面整體結(jié)構(gòu)的維護(hù)。jinjia2的模板還有另一種“繼承”方式，實(shí)現(xiàn)模板的復(fù)用更簡(jiǎn)單。
“繼承”模板的方式是通過編寫一個(gè)“父模板”，在父模板中定義一些可替換的block（塊）。然后，編寫多個(gè)“子模板”，每個(gè)子模板都可以只替換父模板定義的block。比如，定義一個(gè)最簡(jiǎn)單的父模板：
|
1
2
3
4
5
6
7
8
9
|
<!-- base.html --><html> <head> <title>{% block title%} 這里定義了一個(gè)名為title的block {% endblock %}</title> </head> <body> {% block content %} 這里定義了一個(gè)名為content的block {% endblock %} </body></html> |
對(duì)于子模板a.html，只需要把父模板的title和content替換掉：
|
1
2
3
4
5
6
7
8
|
{% extends 'base.html' %}{% block title %} A {% endblock %}{% block content %}<h1>Chapter A</h1><p>blablabla...</p>{% endblock %} |
對(duì)于子模板b.html，如法炮制：
|
1
2
3
4
5
6
7
8
9
10
11
|
{% extends 'base.html' %}{% block title %} B {% endblock %}{% block content %}<h1>Chapter B</h1><ul> <li>list 1</li> <li>list 2</li></ul>{% endblock %} |
這樣，一旦定義好父模板的整體布局和CSS樣式，編寫子模板就會(huì)非常容易。
讓我們通過uikit這個(gè)CSS框架來(lái)完成父模板__base__.html的編寫：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<!DOCTYPE html><html><head> <meta charset="utf-8" /> {% block meta %}<!-- block meta -->{% endblock %} <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title> <link rel="stylesheet" href="/static/css/uikit.min.css"> <link rel="stylesheet" href="/static/css/uikit.gradient.min.css"> <link rel="stylesheet" href="/static/css/awesome.css" /> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/md5.js"></script> <script src="/static/js/uikit.min.js"></script> <script src="/static/js/awesome.js"></script> {% block beforehead %}<!-- before head -->{% endblock %}</head><body> <nav class="uk-navbar uk-navbar-attached uk-margin-bottom"> <div class="uk-container uk-container-center"> <a href="/" class="uk-navbar-brand">Awesome</a> <ul class="uk-navbar-nav"> <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li> <li><a target="_blank" href="#"><i class="uk-icon-book"></i> 教程</a></li> <li><a target="_blank" href="#"><i class="uk-icon-code"></i> 源碼</a></li> </ul> <div class="uk-navbar-flip"> <ul class="uk-navbar-nav"> {% if user %} <li class="uk-parent" data-uk-dropdown> <a href="#0"><i class="uk-icon-user"></i> {{ user.name }}</a> <div class="uk-dropdown uk-dropdown-navbar"> <ul class="uk-nav uk-nav-navbar"> <li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li> </ul> </div> </li> {% else %} <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陸</a></li> <li><a href="/register"><i class="uk-icon-edit"></i> 注冊(cè)</a></li> {% endif %} </ul> </div> </div> </nav> <div class="uk-container uk-container-center"> <div class="uk-grid"> <!-- content --> {% block content %} {% endblock %} <!-- // content --> </div> </div> <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;"> <div class="uk-container uk-container-center uk-text-center"> <div class="uk-panel uk-margin-top uk-margin-bottom"> <p> <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo"></a> <a target="_blank" href="#" class="uk-icon-button uk-icon-github"></a> <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square"></a> <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter"></a> </p> <p>Powered by <a href="#">Awesome Python Webapp</a>. Copyright © 2014. [<a href="/manage/" target="_blank">Manage</a>]</p> <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p> <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a> </div> </div> </div></body></html> |
__base__.html定義的幾個(gè)block作用如下：
用于子頁(yè)面定義一些meta，例如rss feed：
|
1
|
{% block meta %} ... {% endblock %} |
覆蓋頁(yè)面的標(biāo)題：
|
1
|
{% block title %} ... {% endblock %} |
子頁(yè)面可以在標(biāo)簽關(guān)閉前插入JavaScript代碼：
|
1
|
{% block beforehead %} ... {% endblock %} |
子頁(yè)面的content布局和內(nèi)容：
|
1
2
3
|
{% block content %}...{% endblock %} |
我們把首頁(yè)改造一下，從__base__.html繼承一個(gè)blogs.html：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
{% extends '__base__.html' %}{% block title %}日志{% endblock %}{% block content %} <div class="uk-width-medium-3-4"> {% for blog in blogs %} <article class="uk-article"> <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2> <p class="uk-article-meta">發(fā)表于{{ blog.created_at}}</p> <p>{{ blog.summary }}</p> <p><a href="/blog/{{ blog.id }}">繼續(xù)閱讀 <i class="uk-icon-angle-double-right"></i></a></p> </article> <hr class="uk-article-divider"> {% endfor %} </div> <div class="uk-width-medium-1-4"> <div class="uk-panel uk-panel-header"> <h3 class="uk-panel-title">友情鏈接</h3> <ul class="uk-list uk-list-line"> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">編程</a></li> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">讀書</a></li> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Python教程</a></li> <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Git教程</a></li> </ul> </div> </div>{% endblock %} |
相應(yīng)地，首頁(yè)URL的處理函數(shù)更新如下：
|
1
2
3
4
5
6
7
|
@view('blogs.html')@get('/')def index(): blogs = Blog.find_all() # 查找登陸用戶: user = User.find_first('where email=?', 'admin@example.com') return dict(blogs=blogs, user=user) |
往MySQL的blogs表中手動(dòng)插入一些數(shù)據(jù)，我們就可以看到一個(gè)真正的首頁(yè)了。但是Blog的創(chuàng)建日期顯示的是一個(gè)浮點(diǎn)數(shù)，因?yàn)樗怯蛇@段模板渲染出來(lái)的：
|
1
|
<p class="uk-article-meta">發(fā)表于{{ blog.created_at }}</p> |
解決方法是通過jinja2的filter（過濾器），把一個(gè)浮點(diǎn)數(shù)轉(zhuǎn)換成日期字符串。我們來(lái)編寫一個(gè)datetime的filter，在模板里用法如下：
|
1
|
<p class="uk-article-meta">發(fā)表于{{ blog.created_at|datetime }}</p> |
filter需要在初始化jinja2時(shí)設(shè)置。修改wsgiapp.py相關(guān)代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
# wsgiapp.py:...# 定義datetime_filter，輸入是t，輸出是unicode字符串:def datetime_filter(t): delta = int(time.time() - t) if delta < 60: return u'1分鐘前' if delta < 3600: return u'%s分鐘前' % (delta // 60) if delta < 86400: return u'%s小時(shí)前' % (delta // 3600) if delta < 604800: return u'%s天前' % (delta // 86400) dt = datetime.fromtimestamp(t) return u'%s年%s月%s日' % (dt.year, dt.month, dt.day)template_engine = Jinja2TemplateEngine(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'templates'))# 把filter添加到j(luò)injia2，filter名稱為datetime，filter本身是一個(gè)函數(shù)對(duì)象:template_engine.add_filter('datetime', datetime_filter)wsgi.template_engine = template_engine |
現(xiàn)在，完善的首頁(yè)顯示如下：
