雖然我們跑通了一個(gè)最簡(jiǎn)單的MVC，但是頁面效果肯定不會(huì)讓人滿意。
對(duì)于復(fù)雜的HTML前端頁面來說，我們需要一套基礎(chǔ)的CSS框架來完成頁面布局和基本樣式。另外，jQuery作為操作DOM的JavaScript庫也必不可少。
從零開始寫CSS不如直接從一個(gè)已有的功能完善的CSS框架開始。有很多CSS框架可供選擇。我們這次選擇uikit這個(gè)強(qiáng)大的CSS框架。它具備完善的響應(yīng)式布局，漂亮的UI，以及豐富的HTML組件，讓我們能輕松設(shè)計(jì)出美觀而簡(jiǎn)潔的頁面。
可以從uikit首頁下載打包的資源文件。
所有的靜態(tài)資源文件我們統(tǒng)一放到www/static目錄下，并按照類別歸類：
代碼如下: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
由于前端頁面肯定不止首頁一個(gè)頁面，每個(gè)頁面都有相同的頁眉和頁腳。如果每個(gè)頁面都是獨(dú)立的HTML模板，那么我們?cè)谛薷捻撁己晚撃_的時(shí)候，就需要把每個(gè)模板都改一遍，這顯然是沒有效率的。
常見的模板引擎已經(jīng)考慮到了頁面上重復(fù)的HTML部分的復(fù)用問題。有的模板通過include把頁面拆成三部分：
<html> <% include file="inc_header.html" %> <% include file="index_body.html" %> <% include file="inc_footer.html" %></html>
這樣，相同的部分inc_header.html和inc_footer.html就可以共享。
但是include方法不利于頁面整體結(jié)構(gòu)的維護(hù)。jinjia2的模板還有另一種“繼承”方式，實(shí)現(xiàn)模板的復(fù)用更簡(jiǎn)單。
“繼承”模板的方式是通過編寫一個(gè)“父模板”，在父模板中定義一些可替換的block（塊）。然后，編寫多個(gè)“子模板”，每個(gè)子模板都可以只替換父模板定義的block。比如，定義一個(gè)最簡(jiǎn)單的父模板：
<!-- 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替換掉：
{% extends 'base.html' %}{% block title %} A {% endblock %}{% block content %}<h1>Chapter A</h1><p>blablabla...</p>{% endblock %}
新聞熱點(diǎn)
疑難解答
圖片精選
