By Rose Ou

更新日期:

文章目录

或许你已经看到我的题目知道这一节要讲的是模板继承。模板继承是一种重复使用代码的方法。但是现在我们的模板都太过简单，完全没有重复的地方，然而实际上，一个应用中的不同页面往往长的差不多。现在我们来修改一下我们已有的模板，让它们看起来稍微有点像是来自于一个应用程序的。

index.html：

1
2
3
4
5
6
7
8
<html>
<head>
    <title> - Play With Flask - </title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

user.html：

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <title> - Play With Flask - </title>
</head>
<body>
    {% if name %}
        <h1>Hello, {{ name }}!</h1>
    {% else %}
        <h1>Hello, Stranger!</h1>
    {% endif %}
</body>
</html>

404.html：

1
2
3
4
5
6
7
8
<html>
<head>
    <title> - Play With Flask - </title>
</head>
<body>
    <h1>404 Page Not Found</h1>
</body>
</html>

500.html：

1
2
3
4
5
6
7
8
<html>
<head>
    <title> - Play With Flask - </title>
</head>
<body>
    <h1>500 Internal Server Error</h1>
</body>
</html>

然后我们来看看它们现在是什么样，运行程序。

访问 http://127.0.0.1:5000/

可以看到上面多出了一个标题’- Play With Flask-‘，依次访问其它几个URL也可以看到这个标题，其他的内容都和之前的一样。

嗯，现在它们终于有一点出自一个程序的样子了。并且明显能看到这些页面有很多代码都重复了（好吧也不是很多），总之如果每一个页面都要写很多重复的代码就会很麻烦。现在我们来用模板继承来简化它。

简单来说，就是把那些重复的代码写到一个基模板里，它的衍生模板在这个基模板的代码的基础上，加上自己的代码。

现在我们就来把这些重复代码写到基模板里。在templates文件夹中创建一个base.html文件，写入下面的代码：

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - Play With Flask - </title>
    {% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %}
</body>
</html>

1.这个就是我们的基模板啦，之后我们所有的其它模板都将继承于它，称为这个基模板的衍生模板。
2.可以看到模板加入了一个block标签。block标签所定义的元素可以在衍生模板中修改。例如这里，head和body元素都可在衍生模板中修改。
3.在这个模板中，我们定义了三个块，head、title和body。注意，title块包含在head块中。

然后我们来修改这个基模板的衍生模板。先是index.html:

1
2
3
4
5
6
7
8
9
10
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <style>
    </style>
{% endblock %}
{% block body %}
<h1>Hello World!</h1>
{% endblock %}

user.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
{% block title %}User{% endblock %}
{% block head %}
    {{ super() }}
    <style>
    </style>
{% endblock %}
{% block body %}
    {% if name %}
        <h1>Hello, {{ name }}!</h1>
    {% else %}
        <h1>Hello, Stranger!</h1>
    {% endif %}
{% endblock %}

1.衍生模板中有一个extends指令，这个指令声明了这个模板衍生自base.html。
2.基模板中的三个块head、title和body被重新定义，模板引擎Jinja2会将其插入相应的位置。
3.在这两个衍生模板中，都新定义了title块，一个插入了‘index’，一个插入了‘User’。
4.在这里，新定义的head块实际上没有改变基模板里的内容，而是使用super()来获取了基模板原来的内容（‘— Play With Flask —’）。
5.然后在body块中，index.html和user.html都重新插入了不同的内容。

现在，运行hello.py，访问 http://127.0.0.1:5000/ ：

可以看到标题里多出了head块里的‘index’。

访问 http://127.0.0.1:5000/user/rose ：

标题里多出了head块里的‘User’。

404.html和500.html的改法也是一样的，这里就不重复再说了，你们可以自己当练习试一下。

实际上，这一节中使用模板继承并没有省下多少代码，因为我们的页面太简单，也太丑..不过，这里我也只想你们理解模板继承的原理就够了。下一节我们会为我们的页面添加别的东西，也会因此见识到模板继承的用处有多大。

Last：Flask学习教程 Part1 3.2:错误页面
Next：Flask学习教程 Part1 3.4:使用Flask-Bootstrap集成Bootstrap

文章目录