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来切换到这个版本的应用程序。