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

一周学会Flask3 Python Web开发-Jinja2模板继承和include标签使用

锋哥原创的Flask3  Python Web开发 Flask3视频教程:

2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili

不管是开发网站还是后台管理系统,我们页面里多多少少有公共的模块。比如博客网站,就有公共的头部,菜单和底部栏。每个页面都有,我们往往要抽取出这些公共模块,然后统一维护。JinJa2提供了模板继承和include标签。

我们先把顶部信息和菜单抽取新建一个header.html放templates下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>头部,菜单</p>
</body>
</html>

同理 底部信息页抽取新建一个footer.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>底部</p>
</body>
</html>

我们再新建一个公共的父模版base.html,其他子模板继承即可,共同部分比如header,footer继承下来,不同的部分自己实现。这里可以通过block标签在父类先预留一块。然后子类实现block即可。include标签引入公共模块。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}默认标题{% endblock %}</title>
</head>
<body>
{% include 'header.html' %}
{% block content %}默认内容
{% endblock %}
{% include 'footer.html' %}
</body>
</html>

新建博客首页index.html,通过extends继承base.html,以及重写实现block title和content

{% extends "base.html" %}
{% block title %}博客首页
{% endblock %}
{% block content %}博客列表
{% endblock %}

同理博客帖子页面detail.html

{% extends "base.html" %}
{% block title %}博客帖子
{% endblock %}
{% block content %}博客帖子
{% endblock %}

user.py里实现下视图函数:

@user_bp.route('/index')
def index():return render_template('index.html')@user_bp.route('/detail')
def detail():return render_template('detail.html')

我们测试下:

http://www.lryc.cn/news/543615.html

相关文章:

  • 【2025.2.25更新】wordpress免费AI插件,文章内容、图片自动生成、视频自动生成、网站AI客服、批量采集文章,内置deepseek联网满血版
  • 待解决 leetcode71 简化路径 栈的应用
  • 数据安全_笔记系列09_人工智能(AI)与机器学习(ML)在数据安全中的深度应用
  • RocketMQ 可观测性最佳实践
  • P9420 [蓝桥杯 2023 国 B] 子 2023
  • OpenAI开放Deep Research权限,AI智能体大战升级,DeepSeek与Claude迎来新对决
  • 学习笔记04——JMM内存模型
  • 将VsCode变得顺手好用(1
  • Fisher信息矩阵(Fisher Information Matrix,简称FIM)
  • Vue2+Three.js加载并展示一个三维模型(提供Gitee源码)
  • Linux红帽:RHCSA认证知识讲解(三)Linux基础指令与Vim编辑器的使用
  • python读取sqlite温度数据,并画出折线图
  • 《论企业集成平台的理解与应用》审题技巧 - 系统架构设计师
  • UE Python笔记
  • 使用django调用deepseek api,搭建ai网站
  • YOLOv12 ——基于卷积神经网络的快速推理速度与注意力机制带来的增强性能结合
  • 两台互通的服务器使用Docker部署一主两从MySQL8.0.35
  • Java23种设计模式案例
  • stm32hal库寻迹+蓝牙智能车(STM32F103C8T6)
  • JavaScript知识点4
  • 形式化数学编程在AI医疗中的探索路径分析
  • QT 引入Quazip和Zlib源码工程到项目中,无需编译成库,跨平台,加密压缩,带有压缩进度
  • Ubuntu 安装 Nginx并配置反向代理
  • GitHub SSH连接问题解决指南
  • C++ 跨平台的 GetCurrentThreadId() 获取当前线程ID实现
  • 钉钉MAKE AI生态大会思考
  • SQL笔记#复杂查询
  • 【Linux】基于UDP/TCP套接字编程与守护进程
  • springboot 引入前端
  • RTSP/Onvif安防平台EasyNVR接入EasyNVS显示服务缺失的原因与解决方案