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

news2024/11/23 16:48:47

在这里插入图片描述

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

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

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,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_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)

在这里插入图片描述

父模板代码:

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.coloradmin.cn/o/1551177.html

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

相关文章

霉霉说地道中文,口型、卡点几乎完美,网友:配音时代结束了?

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站 每天给大家更新可用的国内可用chatGPT资源 更多资源欢迎关注 「给电影配音的时代即将结束了。」 AI 的发展让很多人直呼饭碗被抢了&#xff0c;以前是艺术家、程序员…… 现在配音员也要失业了&a…

763. 划分字母区间(力扣LeetCode)

763. 划分字母区间 题目描述 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串…

Linux:基础IO

回顾C文件接口 stdin & stdout & stderr C 默认会打开三个输入输出流&#xff0c;分别是 stdin, stdout, stderr 仔细观察发现&#xff0c;这三个流的类型都是 FILE*, fopen 返回值类型&#xff0c;文件指针 系统文件I/O 接口介绍 open man open #include <sy…

LeetCode 每日一题 Day 109-115

1969. 数组元素的最小非零乘积 给你一个正整数 p 。你有一个下标从 1 开始的数组 nums &#xff0c;这个数组包含范围 [1, 2p - 1] 内所有整数的二进制形式&#xff08;两端都 包含&#xff09;。你可以进行以下操作 任意 次&#xff1a; 从 nums 中选择两个元素 x 和 y 。 选…

【贫民版】Springboot导入返回错误Excel表格 ---- 通过session存储字节数据,再获取写到响应体中。

目录 前言一、需求二、需求分析三、代码 前言 在开发中会遇到导入文件后&#xff0c;失败的数据需要整理在加上导入失败原因。 按照目前主流的方法&#xff0c;要么通过流输出到response响应体中&#xff0c;或者把失败的excel上传到服务器中&#xff0c;返回url让前端下载。…

pyqt 创建右键菜单栏

class MainModule(QMainWindow, Ui_MainWindow):def __init__(self):super().__init__(parentNone)self.setupUi(self)# 允许出现菜单栏self.tableWidget.setContextMenuPolicy(Qt.CustomContextMenu)# 对空间添加右键菜单栏处理 self.tableWidget.customContextMenuRequested.…

Redis入门到实战-第十九弹

Redis实战热身Count-min-sketch篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、…

cuDNN——核心概念

在讨论graph和legacy API的细节之前&#xff0c;这一部分先介绍两者共同的核心概念。 cuDNN Handle cuDNN库暴露了一系列主机API&#xff0c;但是假设所有用到GPU的op&#xff0c;其必要的数据都可以直接从设备上访问。 使用cuDNN的应用必须先调用cudnnCreate()来初始化句柄…

【C/C++】C++中的四种强制类型转换

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

USART发送各种数据类型数据的原理及程序实现

硬件接线&#xff1a; 显示屏的SCA接在B11&#xff0c;SCL接在B10&#xff0c;串口的RX连接A9&#xff0c;TX连接A10。 新建Serial.c和Serial.h文件 在Serial.c文件中&#xff0c;实现初始化函数&#xff0c;等需要的函数&#xff0c;首先对串口进行初始化&#xff0c;只需要…

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

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

http模块—http请求练习

题目要求&#xff1a;搭建如下http服务&#xff1a; 1.当浏览器向我们的服务器发送请求时&#xff0c;当请求类型是get请求&#xff0c;请求的url路径地址是/login。响应体结果是登录页面 2.当浏览器向我们的服务器发送请求时&#xff0c;当请求类型是get请求&#xff0c;请求…

物流智能蓝牙锁控设计方案

一、行业背景与需求分析 物流行业作为全球贸易和供应链管理的关键环节&#xff0c;其安全性和效率对整个经济体系的运作至关重要。随着电子商务的兴起和全球市场的一体化&#xff0c;物流行业正面临着前所未有的挑战&#xff0c;尤其是在货物安全、运输效率、成本控制和信息管…

C#学生信息成绩管理系统

一、系统功能描述 本系统包括两类用户&#xff1a;学生、管理员。管理员可以通过系统来添加管理员信息、修改管理员信息、添加学生信息、修改学生信息&#xff1b;开设课程、查询课程、录入成绩、统计成绩、修改成绩、修改个人密码等&#xff0c;而学生则可以通过系统来选择课…

干货分享:品牌如何通过社媒激发年轻人消费力?

随着年轻人的消费愈发理性&#xff0c;年轻人在消费时更偏向于熟人种草场景下的信任决策&#xff0c;社交媒体成为品牌吸引用户的必争之地。今天媒介盒子就来和大家聊聊&#xff1a;品牌如何通过社媒激发年轻人消费力。 一、 激发用户共鸣&#xff0c;与用户产生情感连接。 虽…

Midjourney辞典AIGC中英双语图文辞典+Midjourney提示关键词

完整内容下载&#xff1a;https://download.csdn.net/download/u010564801/89042077 完整内容下载&#xff1a;https://download.csdn.net/download/u010564801/89042077 完整内容下载&#xff1a;https://download.csdn.net/download/u010564801/89042077

哈希表(hash_table) 哈希存储 算法相关知识 稳定性 时间复杂度

哈希存储(散列存储) 为了快速定位数据 哈希表 哈希冲突 / 哈希矛盾 关键字不一样&#xff0c;但是映射之后结果一样 如何避免 哈希矛盾&#xff1f; 1、重新设计哈希函数&#xff0c;尽可能均匀散列分布在哈希表 2、开放定址法&#xff1a;向下寻找未存储的位置进行存放数…

aardio - 【库】godking.plusSkin 设置plus样式

库名&#xff1a;godking.plusSkin 库文件下载工具&#xff1a;http://chengxu.online/show.asp?softid272 使用本库&#xff0c;可以快速设置plus样式。主要针对按钮样式进行快速批量设置。 部分用法如下&#xff1a; import win.ui; /*DSG{{*/ var winform win.form(tex…

C++初学者:如何优雅地写程序

我喜欢C语言的功能强大&#xff0c;简洁&#xff0c;我也喜欢C#的语法简单&#xff0c;清晰&#xff0c;写起来又方便好用。 一、为什么不用C语言写程序。 C语言用来做题目&#xff0c;考试研究是很方便的&#xff0c;但是用来写程序做软件&#xff0c;你就会发现&#xff0c…

Android中运动事件的处理

1.目录 目录 1.目录 2.前言 3.程序演示 4.第二种程序示例 5.扩展 2.前言 触摸屏&#xff08;TouchScreen&#xff09;和滚动球&#xff08;TrackBall&#xff09;是 Android 中除了键盘之外的主要输入设备。如果需要使用触摸屏和滚动球&#xff0c;主要可以通过使用运动事…