2、集成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 %}
3、自定义错误页面
当你输入错误路径在你的浏览器地址栏,你会得到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
来切换到这个版本的应用程序。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。