一周学会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')

我们测试下:

相关推荐
万粉变现经纪人2 小时前
如何解决 pip install 安装报错 ModuleNotFoundError: No module named ‘tokenizers’ 问题
python·selenium·测试工具·scrapy·beautifulsoup·fastapi·pip
编程武士4 小时前
从50ms到30ms:YOLOv10部署中图像预处理的性能优化实践
人工智能·python·yolo·性能优化
我的xiaodoujiao4 小时前
Windows系统Web UI自动化测试学习系列2--环境搭建--Python-PyCharm-Selenium
开发语言·python·测试工具
傻啦嘿哟6 小时前
Python SQLite模块:轻量级数据库的实战指南
数据库·python·sqlite
Q_Q5110082857 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
XueminXu7 小时前
Python读取MongoDB的JSON字典和列表对象转为字符串
python·mongodb·json·pymongo·mongoclient·isinstance·json.dumps
techdashen7 小时前
12分钟讲解Python核心理念
开发语言·python
jie*7 小时前
小杰机器学习(nine)——支持向量机
人工智能·python·机器学习·支持向量机·回归·聚类·sklearn
闭着眼睛学算法7 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
郝学胜-神的一滴7 小时前
谨慎地迭代函数所收到的参数 (Effective Python 第31条)
开发语言·python·程序人生·软件工程