【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发
作者:mmseoamin日期:2024-04-01

【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第1张

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑

🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。

🏆《博客》:Python全栈,前后端开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,面试宝典等分享。

所属的专栏:flask框架零基础,进阶应用实战教学

景天的主页:景天科技苑

文章目录

  • 模板继承
    • 为什么要用模板继承
    • 模板继承案例分析
    • 模板继承使用时注意点
    • 总结

      模板继承

      为什么要用模板继承

      比如博客园网站,点击不同目录,上面和右面页面基本是一样的,这就可以用模板继承方法,不然代码显得很冗余

      【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第2张

      在模板中,可能会遇到以下情况:

      • 多个模板具有完全相同的顶部和底部内容
      • 多个模板中具有相同的模板代码内容,但是内容中部分值不一样,弹窗
      • 多个模板中具有完全相同的 html 代码块内容,侧边栏

        像遇到这种情况,可以使用 JinJa2 模板中的 模板继承 来进行实现

        模板继承是为了重用模板中的公共内容。一般Web开发中,继承主要使用在网站的顶部菜单、底部、弹窗。这些内容可以定义在父模板中,子模板直接继承,而不需要重复书写。

        • block 标签定义的可重写的内容范围
          {% block 区块名称 %} {% endblock 区块名称 %}   #我们最好这样写,因为如果页面中有很多block,不写结束区块名可能会很难分清是哪个区块的结束符
          {% block 区块名称 %}  {% endblock %}
          

          例如:顶部菜单

          {% block menu %}{% endblock menu %}
          
          • block相当于在父模板中挖个坑,当子模板继承父模板时,可以进行对应指定同名区块进行代码填充。
          • 子模板使用 extends 标签声明继承自哪个父模板,一个项目中可以有多个父模板,但每个子模板只能继承一个父模板。
          • 父模板中定义的区块在子模板中被重新定义,在子模板中调用父模板的内容可以使用super()调用父模板声明的区块内容。

            模板继承案例分析

            视图代码

            from flask import Flask, render_template
            app = Flask(__name__, template_folder="templates")
            @app.route("/")
            def index():
                title = "站点首页"
                html = render_template("index9.html", **locals())
                return html
            @app.route("/list")
            def list():
                title = "商品列表页"
                html = render_template("index10.html", **locals())
                return html
            @app.route("/user")
            def user():
                title = "用户中心"
                html = render_template("index11.html", **locals())
                return html
            if __name__ == '__main__':
                app.run(debug=True)
            

            【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第3张

            父模板代码:

            templates/common/base.html

            
            
            
              
              {<!-- -->{ title }}
            
            
                  

            头部公共内容-[菜单]-登录窗口

            {# 在父模板挖坑,为了能在子模板替换成自己的内容#} {% block main %}{% endblock main %} {% block menu %}{% endblock menu %} {% block footer %}{% endblock footer %} {% block window %}{% endblock window %}

            【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第4张

            子模板代码:

            • extends指令声明这个模板继承自哪

              templates/index9.html,代码:

              {% extends "common/base.html" %}
              {% block main %}
              

              站点首页的主要内容!!!

              {% endblock main %}

              templates/index10.html,代码:

              {% extends "common/base.html" %}
              {#在子模板中,根据父模板设置的区块名称,来定义自己的内容#}
              {% block main %}
                

              商品列表页的商品信息!!!

              {% endblock main %}

              templates/index11.html,代码:

              {#模板继承的目录是基于templates#}
              {% extends "common/base.html" %}
              

              浏览器访问,首页

              【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第5张

              商品展示页

              【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第6张

              用户中心页

              【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发,在这里插入图片描述,第7张

              模板继承使用时注意点

                1. 不支持多继承,在同一个模板中不能使用多个extends
                1. 为了便于阅读,在子模板中使用extends时,尽量写在模板的第一行。
                1. 不能在一个模板文件中定义多个相同名字的block标签,否则会覆盖。
                1. 当在页面中使用多个block标签时,建议给结束标签endblock补充区块名,当多个block嵌套时,阅读性更好。

                总结

                1.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks ,先定义一个模板,在需要替换的地方设置钩子,这样有谁想继承时,只需要继承模板,然后在钩子处做修改。

                2.尽量多设置钩子,这样子页面可扩展的范围就越多。

                3.在钩子处,我们可以自定义自己页面的样式,js动作等。

                4.大大缩减了冗余代码,实现相同效果。

                5.感兴趣的朋友可以一键三连,flask高阶应用持续更新中。