Flask框架中Jinja2模板继承的使用

IT之一小佬

于 2022-08-14 22:05:52 发布

231

分类专栏： Flask框架文章标签： flask python Jinja2

本文链接：https://blog.csdn.net/weixin_44799217/article/details/126329978

版权

Flask框架专栏收录该内容

39 篇文章 1 订阅

订阅专栏

Flask框架中的Jinja2模板可以继承，通过继承可以把模板中许多重复出现的元素抽取出来，放在父模板中，并且父模板通过定义block给子模板开一个口，子模板根据需要，再实现这个block。

以一个简单的实例来说明：

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/base.css">
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <div id="body">
        {% block body %}{% endblock %}
    </div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2022 by <a href="http://www.baidu.com/">you</a>
        {% endblock %}
    </div>
</body>
</html>

在上面base.html父模板中，抽取了所有模板都需要用到的元素html、body等，并且对于一些所有模板都要用到的样式文件style.css也进行了抽取，同时对于一些子模板需要重写的地方，比如title、head、body都定义成了block，然后子模板可以根据自己的需要，再具体的实现。

index.html

{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="../static/css/index.css">
{% endblock %}
{% block body %}
    <h1>请欣赏首页内容</h1>
    <p class="detail">请观看首页内容！</p>
{% endblock %}

在index.html中首先第一行就定义了子模板继承的父模板，并且可以看到子模板实现了title这个block，并填充了自己的内容，再看head这个block，里面调用了super()这个函数，这个函数的目的是执行父模板中的代码，把父模板中的内容添加到子模板中，如果没有这一句，则父模板中处在head这个block中的代码将会被子模板中的代码给覆盖掉。

注意：模板中不能出现重名的block，如果一个地方需要用到另外一个block中的内容，可以使用self.blockname()的方式进行引用，如下面代码所示：

base.index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/base.css">
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <h1>欢迎来到{{ self.title() }}~</h1>
    <div id="body">
        {% block body %}{% endblock %}
    </div>
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2022 by <a href="http://www.baidu.com/">you</a>
        {% endblock %}
    </div>
</body>
</html>

上述更改的base.html代码中h1标签重用了title这个block中的内容，子模板实现了title这个block，h1标签也能拥有这个值。

注意：在子模板中，所有的文本标签和代码都要添加到从父模板中继承的block中。否则，这些文本和标签将不会被渲染。

base.css

div {
    background-color: #cccccc;
}

index.css

.detail {
    color: red;
}

main.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run()

运行效果：