【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_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.mfbz.cn/a/495693.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

FPGA时钟资源详解(2)——Clock-Capable Inputs

FPGA时钟系列文章总览&#xff1a;FPGA原理与结构&#xff08;14&#xff09;——时钟资源https://ztzhang.blog.csdn.net/article/details/132307564 目录 一、概述 1.1 为什么使用CC 1.2 如何使用CC 二、Clock-Capable Inputs 2.1 SRCC 2.2 MRCC 2.3 其他用途 2.3.1…

Ubuntu 系统下安装 Redis

目录 一、上传 Redis 安装包并解压缩 二、编译 1、安装gcc&#xff0c;不然后面编译报错 2、开始编译 三、生成后台服务 四、修改配置文件 1、设置密码 2、设置后台启动 五、启动服务 一、上传 Redis 安装包并解压缩 tar -zxvf redis-6.0.2.tar.gz 二、编译 1、安装g…

对话 Mines of Dalarnia: Web3 游戏创新,社区驱动与公链共建

作者&#xff1a;stellafootprint.network 嘉宾&#xff1a;Manfred Pack&#xff0c;Mines of Dalarnia 游戏开发总监 采访者&#xff1a;Alex Cooper&#xff0c;Footprint Analytics 北美社区与 BD 负责人 在区块链游戏领域&#xff0c;去中心化和玩家经济正在颠覆传统游戏…

【Java多线程】3——Lock API控制多线程

3 Lock API控制多线程 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记仓库&#x1f449;https://github.com/A-BigTree/tree-learning-notes 个人主页&#x1f449;https://www.abigtree.top ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个…

第18次修改了可删除可持久保存的前端html备忘录

第17次修改了可删除可持久保存的前端html备忘录&#xff1a;增加年月日星期&#xff0c;增加倒计时&#xff0c;更改保存区名称可以多个备忘录保存不一样的信息&#xff0c;匹配背景主题&#xff1a;现代深色 <!DOCTYPE html> <html lang"zh"> <head&…

SpringBoot国际化配置流程(超详细)

前言 最新第一次在做SpringBoot的国际化&#xff0c;网上搜了很多相关的资料&#xff0c;都是一些简单的使用例子&#xff0c;达不到在实际项目中使用的要求&#xff0c;因此本次将结合查询的资料以及自己的实践整理出SpringBoot配置国际化的流程。 SpringBoot国际化 "i…

智慧公厕四大核心能力,赋能城市公共厕所智能化升级

公共厕所是城市基础设施中不可或缺的一部分&#xff0c;但由于传统的公共厕所在建设与规划上&#xff0c;存在一定的局限性&#xff0c;导致环境卫生差、管理难度大、使用体验不佳等问题&#xff0c;给市民带来了很多不便。而智慧公厕作为城市智能化建设的重要组成部分&#xf…

谈谈变压器中的位置编码

变压器中的位置编码 一、说明 在上一期的“Transformers for Everyone”系列中&#xff0c;我们介绍了 Transformer 的概念&#xff0c;并深入研究了第一个关键架构元素&#xff1a;输入嵌入。如果你错过了第一集&#xff0c;你可以通过阅读来赶上&#xff1a;适合所有人的变形…

【Linux】 gcc(linux下的编译器)程序的编译和链接详解

目录 前言&#xff1a;快速认识gcc 1. 程序的翻译环境和执行环境 2.编译和链接 2.1翻译环境 2.2编译环境 1. 预处理 gcc -E指令 test.c&#xff08;源文件&#xff09; -o test.i&#xff08;生成在一个文件中&#xff0c;可以自己指定&#xff09; 预处理完成之后就停下来&am…

状态压缩的三种模型

第一种类型&#xff08;摆放方块&#xff09;&#xff1a; 代码如下&#xff1a; #include<iostream> #include<climits> #include<algorithm> #include<cstring> #include<cstdio> #include<cmath> #include<queue> #include<s…

vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程

文章目录 效果展示template代码script代码样式代码 效果展示 template代码 <template><el-container class"home"><el-aside class"flex" :style"{ width: asideDisplay ? 70px : 290px }"><div class"aside-left&q…

项目中自动引入神器 - unplugin-auto-import/unplugin-vue-components

前端 项目中 自动引入 神器 前言 在开发中&#xff0c;我们总喜欢站在巨人的肩膀上开发&#xff0c;比如用一些 框架&#xff1a;vue,react, 组件库&#xff1a;element&#xff0c;ant。 工具函数&#xff1a;axios&#xff0c;lodash 现在是模块化时代&#xff0c;我们…

基于SpringBoot后端实现连接MySQL数据库并存贮数据

目录 一、什么是MySQL数据库 二、基于SpringBoot框架连接MySQL数据库 1、首先添加MySQL依赖&#xff1a; 2、配置数据库连接&#xff1a; 3、创建实体类&#xff1a; 4、创建Repository接口&#xff1a; 5、使用Repository&#xff1a; 三、编写业务SQL语句 1、使用Spring Data…

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

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…

异或和之和【蓝桥杯】/拆位+贡献法

异或和之和 拆位贡献法 思路&#xff1a;刚开始考虑遍历L和R&#xff0c;同时可以用一个二维数组存储算过的值&#xff0c;但是时间复杂度还是O(n^2)&#xff0c;所以这种还是要拆位和利用贡献法 可以对于每个位&#xff0c;一定区间内&#xff0c;如果有奇数个1则异或值为1&…

阿里云ECS选型推荐配置

本文介绍构建Kubernetes集群时该如何选择ECS类型以及选型的注意事项。 集群规格规划 目前在创建Kubernetes集群时&#xff0c;存在着使用很多小规格ECS的现象&#xff0c;这样做有以下弊端&#xff1a; 网络问题&#xff1a;小规格Worker ECS的网络资源受限。 容量问题&…

Cubase 8.0 下载地址及安装教程

Cubase是一款流行的音乐制作和音频录制软件&#xff0c;由德国公司Steinberg开发。它是一款专业级的数字音频工作站&#xff08;DAW&#xff09;&#xff0c;广泛应用于音乐制作、音频录制、混音和制作等领域。 Cubase提供了丰富的功能和工具&#xff0c;用于录制、编辑、混音…

ubuntu22.04物理机双系统手动分区

ubuntu22.04物理机双系统手动分区 文章目录 ubuntu22.04物理机双系统手动分区1. EFI系统分区2. 交换分区3. /根分区4. /home分区分区后的信息 手动分区顺序&#xff1a;EFI系统分区(/boot/efi)、交换分区(/swap)、/根分区、/home分区。 具体参数设置&#xff1a; 1. EFI系统分…

Java SPI 机制

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

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

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