Python實戰-編寫Web App-Day9-構建前端

至此，後端工作基本構建完成。接下要開始設計和編程前端頁面了。為了更容易構建出複雜的HTML前端頁面，我們需要一套基礎的CSS框架和jQuery作為操作DOM的JavaScript庫。如今好用流行的CSS框架有很多例如：Bootstrap, Pure CSS, Bulma, Semantic UI 等。此教程會使用UIkit 作為網站的CSS 框架，具體的教程請參考官方Documentation。請下載UIkit的最新版本(3.0.0或以上，最新的是3.4.2，廖大用的UIkit 2.0 將不適用)，將js和css文件放入www/static相應的文件目錄中：

<code>+- css/
|  +- awesome.css ## 自定義的css
|  +- uikit.
min
.css
+- js/
   +- awesome.js ## 自定義的script
   +- jquery.
min
.js
   +- uikit.
min
.js
   +- uikit-icons.
min
.js
   +- sha1.
min
.js ## 計算HASH值
   +- vue.
min
.js ## Vue是一種MVVM前端框架, 我們會用它將數據及數據操作與HTML頁面顯示聯繫起來
   +- sticky.
min
.js ## 實現黏性佈局/<code>

由於前端包含很多頁面，而每個頁面都會有相同的頁眉和頁腳，最有效率的方法就是構建可以繼承的父模板, jinja2提供了很便捷方法用可替換的block來建立模板。例如最簡單的父模板base.html：

<code>
<
html
>
    
<
head
>
        
<
title
>{% block title%} 子模板可替換title內容 {% endblock %}
title 
>
    
head
>
    
<
body
>
        {% block content %} 子模板可替換content內容 {% endblock %}
    
body
>
html
>/<code>

對於子模板a.html, b.html, c.html，只需要把父模板的title和content替換掉：

<code>{% extends 'base.html' %}
 
{% block title %} A or B or C {% endblock %}
 
{% block content %}
    
<
h1
>Chapter A or B or C
h1
>
    
<
p
>blablabla...
p
>
{% endblock %}/<code>

知道了如何用jinja2, 我們就可以用UIkit框架來完成網站父模板__base__.html的編寫了（請將所有的html文件存放在www/templates目錄下）。

關鍵字: min 實戰 css