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

server/2025/2/28 16:34:48/

锋哥原创的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.ppmy.cn/server/171330.html

相关文章

Linux上用C++和GCC开发程序实现不同PostgreSQL实例下单个数据库的多个Schema之间的稳定高效的数据迁移

设计一个在Linux上运行的GCC C程序&#xff0c;同时连接两个不同的PostgreSQL实例&#xff0c;两个实例中分别有一个数据库的多个Schema的表结构完全相同&#xff0c;复制一个实例中一个数据库的多个Schema里的所有表的数据到另一个实例中一个数据库的多个Schema里&#xff0c;…

BUG日志:使用热点或免费加速器时git链接github出现端口22拒绝访问的解决方法

问题描述 现象&#xff1a;git 连接 GitHub 时&#xff0c;报错 Connection refused on port 22。触发条件&#xff1a; 使用移动热点或免费加速器时必现。使用正常 Wi-Fi 时不出现。 解决步骤 临时切换为 HTTPS 协议&#xff08;绕过 22 端口&#xff09;&#xff1a; git r…

波导阵列天线 学习笔记11双极化全金属垂直公共馈电平板波导槽阵列天线

摘要&#xff1a; 本communicaition提出了一种双极化全金属垂直公共馈电平板波导槽阵列天线。最初提出了一种公共馈电的单层槽平板波导来实现双极化阵列。此设计消除了传统背腔公共馈电的复杂腔体边缘的必要性&#xff0c;提供了一种更简单的天线结构。在2x2子阵列种发展了宽十…

推荐一款uniapp的日历插件魔改版可显示阳历阴历农历公历

上图&#xff1a; 1.下载 https://download.csdn.net/download/ktucms/90436225 2.调用,解压后&#xff0c;放到根目录就行了。 js js methds: et_rlbox_clear:function () {var thatthis;that.pdata.datestr_start"";that.pdata.datestr_end"";},et_ch…

C#与AI的交互(以DeepSeek为例)

C#与ai的交互 与AI的交互使用的Http请求的方式&#xff0c;通过发送请求&#xff0c;服务器响应ai生成的文本 下面是完整的代码&#xff0c;我这里使用的是Ollama本地部署的deepseek&#xff0c;在联网调用api时&#xff0c;则url会有不同 public class OllamaRequester {[Se…

PyTorch-基础(CUDA、Dataset、transforms、卷积神经网络、VGG16)

PyTorch-基础 环境准备 CUDA Toolkit安装&#xff08;核显跳过此步骤&#xff09; CUDA Toolkit是NVIDIA的开发工具&#xff0c;里面提供了各种工具、如编译器、调试器和库 首先通过NVIDIA控制面板查看本机显卡驱动对应的CUDA版本&#xff0c;如何去下载对应版本的Toolkit工…

Vue03

Vue03 注&#xff1a;为Vue实例添加属性&#xff0c;写法如下 methods:{ addSex(){ Vue.set(this.student,"sex",男) } }Vue监视数据原理&#xff1a; vue会监视data中所有层次的数据 如何监测对象中的数据 通过setter实现监视&#xff0c;且要在ne…

Jmeter聚合报告导出log文档,Jmeter聚合报告导出到CSV

Jmeter聚合报告导出log文档 在Filename中输入 EKS_perf_log\\${type}_log\\${__P(UNIQUEID,${__time(YMDHMS)})}\all-graph-results-log.csv 可以得到执行的log&#xff0c;文件夹包含时间戳 Jmeter聚合报告导出到CSV 点击Save Table Data&#xff0c;保存到CSV文件中