当前位置: 首页 > web >正文

Jinja2 模板继承机制

1、Jinja2与模板继承的概述

Jinja2Python 常用的模板引擎,广泛用于 FlaskDjango 等 Web 框架,支持变量替换、流程控制、模板继承等功能。

其中,模板继承机制的作用包括:

  • 避免重复写相同结构(比如导航栏、页脚)
  • 实现结构统一、内容可变的网页布局
  • ✅ 提高开发效率、减少维护成本

例如你的网站有多个页面,它们的 <head>、导航栏、页脚都一样,只是中间内容不同。通过模板继承,这些公共部分只需写一次,其它页面只定义各自的主要内容即可。


2、模板继承基本用法

2.1、语法说明

Jinja2 模板继承依赖两个关键语法:

语法说明
{% extends "父模板.html" %}声明当前模板继承哪个模板
{% block 区块名 %}...{% endblock %}定义或覆盖模板中的指定区域

如果你想保留父模板中该区域的原始内容,可以在 block 内部使用{{ super() }}


2.2、父模板示例:_base.html

<!-- templates/_base.html -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>{% block title %}默认标题{% endblock %}</title>
</head>
<body><header>导航栏</header><main>{% block content %}默认内容{% endblock %}</main><footer>© 版权所有</footer>
</body>
</html>

说明:

  • titlecontent 是两个“可覆盖区域(block)”。

2.3、子模板示例:index.html

<!-- templates/index.html -->
{% extends "_base.html" %}{% block title %}首页{% endblock %}{% block content %}{{ super() }}<h1>欢迎</h1><p>这是首页内容</p>
{% endblock %}

说明:

  • extends 表示继承 _base.html
  • block title 替换了默认标题
  • block content 添加了自己的内容,同时保留了父模板的默认部分(通过 {{ super() }}
http://www.xdnf.cn/news/10273.html

相关文章:

  • 【Linux】mmap文件内存映射
  • LeetCode[257]二叉树的所有路径
  • 4.2.4 Spark SQL 数据写入模式
  • 67.实现AI流式回答的后端实现(2)
  • Vue-Router简版手写实现
  • 2025年5月个人工作生活总结
  • lstm 长短期记忆 视频截图 kaggle示例
  • Rock9.x(Linux)安装Redis7
  • 寒假学习笔记【匠心制作,图文并茂】——1.20拓扑、强连通分量、缩点
  • CppCon 2014 学习: The Implementation of Value Types
  • Compose原理 - 整体架构与主流程
  • JDK21深度解密 Day 8:Spring Boot 3与虚拟线程整合
  • 【清晰教程】查看和修改Git配置情况
  • SCSS 全面深度解析
  • neo4j 5.19.0安装、apoc csv导入导出 及相关问题处理
  • Windows最快速打开各项系统设置大全
  • RAID磁盘阵列配置
  • 鸿蒙编译ffmpeg库
  • M4Pro安装ELK(ElasticSearch+LogStash+Kibana)踩坑记录
  • 性能优化 - 理论篇:性能优化的七类技术手段
  • SMT贴片机工艺优化与效率提升策略
  • WEB3——为什么做NFT铸造平台?
  • 配置远程无密登陆ubuntu服务器时无法连接问题排查
  • 系统是win11+两个ubuntu,ubuntu20.04和ubuntu22.04,想删除ubuntu20.04且不用保留数据
  • 【图像处理入门】3. 几何变换基础:从平移旋转到插值魔法
  • day15 leetcode-hot100-29(链表8)
  • KWIC—Implicit Invocation
  • Redis实战-基于redis和lua脚本实现分布式锁以及Redission源码解析【万字长文】
  • 【android bluetooth 案例分析 04】【Carplay 详解 2】【Carplay 连接之手机主动连车机】
  • 【android bluetooth 案例分析 04】【Carplay 详解 3】【Carplay 连接之车机主动连手机】