【python】flask模板渲染引擎Jinja2中的模板继承,简化前端模块化开发

在这里插入图片描述

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

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

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,前后端开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,面试宝典等分享。

所属的专栏:flask框架零基础,进阶应用实战教学
景天的主页:景天科技苑

文章目录

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

模板继承

为什么要用模板继承

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

在这里插入图片描述

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

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

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

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

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

例如:顶部菜单

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

模板继承案例分析

视图代码

from flask import Flask, render_templateapp = 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 htmlif __name__ == '__main__':app.run(debug=True)

在这里插入图片描述

父模板代码:

templates/common/base.html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{ title }}</title>
</head>
<body><h1>头部公共内容-[菜单]-登录窗口</h1>
{#      在父模板挖坑,为了能在子模板替换成自己的内容#}{% block main %}{% endblock main %}{% block menu %}{% endblock menu %}{% block footer %}{% endblock footer %}{% block window %}{% endblock window %}
</body>
</html>

在这里插入图片描述

子模板代码:

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

templates/index9.html,代码:

{% extends "common/base.html" %}{% block main %}
<h1>站点首页的主要内容!!!</h1>
{% endblock main %}

templates/index10.html,代码:

{% extends "common/base.html" %}{#在子模板中,根据父模板设置的区块名称,来定义自己的内容#}
{% block main %}<h1>商品列表页的商品信息!!!</h1>
{% endblock main %}

templates/index11.html,代码:

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

浏览器访问,首页
在这里插入图片描述

商品展示页
在这里插入图片描述

用户中心页
在这里插入图片描述

模板继承使用时注意点

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

总结

1.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 blocks ,先定义一个模板,在需要替换的地方设置钩子,这样有谁想继承时,只需要继承模板,然后在钩子处做修改。
2.尽量多设置钩子,这样子页面可扩展的范围就越多。
3.在钩子处,我们可以自定义自己页面的样式,js动作等。
4.大大缩减了冗余代码,实现相同效果。
5.感兴趣的朋友可以一键三连,flask高阶应用持续更新中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/573937.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓Activity上滑关闭效果实现

最近在做一个屏保功能&#xff0c;需要支持如图的上滑关闭功能。 因为屏保是可以左右滑动切换的&#xff0c;内部是一个viewpager 做这个效果的时候&#xff0c;关键就是要注意外层拦截触摸事件时&#xff0c;需要有条件的拦截&#xff0c;不能影响到内部viewpager的滑动处理…

LLLM并发加速部署方案(llama.cpp、vllm、lightLLM、fastLLM)

大模型并发加速部署 解析当前应用较广的几种并发加速部署方案&#xff01; llama.cpp vllm lightLLM fastLLM

docker 的网络管理

docker应用自带了三种类型的网络&#xff0c;然后我们自己也能自定义网络 roottest-virtual-machine:~# docker network ls NETWORK ID NAME DRIVER SCOPE 4c3e28760cff bridge bridge local afd1493dc119 host host local 5f200e2eaf22 n…

【学习】软件测试行业有哪些从业方向

从事任何一个行业&#xff0c;不论想入行的新人还是已经在职的从业人员&#xff0c;一定要系统化的掌握自身的学习路线和发展方向&#xff0c;随时对自身的优劣点掌握清楚。尤其是对于软件测试这个岗位。测试职业所涉及的技能范围比较广&#xff0c;测试流程、测试计划、缺陷管…

C是用什么语言写出来的?

C是用什么语言写出来的? C语言的起源和发展是一个迭代过程&#xff1a; 1. 最初的C语言编译器的开发始于对B语言的改进。B语言是由Ken Thompson设计的&#xff0c;它是基于BCPL语言简化而来的。在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「 C语言的…

jmeter常用的函数

20211025白板 课前内容&#xff1a; 参数&#xff1a; 用户定义变量&#xff1a;它是一个全局变量&#xff0c;在启动运行时&#xff0c;获取一次值&#xff0c;在运行过程中&#xff0c;不会动态获取值。 用户定义变量&#xff0c;在启动时获取一次值&#xff0c;在运行过程中…

课堂练习——4、实验环境练习

任务描述 本关任务&#xff1a;修改 Linux 0.11 内核程序&#xff0c;将系统启动时显示的字符串由原来的Partition table ok.变为Hello, world!。 通过本关任务&#xff0c;可以熟悉 Linux 0.11 内核实验环境&#xff0c;掌握内核程序的编辑、编译和测试方法。 相关知识 为了…

SCP收容物006~010

注 &#xff1a;此文接SCP简介以及001~005的介绍,本文只供开玩笑 ,与 steve_gqq_MC 合作 --------------------------------------------------------------------------------------------------------------------------------- 目录 scp-006 scp-007 scp-008 scp-010 …

【Hive】HIVE运行卡死没反应

Hive运行卡死 再次强调 hive&#xff1a;小兄弟&#xff0c;没想到吧&#xff0c;咱可不是随便的人。&#x1f604; 那么&#xff0c;这次又遇见了hadoop问题&#xff0c;问题描述是这样的。 hive> insert into test values(1, nucty, 男); Query ID atguigu_202403241754…

StringRedisTemplate与RedisTemplate详解【序列化的方式不同】

spring 封装了 RedisTemplate 对象来进行对redis的各种操作&#xff0c;它支持所有的 redis 原生的 api。在RedisTemplate中提供了几个常用的接口方法的使用&#xff0c;分别是: private ValueOperations<K, V> valueOps; private HashOperations<K, V> hashOps; …

设计模式之原型模式讲解

原型模式本身就是一种很简单的模式&#xff0c;在Java当中&#xff0c;由于内置了Cloneable 接口&#xff0c;就使得原型模式在Java中的实现变得非常简单。UML图如下&#xff1a; 我们来举一个生成新员工的例子来帮助大家理解。 import java.util.Date; public class Employee…

【科研基础】VAE: Auto-encoding Variational Bayes

[1]Kingma, Diederik P., and Max Welling. “Auto-encoding variational bayes.” arXiv preprint arXiv:1312.6114 (2013). [2] [论文简析]VAE: Auto-encoding Variational Bayes[1312.6114] [3] The Reparameterization Trick [4] 变分法的基本原理是什么? 文章目录 1-…