Flask Web Development —— 模板（中）

二、集成Twitter Bootstrap的Flask-Bootstrap

Bootstrap是Twitter的一個開源框架，提供用戶交互組件來建立一個清新且有吸引力的web頁面，併兼容全部現代web瀏覽器。

Bootstrap是一個客戶端框架，服務端不直接參與。服務端須要作的就是提供HTML響應，引用層疊樣式表（CSS）和JavaScript文件並經過HTML、CSS、和JavaScript代碼來實例化須要的組件。模板是作這些的理想地方。

集成Bootstrap到應用程序最好的方式是在模板中作一些必要的改變。一個簡單點的途徑就是使用Flask-Bootstrap擴展去簡化集成工做。能夠經過pip來安裝Flask-Bootstrap：

(venv) $ pip install flask-bootstrap

Flask擴展一般在應用程序實例被建立的時候初始化。示例3-4展現Flask-Bootstrap的初始化。

示例3-4. hello.py：Flask-Bootstrap初始化

from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

和第二章的Flask-Script同樣，Flask-Bootstrap從flask.ext命名空間導入並經過傳遞應用程序實例到構造函數來初始化。

一旦Flask-Bootstrap被初始化，一個包含全部Bootstrap文件的基礎模板就可供應用程序使用了。這個模板利用Jinja2的模板繼承，應用程序則能夠擴展一個擁有通用頁面結構，且包含Bootstrap導入的元素的基礎模板。示例3-5展現做爲派生模板的新版user.html。

_示例3-5. templates/user.html： 使用Flask-Bootstrap的模板

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}


<div class="navbar navbar-inverse" role="navigation"> 
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
        data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Flasky</a> 
    </div>
    <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li> 
      </ul>
    </div>
  </div>
</div>


{% endblock %}

{% block content %}


<div class="container">
  <div class="page-header">
    <h1>Hello, {{ name }}!</h1> 
  </div>
</div>


{% endblock %}

Jinja2的extends指令經過從Flask-Bootstrap引用bootstrap/base.html來實現模板的繼承。Flask-Bootstrap的基礎模板提供一個包含Bootstrap CSS和JavaScript文件的web頁面骨架。

基礎模板定義了一些能夠被派生模板重寫的block。block和endblock指令定義了被添加到基礎模板中block的內容。

上面的user.html模板定義了三個block，分別命名爲title、navbar和content。基礎模板裏的這些block輸出派生模板定義的內容。title塊比較簡單；它的內容將出如今<title>標籤內，而後被渲染在HTML文檔的頭部 。navbar和content塊則是爲頁面保留的導航欄和主內容。

在這個模板中，navbar塊使用Bootstrap組件定義了一個簡單的導航欄。content塊有個名爲container的<div>，裏面嵌套了名爲page-header的<div>。圖3-1展現這些操做後應用程序長成啥樣了。

建議：若是你有克隆在GitHub上的應用程序，你如今能夠運行git checkout 3b來切換到這個版本的應用程序。Bootstrap官方文檔 是一個很是強大的學習資料，徹底能夠複製粘貼使用那些示例。

圖片3-1. Twitter Bootstrap模板

Flask-Bootstrap的base.html模板定義了一些其餘可供派生模板使用的block。表格3-2展現了完整的可用block列表。

表格3-2. Flask-Bootstrap基礎模板中的block

表格3-2中的許多塊用於Flask-Bootstrap自身，因此直接重寫它們會引起問題。例如，styles和scripts塊是Bootstrap定義文件的地方。若是應用程序須要新增本身的內容到已經有一些內容的塊中，則必須使用Jinja2的super()。例如，如何在派生模板中寫scripts塊，來給文檔增長新的JavaScript文件：

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script> 
{% endblock %}

三、自定義錯誤頁面

當你輸入錯誤路徑在你的瀏覽器地址欄，你會獲得404錯誤代碼頁面。目前的錯誤頁面很普通也沒有吸引力，且沒有一致的使用Bootstrap頁面。

Flask容許應用程序自定義基於模板的錯誤頁面，就像常規的路由。兩個最多見的錯誤代碼，404是在客戶端請求的頁面或路徑不存在的時候觸發；500是當存在未處理的異常時觸發。示例3-6展現如何爲這兩個錯誤提供自定義處理。

示例3-6. hello.py：自定義錯誤頁面

@app.errorhandler(404) 
def page_not_found(e):
    return render_template('404.html'), 404

@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500

錯誤處理返回響應，和視圖函數同樣。同時返回相應錯誤的數字狀態碼。

在錯誤處理中引用的模板須要本身去寫。這些模板須要和常規的頁面同樣的佈局，因此在這個示例中須要導航欄和頁面頭部顯示錯誤信息。

編寫這些模板的簡單方式是複製templates/user.html到templates/404.html和templates/500.html，而後改變這兩個新文件的頁面頭部元素來給出相應的錯誤信息，但這會產生不少副本。

Jinja2的模板繼承能夠幫助咱們解決這個問題。Flask-Bootstrap提供了一個帶有基本佈局頁面的基礎模板，應用程序能夠定義本身的、帶有完整頁面佈局的基礎模板，包括導航欄和定義在派生模板中的頁面內容。示例3-7展現了templates/base.html，它是一個繼承自bootstrap/base.html的新模板且定義了導航欄，但對於其餘模板則是一個基礎模板，例如templates/user.html、templates/404.html和templates/500.html。

_示例3-7. templates/base.html：帶有導航欄的基礎應用程序模板

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}


<div class="navbar navbar-inverse" role="navigation"> 
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 
        data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Flasky</a>
    </div>
    <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav">
        <li><a href="/">Home</a></li> 
      </ul>
    </div>
  </div>
</div>


{% endblock %}

{% block content %}


<div class="container">
  {% block page_content %}{% endblock %}
</div>


{% endblock %}

這個模板中的content塊中只是一個名爲container的<div>元素，它包含了在派生模板中定義的名爲page_content的空block。

應用程序的模板將從該模板繼承而不是直接從Flask-Bootstrap繼承。示例3-8展現了從templates/base.html繼承來構造一個自定義404錯誤頁面是如此的簡單。

示例3-8. templates/404.html：使用模板繼承自定義404錯誤頁面

{% extends "base.html" %}
{% block title %}Flasky - Page Not Found{% endblock %}
{% block page_content %}
<div class="page-header"> 
  <h1>Not Found</h1>
</div>
{% endblock %}

圖片3-2展現在瀏覽器中錯誤頁面是怎樣的。

圖片3-2. 自定義404錯誤頁面

如今templates/user.html模板能夠經過繼承基礎模板來簡化它，就像示例3-9展現的這樣。

示例3-9. templates/user.html：使用模板繼承簡化頁面模板

{% extends "base.html" %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header"> 
  <h1>Hello, {{ name }}!</h1>
</div>
{% endblock %}

建議：若是你有克隆在GitHub上的應用程序，你如今能夠運行git checkout 3c來切換到這個版本的應用程序。