為Python的web架構編寫前端模版的教程

雖然我們跑通了一個最簡單的MVC，但是頁面效果肯定不會讓人滿意。

對於複雜的HTML前端頁面來說，我們需要一套基礎的CSS架構來完成頁面配置和基本樣式。另外，jQuery作為操作DOM的JavaScript庫也必不可少。

從零開始寫CSS不如直接從一個已有的功能完善的CSS架構開始。有很多CSS架構可供選擇。我們這次選擇uikit這個強大的CSS架構。它具備完善的響應式布局，漂亮的UI，以及豐富的HTML組件，讓我們能輕鬆設計出美觀而簡潔的頁面。

可以從uikit首頁下載打包的資源檔。

所有的靜態資源檔案我們統一放到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

由於前端頁面肯定不止首頁一個頁面，每個頁面都有相同的頁首和頁尾。如果每個頁面都是獨立的HTML模板，那麼我們在修改頁首和頁尾的時候，就需要把每個模板都改一遍，這顯然是沒有效率的。

常見的模板引擎已經考慮到了頁面上重複的HTML部分的複用問題。有的模板通過include把頁面拆成三部分：

  <% include file="inc_header.html" %>  <% include file="index_body.html" %>  <% include file="inc_footer.html" %>

這樣，相同的部分inc_header.html和inc_footer.html就可以共用。

但是include方法不利於頁面整體結構的維護。jinjia2的模板還有另一種“繼承”方式，實現模板的複用更簡單。

“繼承”模板的方式是通過編寫一個“父模板”，在父模板中定義一些可替換的block（塊）。然後，編寫多個“子模板”，每個子模板都可以只替換父模板定義的block。比如，定義一個最簡單的父模板：

      {% block title%} 這裡定義了一個名為title的block {% endblock %}        {% block content %} 這裡定義了一個名為content的block {% endblock %}  

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

{% extends 'base.html' %}{% block title %} A {% endblock %}{% block content %}
Chapter A
blablabla...
{% endblock %}

對於子模板b.html，如法炮製：

{% extends 'base.html' %}{% block title %} B {% endblock %}{% block content %}
Chapter B
 
  
  
list 1
  
  
list 2
 
{% endblock %}

這樣，一旦定義好父模板的整體布局和CSS樣式，編寫子模板就會非常容易。

讓我們通過uikit這個CSS架構來完成父模板__base__.html的編寫：

    {% block meta %}{% endblock %}  {% block title %} ? {% endblock %} - Awesome Python Webapp                {% block beforehead %}{% endblock %}            Awesome      
 
        
  
 日誌
        
  
 教程
        
  
 源碼
      
 
              
 

          {% if user %}          
  
  {{ user.name }} 
   
 
    
 登出
 
   
 
        {% else %}          
  
 登陸
          
  
 註冊
        {% endif %}        
 
                              {% block content %}      {% endblock %}                                
                                                
        
Powered by Awesome Python Webapp. Copyright © 2014. [Manage]
        
www.liaoxuefeng.com. All rights reserved.
                    

__base__.html定義的幾個block作用如下：

用於子頁面定義一些meta，例如rss feed：

{% block meta %} ... {% endblock %}

覆蓋頁面的標題：

{% block title %} ... {% endblock %}

子頁面可以在標籤關閉前插入JavaScript代碼：

{% block beforehead %} ... {% endblock %}

子頁面的content布局和內容：

{% block content %}...{% endblock %}

我們把首頁改造一下，從__base__.html繼承一個blogs.html：

{% extends '__base__.html' %}{% block title %}日誌{% endblock %}{% block content %}    {% for blog in blogs %}          
{{ blog.name }}
      
發表於{{ blog.created_at}}
      
{{ blog.summary }}
      
繼續閱讀 
          {% endfor %}              
友情連結
      
 
        
  
 編程
        
  
 讀書
        
  
 Python教程
        
  
 Git教程
      
 
      {% endblock %}

相應地，首頁URL的處理函數更新如下：

@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表中手動插入一些資料，我們就可以看到一個真正的首頁了。但是Blog的建立日期顯示的是一個浮點數，因為它是由這段模板渲染出來的：

發表於{{ blog.created_at }}

解決方案是通過jinja2的filter（過濾器），把一個浮點數轉換成日期文字。我們來編寫一個datetime的filter，在模板裡用法如下：

發表於{{ blog.created_at|datetime }}

filter需要在初始化jinja2時設定。修改wsgiapp.py相關代碼如下：

# 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小時前' % (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添加到jinjia2，filter名稱為datetime，filter本身是一個函數對象:template_engine.add_filter('datetime', datetime_filter)wsgi.template_engine = template_engine

現在，完善的首頁顯示如下：

