By Rose Ou

更新日期:

文章目录

现在不管是哪一个页面都很丑，于是上一节我们说好了本节要把它写得好看点。这里又要用到一个FLask扩展，Flask－Bootstrap。

首先我们要知道一下Bootstrap，它是一个由Twitter开发的开源前端框架，基于HTML、CSS、JAVASCRIPT。

以下是《Flask Web 开发》里对它的一段介绍：

Bootstrap是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap层叠样式表(CSS)和JavaScript文件的HTML响应，并在HTML、CSS和Javascript代码中实例化所需组件。这些操作最理想的执行场所就是模板。

在我们的程序中集成Bootstrap的一个简单的方法就是使用上面提到的Flask-Bootstrap扩展。现在我们来安装它：

1
(venv) $ pip install flask-bootstrap

然后再将它添加到我们的程序中，打开hello.py：

1
2
3
4
5
from flask.ext.bootstrap import Bootstrap

#...
bootstrap = Bootstrap(app)
#...

1.Flask-Bootstrap和前面的Flask-Script一样，也是包含在flask.ext命名空间中。这里从flask.ext.bootstrap导入Bootstrap类。
2.创造Bootstrap类的实例bootstrap，把程序实例app作为参数传入其构造函数。
3.记住Bootstrap的实例化要在Flask类的实例化后面。

这样初始化Flask-Bootstrap后，我们就可以在程序中使用一个包含了所有Bootstrap文件的基模板，这个模板具有页面的基本布局。我们的程序的基模板将会继承自这个基模板，然后让它具有更完整的页面布局，其中包括导航条，而页面内容则可以在其衍生模板中定义。

现在打开我们的base.html，修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
% extends "bootstrap/base.html" %}

{% block title %}Play With Flask{% 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="/">Play With Flask</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 %}

1.extends指令从Flask-Bootstrap中导入bootstrap/base.html，表示我们这个基模板是继承自bootstrap中的基模板的。而Flask-Bootstrap中的这个基模板提供了一个网页框架，引入了Bootstrap中的所有CSS和JavaScript文件。
2.在我们的这个基模板中，block和endblock指令定义的块中的内容可以在其衍生模板中重新定义，添加到基模板中。
3.这个基模板定义了3个块：title、navbar和content，这些块事实上是bootstrap/base.html提供的，我们在这里重新定义。
4.title块的作用就是给渲染后的HTML文档头部添加内容，这些内容放在title标签中。
5.navbar块使用了Bootstrap组件给页面定义了一个简单的导航条。导航条中有Play With
Flask和Home选项。
6.content块表示页面的主体内容。在这个块中有一个div容器，其中包含一个名为page_content的新的空块，块中的内容由其衍生模板定义，内容将是页面的头部。

在一个程序中，一般所有的页面都应该有着相同的页面布局，所以如果我们现在要修改别的模块的话，就要复制粘贴上面的代码，再在相应的块中修改了。不过上一节我们说过了模板继承，避免了这种情况发生，现在你能体会到模板继承的用处了。

现在我们来修改index.html：

1
2
3
4
5
6
7
8
9
{% extends "base.html" %}

{% block title %} - Index - {% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Hello, World!</h1>
</div>
{% endblock %}

1.这个模板继承自我们的程序的基模板base.html，而不是Bootstrap的基模板bootstrap/base.html。
2.title块内容改为了Index，这将作为HTML文档头部。
3.在page_content块中插入了内容。

然后修改user.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
{% extends "base.html" %}

{% block title %} - User - {% endblock %}

{% block page_content %}
<div class="page-header">
    {% if name %}
        <h1>Hello, {{ name }}!</h1>   
    {% else %}
        <h1>Hello, Stranger!</h1>
    {% endif %}
</div>
{% endblock %}

404.html：

1
2
3
4
5
6
7
8
9
{% extends "base.html" %}

{% block title %} - 404 - {% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>404 Page Not Found</h1>
</div>
{% endblock %}

500.html：

1
2
3
4
5
6
7
8
9
{% extends "base.html" %}

{% block title %} - 500 - {% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>500 Internal Server Error</h1>
</div>
{% endblock %}

然后我们来访问主页http://127.0.0.1:5000 ：

你可以自己试试访问其它页面～

是不是好看了那么一点点？

Last：Flask学习教程 Part1 3.3:(强大的)模板继承
Next：Flask学习教程 Part1 3.5:静态文件的引用

文章目录