【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.mzph.cn/news/776298.shtml

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

相关文章

什么是Prompt Tuning?

本文是观看视频What is Prompt Tuning?后的笔记。 大语言模型&#xff08;如ChatGPT &#xff09;是基础模型&#xff0c;是经过互联网上大量知识训练的大型可重用模型。 他们非常灵活&#xff0c;同样的模型可以分析法律文书或撰写文章。 但是&#xff0c;如果我们需要用其解…

cocos3.0 关于UI组件学习

Sprite 图片&#xff1a;官方文档 Size Mode: 1.Raw&#xff1a;原始大小 2.TRIMMED: 默认&#xff0c;会裁切原始图片透明像素 3.Custom&#xff1a;自定义&#xff0c;只要修改ContentSize&#xff0c;会自动设置 Type 1.Simple:普通,会铺满&#xff0c;一张图。 2.Sliced…

力扣热门算法题 89. 格雷编码,92. 反转链表 II,93. 复原 IP 地址

89. 格雷编码&#xff0c;92. 反转链表 II&#xff0c;93. 复原 IP 地址&#xff0c;每题做详细思路梳理&#xff0c;配套Python&Java双语代码&#xff0c; 2024.03.24 可通过leetcode所有测试用例。 目录 89. 格雷编码 解题思路 完整代码 Python Java 92. 反转链表…

苹果智能戒指专利获批,Find My功能为智能穿戴提供智能防丢

根据美国商标和专利局&#xff08;USPTO&#xff09;近日公示的清单&#xff0c;苹果公司获得了一项关于智能戒指的专利&#xff0c;展示了多种交互手势&#xff0c;不仅支持捏合、画圈等&#xff0c;而且支持玩“石头剪刀布”游戏。 这项新专利名为“皮肤间接触检测”&#xf…

南京观海微电子---Vitis HLS设计流程介绍——Vitis HLS教程

1. 传统的FPGA设计流程 传统的RTL设计流程如下图所示&#xff1a; 传统的FPGA RTL设计流程主要是采用VHDL、VerilogHDL或System Verilog进行工程的开发&#xff0c;同时也是通过硬件描述语言来编写测试案例&#xff08;Test Bench&#xff09;对开发的工程进行仿真验证。 随后…

基于单片机热电偶智能体温检测系统设计

**单片机设计介绍&#xff0c;基于单片机热电偶智能体温检测系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机热电偶智能体温检测系统设计概要 一、引言 本系统旨在通过单片机实现对人体体温的智能检测&#…

一文教你学会用群晖NAS配置WebDAV服务结合内网穿透实现公网同步Zotero文献库

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

电缆故障测试仪的原理和组成部件分别是什么?

电缆故障测试仪是专为检测电缆线路中的各种故障而设计制造的精密电子设备&#xff0c;广泛应用于电力、通信、石油化工、航空航天等领域。这类仪器的工作原理和组成相对复杂&#xff0c;下面将详细阐述。 电缆故障测试仪的工作原理 电缆故障测试仪的核心原理通常涉及电磁波反…

【C语言】 gets()puts()fgets()fputs()字符串输入输出函数的用法

文章目录 C语言中的字符串输入输出函数&#xff1a;gets、puts、fgets与fputsgets函数puts函数fgets函数fputs函数 C语言中的字符串输入输出函数知识点总结结语 C语言中的字符串输入输出函数&#xff1a;gets、puts、fgets与fputs 在C语言中&#xff0c;处理字符串的输入和输出…

用系统观念打造智慧公厕,引领智慧城市的发展

智慧公厕&#xff0c;作为智慧城市建设的一部分&#xff0c;具有重要意义。在高度发达的科技条件下&#xff0c;如何打造高质量的智慧公厕是一个值得思考的问题。本文将以智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;大量精品案例项目现场实景实图实例&#xff0c;探…

Java I/O

什么是 IO流&#xff1f; 存储和读取数据的解决方案 I: input O: output 流&#xff1a;像水流一样传输数据 IO流的作用&#xff1f; 用于读写数据&#xff08;本地文件&#xff0c;网络&#xff09; IO流从 传输方式 分类 字符是给人看的&#xff0c;字节是给计算机看的。 …

【SpringBoot】了解简单原理 Bean管理 配置优先级

文章目录 一、配置优先级1.1 命令行设置端口号1.2 打包后修改端口号1.3 优先级 小结 二、Bean的管理2.1 获取Bean2.2 Bean作用域2.3 第三方Bean 三、剖析Springboot的底层原理3.1 起步依赖3.2 自动配置3.2.1 第三方类装配3.2.2 原理分析 总结Web后端开发总结&#xff1a;源码跟…

计算机专业学习单片机有什么意义吗?

玩单片机跟玩计算机区别还是很大的, 单片机有众多的种类,每一种又可能有很多个系列.可以说单片机就是为了专款专用而生的.这样来达到产品成本的降低,这就是现在身边的很多的电子产品价格一降再降的原因之一.在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一…

阅读FAST-LIO2(Lidar-IMU)论文

一、摘要 本文介绍了 FAST-LIO2&#xff1a;一种快速、稳健且通用的 LiDAR 惯性里程计框架。 FASTLIO2 建立在高效紧耦合迭代卡尔曼滤波器的基础上&#xff0c;具有两个关键创新&#xff0c;可实现快速、稳健和准确的 LiDAR 导航&#xff08;和映射&#xff09;。第一个是直接将…

热门主食冻干希喂/PURPOSE/百利测评对比!真实喂养分享!

在当今科学养宠的时代里&#xff0c;主食冻干已经成为猫咪日常饮食的重要一环。主食冻干的高肉含量特性使其易于被猫咪吸收和消化&#xff0c;同时&#xff0c;它还能提供其他猫粮所无法提供的微量物质&#xff0c;满足猫咪的全面营养需求。然而&#xff0c;面对市面上众多品牌…

Java SPI 机制

SPI 机制的定义 在Java中&#xff0c;SPI&#xff08;Service Provider Interface&#xff09;机制是一种用于实现软件组件之间松耦合的方式。它允许在应用程序中定义服务接口&#xff0c;并通过在类路径中发现和加载提供该服务的实现来扩展应用程序功能。 SPI 机制通常涉及三…

信创实力进阶,Smartbi再获华为云鲲鹏技术认证

日前&#xff0c;经华为技术有限公司评测&#xff0c;思迈特商业智能与数据分析软件Smartbi Insight V11与华为技术有限公司Kunpeng 920 Taishan 200完成并通过相互兼容性测试认证&#xff0c;成功再获华为云鲲鹏技术认证书&#xff0c;标志着Smartbi与华为云鲲鹏产业生态合作更…

动态规划相关题目

文章目录 1.动态规划理论基础2.斐波那契数3.爬楼梯4.使用最小花费爬楼梯5.不同路径6.不同路径 II7. 整数拆分8. 不同的二叉搜索树 1.动态规划理论基础 1.1 什么是动态规划? 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一…

安卓逆向 | JEB静态分析APK

JEB反编译APK-静态审计&#xff0c;找到加密算法 参考来源&#xff1a;https://blog.csdn.net/weixin_38819889/article/details/108910525 apk来源&#xff1a;https://app5.scrape.center/ 软件&工具&#xff1a;JEB / 雷电模拟器 / burpsuite 声明&#xff1a;scrape.ce…

浅模仿小米商城布局(有微调)

CSS文件 *{margin: 0;padding: 0;box-sizing: border-box; }div[class^"h"]{height: 40px; } div[class^"s"]{height: 100px; } .h1{width: 1528px;background-color: green; } .h11{background-color:rgb(8, 220, 8); } .h111{width: 683px;background-c…