Flask 教程 第十一章：美化

本文翻译自The Flask Mega-Tutorial Part XI: Facelift

这是Flask Mega-Tutorial系列的第十一部分，我将告诉你如何用基于Bootstrap用户界面框架的新模板替换基础的HTML模板。

你把玩Microblog应用也有一段时间了，所以我相信你已经注意到，我没有花太多时间来美化它，说得更具体点，我根本没有花时间。 所有的模板只使用了基础样式，没有任何自定义的展现。 这对于我来说却非常有用，因为我可以专注于应用的实际逻辑，不用分心于编写好看的HTML和CSS代码。

但是我已经长期关注应用的后端部分一段时间了。 因此在本章中，我暂停一下后端的工作，并花点时间向你展示如何使应用看起来更加优雅和专业。

本章将与之前的章节略有不同，因为我不会像平常解说Python那样，事无巨细，一一道来，毕竟Python才是本教程的主要内容。 创建漂亮的网页是一个很广泛的话题，而与Python Web的后端开发很大程度上无关，因此我将讨论一些基本的指导方针和想法，你可以通过重新设计应用的外观来研究和学习它。

本章的GitHub链接为：Browse, Zip, Diff.

CSS框架

虽然我们可以争辩说写代码不容易，但是与那些必须让网页在所有Web浏览器上具有良好一致外观的网页设计师相比，我们的痛苦不值一提。 虽然近年来这种情况得到一定程度的缓解，但是在一些浏览器中仍然存在着晦涩的错误或奇怪的设定，这使得设计网页的任务变得非常困难。 如果还需要兼容屏幕限制设备（诸如平板电脑和智能手机）的浏览器，则更加困难。

如果你和我一样，只是一个想创建出规范网页的开发人员，没有时间或兴趣去学习底层机制并通过编写原生HTML和CSS来实现它，那么唯一可行的解决方案是使用CSS框架来简化任务。 通过这种方式，你会失去一些创造性的自由，但另一方面，无需通过太多的功夫就可以让网页在所有浏览器中看起来都不错。 CSS框架为普通类型的用户界面元素提供了高级CSS类的集合，其中包含预定义样式。 大多数这样的框架还提供JavaScript插件，以实现不能纯粹使用HTML和CSS来完成的功能。

Bootstrap简介

最受欢迎的CSS框架之一是由Twitter推出的Bootstrap。 如果你想看看这个框架可以设计的页面类型，文档有一些示例。

这些是使用Bootstrap来设置网页风格的一些好处：

• 在所有主流网页浏览器中都有相似的外观
• 自动处理PC桌面，平板电脑和手机屏幕尺寸
• 可定制的布局
• 精心设计的导航栏，表单，按钮，警示，弹出窗口等

使用Bootstrap最直接的方法是简单地在你的基本模板中导入bootstrap.min.css文件。 可以下载此文件并将其添加到你的项目中，或直接从CDN导入。 然后，你可以根据其文档开始使用它提供的通用CSS类，实在是太棒了。 你可能还需要导入包含框架JavaScript代码的bootstrap.min.js文件，以便使用最先进的功能。

幸运的是，有一个名为Flask-Bootstrap的Flask插件，它提供了一个已准备好的基础模板，该模板引入了Bootstrap框架。 让我们来安装这个扩展：

1 (venv) $ pip install flask-bootstrap

使用Flask-Bootstrap

Flask-Bootstrap需要像大多数其他Flask插件一样被初始化：

app/init.py: Flask-Bootstrap实例。

1 # ...
2 from flask_bootstrap import Bootstrap
3 
4 app = Flask(__name__)
5 # ...
6 bootstrap = Bootstrap(app)

在初始化插件之后，bootstrap/base.html模板就会变为可用状态，你可以使用extends子句从应用模板中引用。

但是，回顾一下，我已经使用了extends子句来继承我的基础模板，这使我可以将页面的公共部分放在一个地方。 base.html模板定义了导航栏，其中包含几个链接，并且还导出了一个content块。 应用中的所有其他模板都从基础模板继承，并为内容块提供页面的主要内容。

那么我怎样才能适配Bootstrap基础模板呢？ 解决方案是从使用两个层级到使用三个层级。 bootstrap/base.html模板提供页面的基本结构，其中引入了Bootstrap框架文件。 这个模板为派生的模板定义了一些块，例如title，navbar和content（参见块的完整列表）。 我将更改base.html模板以从bootstrap/base.html派生，并提供title，navbar和content块的实现。 反过来，base.html将为从其派生的模板导出app_content块以定义页面内容。

下面你可以看到从Bootstrap基础模板派生的base.html的代码。 请注意，此列表不包含导航栏的整个HTML，但你可以在GitHub上或下载本章的代码来查看完整的实现。

app/templates/base.html：重新设计后的基础模板。

 1 {% extends 'bootstrap/base.html' %}
 2 
 3 {% block title %}
 4     {% if title %}{{ title }} - Microblog{% else %}Welcome to Microblog{% endif %}
 5 {% endblock %}
 6 
 7 {% block navbar %}
 8     
class="navbar navbar-default">
 9         ... navigation bar here (see complete code on GitHub) ...
10     
11 {% endblock %}
12 
13 {% block content %}
14     
class="container">
15         {% with messages = get_flashed_messages() %}
16         {% if messages %}
17             {% for message in messages %}
18             
class="alert alert-info" role="alert">{{ message }}
19             {% endfor %}
20         {% endif %}
21         {% endwith %}
22 
23         {# application content needs to be provided in the app_content block #}
24         {% block app_content %}{% endblock %}
25     
26 {% endblock %}

从中你可以看到我如何从bootstrap/base.html派生此模板，接下来分别实现了页面标题、导航栏和页面内容的这三个模块。

title块需要使用