我爱Flask之Flask模板继承(你想要的这都有！！！)

最新推荐文章于 2024-05-10 21:02:23 发布

小石y

最新推荐文章于 2024-05-10 21:02:23 发布

阅读量1.5k

点赞数 10

分类专栏： Flask框架文章标签： python flask 继承 flask模板

本文链接：https://blog.csdn.net/qq_45261963/article/details/109327896

版权

Flask框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

黄色标注重点注意

Flask模板继承

1.模板继承

在使用模板中，可能会遇到以下情况：
       •多个模板具有完全相同的顶部和底部内容
       •多个模板中具有相同的模板代码内容，但是内容中部分值不一样
       •多个模板中具有完全相同的 html 代码块内容
这种情况，可以使用 JinJa2 模板中的继承来进行实现
       •Flask中的模板可以继承，把模板中重复出现的元素抽取出来放在父模板中，子模板再根据自己的需要进行改写
       •通常，在父模板中定义公用的部分，通过定义block给子模板开一个口，子模板从父模板中继承并根据需要重写，从而提高了代码的复用性
简单复制的方法测试：

from flask import Flask, render_template

app = Flask(__name__)


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


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


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

templates目录下，创建index.html和list.html模板：
模板index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>这是首页</h1>
    <ul>
        <li>新浪微博</li>
        <li>我的微信</li>
        <li>广告服务</li>
        <li>关于我们</li>
    </ul>
    <div class="footer">
        网站底部
    </div>
</body>
</html>

模板list.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程列表</title>
</head>
<body>
    <h1>这是课程列表页面</h1>
    <ul>
        <li>Python</li>
        <li>Java</li>
        <li>PHP</li>
        <li>C++</li>
    </ul>
    <div class="footer">
        网站底部
    </div>
</body>
</html>

网页显示：
在这里插入图片描述
由上可得：两个网页结构相同，并且在模板代码中元素内容基本相同，代码重复，可用继承进行优化

继承优化代码

新建base.html 即为父模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}

        {% endblock %}
    </title>
</head>
<body>
    {% block header %}
        <h1>这是首页</h1>
    {% endblock %}
    {% block content %}
        <ul>
            <li>课程列表</li>
            <li>课程详情</li>
            <li>视频教程</li>
            <li>关于我们</li>
        </ul>
    {% endblock %}
    {% block footer %}
        <div class="footer">
            网站底部
        </div>
    {% endblock %}

</body>
</html>

•base.html抽取了子模板都需要用到的元素html、body等公共部分，并且对于子模板都要用到的样式文件也进行了抽取，同时对于子模板需要重写的地方，比如title、header、content、footer等都定义成了block，子模板继承自base.html后可根据自己的需求，自定义block中的内容
继承于base.html的index.html：

{# 导入所需要的的父模板 #}
{% extends 'base.html' %}

{% block title %}
    这是首页
{% endblock %}

{# 重写父模板中的block #}
{% block header %}
    <h1>子模版首页</h1>
{% endblock %}

继承于base.html的list.html：

{% extends 'base.html' %}

{% block title %}
    这是首页
{% endblock %}


{% block header %}
    <h1>子模版课程列表页面</h1>
{% endblock %}

{% block content %}
        <ul>
            <li>Python</li>
            <li>Java</li>
            <li>PHP</li>
            <li>C++</li>
        </ul>
{% endblock %}

由上可得：在使用模板继承后，代码的复用性明显提高、代码量显著减少
{% extends ‘base.html’ %}导入继承的父模板，然后在相应的block中自定义所需内容
在父模板中放入block中的代码子模板继承后可以重写，而父模板中未放入block中的代码子模板只能直接继承不能重写
模板中的block不能重名

在父模板和子模板中block可以嵌套，测试如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}

        {% endblock %}
    </title>
</head>
<body>
    {% block header %}
        <h1>这是首页</h1>
    {% endblock %}
    {% block content %}
        <ul>
            <li>课程列表</li>
            <li>课程详情</li>
            <li>视频教程</li>
            <li>关于我们</li>
        </ul>
    {% endblock %}
    {% block footer %}
        <div class="footer">
            网站底部
        </div>
        {% block footerlink %}
        <a href="#">友情链接</a>
        {% endblock %}
    {% endblock %}

</body>
</html>

index.html模板：

{% extends 'base.html' %}

{% block title %}
    这是首页
{% endblock %}


{% block header %}
    <h1>这是子模版首页</h1>
{% endblock %}

{% block footer %}
    <div class="footer">
        网站底部
    </div>
    {% block footerlink %}
    <a href="#">子模版主页友情链接</a>
    {% endblock %}
{% endblock %}

list.html模板：

{% extends 'base.html' %}

{% block title %}
    这是首页
{% endblock %}


{% block header %}
    <h1>这是子模版课程列表页面</h1>
{% endblock %}

{% block content %}
    <ul>
        <li>Python</li>
        <li>Java</li>
        <li>PHP</li>
        <li>C++</li>
    </ul>
{% endblock %}

{% block footerlink %}
    <a href="#">子模版课程列表友情链接</a>
{% endblock %}

网页显示：
在这里插入图片描述由上可得：在父模板中block定义嵌套后，在子模板中重写block时，可以将两层嵌套都引用再重写，也可以只引用内部block嵌套并重写，根据需要选择

注意：

•父模板中定义的block相当于给子模板提供了一个接口，只有父模板中已经定义了，才能在子模板中使用
•在子模板中不能扩展其他代码，即在block之外添加的代码是无效的，子模版中的所有代码都必须在父模板中及其定义的block中实现
修改index.html模板的代码：

{% extends 'base.html' %}

{% block title %}
    这是首页
{% endblock %}


{% block header %}
    <h1>这是子模版首页</h1>
{% endblock %}

{% block footer %}
    <div class="footer">
        网站底部
    </div>
    {% block footerlink %}
    <a href="#">子模版主页友情链接</a>
    {% endblock %}
{% endblock %}

<p>但行好事，莫问前程</p>

网页显示：
在这里插入图片描述
由上可得：在block之外的代码没有被渲染出来

一个子模板只能继承自一个父模板，不能多继承
如果在一个block需要用到其它block的内容，需要使用self.block名() 来引用
修改index.html模板：

{% extends 'base.html' %}

{% block title %}
    今日时事
{% endblock %}


{% block header %}
    <h1>这是子模版首页</h1>
{% endblock %}

{% block footer %}
    <h1>这个是网页标题-----{{ self.title() }}----</h1>
    {% block footerlink %}
    <a href="#">子模版主页友情链接</a>
    {% endblock %}
{% endblock %}

网页显示：
在这里插入图片描述
调用父模板中的block时，在改写父模板的同时还需要使用父模板中的代码，可以类比Python中类的继承，使用super()函数 调用父模板中的代码，把当前block父模板中的内容添加到子模板中
修改index.html模块：

{% extends 'base.html' %}

{% block title %}
    今日时事
{% endblock %}


{% block header %}
    {{ super() }}
    <h1>这是子模版首页</h1>
{% endblock %}

{% block footer %}
    <h1>这个是网页标题-----{{ self.title() }}----</h1>
    {% block footerlink %}
    <a href="#">子模版主页友情链接</a>
    {% endblock %}
{% endblock %}

网页显示：
在这里插入图片描述
由上可得：子模板可以继承父模板同时重写父模板的内容

内容存在问题可以在评论中指正，欢迎讨论，谢谢大家！！

小石y

关注

10
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
我爱Flask之Flask模板继承(你想要的这都有！！！)

== 黄色标注重点注意==Flask模板继承== 黄色标注重点注意==1.模板继承继承优化代码注意：==内容存在问题可以在评论中指正，欢迎讨论，谢谢大家！！==1.模板继承在使用模板中，可能会遇到以下情况：       •多个模板具有完全相同的顶部和底部内容       •多个模板中具有相同的模板代码内容，但是内容中部分值不一样  &nb
复制链接

扫一扫

专栏目录