flask实战之模板实现公共导航

基础实现

目标

在Flask中,使用模板继承和块(blocks)可以方便地提取公共导航菜单,使得您可以在多个页面上重用相同的导航结构。以下是一个基本示例,展示如何创建一个包含公共导航菜单的模板:

创建基础模板

(base.html)

这个模板将作为其他模板的父模板,包含通用的结构,如导航菜单。

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{{ title }}</title>
</head>
<body><nav><!-- 公共导航菜单 --><ul><li><a href="/">首页</a></li><li><a href="/movie">电影</a></li><li><a href="/about">关于我们</a></li><!-- 更多菜单项 --></ul></nav><main><!-- 主要内容将在这里展示 -->{% block content %}{% endblock %}</main><footer><!-- 页脚内容 --></footer>
</body>
</html>

创建继承基础模板的页面模板

(movie-extends.html):

这个模板将继承 base.html 并定义或覆盖特定部分,比如主要内容。

<!-- templates/movie-extends.html -->
{% extends 'base.html' %}{% block title %}
{{title}}
{% endblock %}{% block content %}
<!-- 电影页面的特定内容 -->
<h1>电影列表</h1>
{% block content %}<!-- 电影页面的特定内容 --><h1>电影列表</h1><ul class="movie-list">{% for movie in movies %}<li><div class="title">{{ movie.title }}</div><div class="year">{{ movie.year }}</div></li>{% endfor %}<!-- 更多电影列表项可以在这里添加 --></ul><!-- 电影列表或其他内容 -->
{% endblock %}
{% endblock %}

Flask视图函数中渲染模板:

当您想要渲染电影页面时,可以指定 movie.html 模板。

from flask import Flask, url_for ,redirect ,render_template
app = Flask(__name__)movies = [{'title': '喜剧之王', 'year': '1999'},    # 喜剧之王{'title': '少林足球', 'year': '2001'},    # 少林足球{'title': '功夫', 'year': '2004'},         # 功夫{'title': '西游降魔篇', 'year': '2013'},  # 西游降魔篇{'title': '美人鱼', 'year': '2016'},      # 美人鱼{'title': '大话西游之大圣娶亲', 'year': '1995'},  # 大话西游之大圣娶亲{'title': '大话西游之月光宝盒', 'year': '1995'},  # 大话西游之月光宝盒{'title': '九品芝麻官', 'year': '1994'},  # 九品芝麻官{'title': '唐伯虎点秋香', 'year': '1993'},  # 唐伯虎点秋香{'title': '食神', 'year': '1996'}           # 食神
]@app.route('/movie-extends')
def movie_extends_view():return render_template('movie-extends.html', title='使用公用模板电影列表',movies=movies)app.run(host='0.0.0.0',port=1027,debug=True)

使用模板继承,您可以在 base.html 中定义一个块(例如 content),然后在子模板中覆盖它以提供特定页面的内容。这样,您就可以在所有页面上共享相同的导航菜单和其他公共元素,而只需在子模板中指定页面特有的内容。

确保在Flask配置中设置了 TEMPLATES_AUTO_RELOADTrue,以便在开发过程中模板文件的更改能够自动生效。同时,记得在生产环境中将其关闭以提高性能。

运行

浏览器访问: http://127.0.0.1:1027/movie-extends ,得到如下结果,你会发现页面很丑,我们还需要在当前页面自定义 CSS 和 JS 。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

进阶实现

目标

  • 子页面进行,引入css 或者内联 css ,还有js

这里需要用到两个关键词 extra_js extra_css 。意思是额外的。

代码

<!-- templates/movie-extends.html -->
{% block extra_css %}<!-- Page-specific CSS -->
{#    <link rel="stylesheet" href="{{ url_for('static', filename='css/movie.css') }}">#}<style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 0;}.container {width: 80%;margin: auto;overflow: hidden;}h1 {text-align: center;margin: 20px 0;}.movie-list {list-style: none;padding: 0;}.movie-list li {background-color: #fff;border: 1px solid #ddd;margin-bottom: 10px;padding: 10px;border-radius: 5px;}.movie-list .title {font-size: 20px;color: #333;}.movie-list .year {font-size: 14px;color: #666;}.movie-list .director {font-size: 16px;color: #4a4a4a;}</style>
{% endblock %}{% block extra_js %}<!-- Page-specific JavaScript --><script src="{{ url_for('static', filename='js/movie.js') }}"></script>
{% endblock %}{% extends 'base.html' %}{% block title %}{{ title }}
{% endblock %}{% block content %}<!-- 电影页面的特定内容 --><h1>电影列表</h1><ul class="movie-list">{% for movie in movies %}<li><div class="title">{{ movie.title }}</div><div class="year">{{ movie.year }}</div></li>{% endfor %}<!-- 更多电影列表项可以在这里添加 --></ul><!-- 电影列表或其他内容 -->
{% endblock %}

这里跟上面比,多了下面两个包裹的内容。需要值得注意的是,一定要放在 {% extends 'base.html' %} 继承语句的前面否则不会生效。

{% block extra_css %}<!-- Page-specific CSS -->
{#    <link rel="stylesheet" href="{{ url_for('static', filename='css/movie.css') }}">#}<style>{#样式#}	</style>
{% endblock %}{% block extra_js %}<!-- Page-specific JavaScript --><script src="{{ url_for('static', filename='js/movie.js') }}"></script>
{% endblock %}{% extends 'base.html' %}

效果

浏览器运行 http://127.0.0.1:1027/movie-extends ,你会发现我们写的css 在当前页面生效了。js 同理。

e-specific JavaScript -->

{% endblock %}

{% extends ‘base.html’ %}

### 效果浏览器运行 http://127.0.0.1:1027/movie-extends ,你会发现我们写的css 在当前页面生效了。js 同理。![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a11c0f4ad9d341c28ad5c41248d5466c.png)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/355618.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端菜鸡学习日记 -- 关于pnpm

哈咯哇大家&#xff0c;我又来了&#xff0c;最近稍微悠闲一些&#xff0c;所以就趁着这个机会学习一些新的知识&#xff0c;今天就是碰巧遇到了pnm&#xff0c;这个可以看作是npm的升级版本&#xff0c;比npm要快&#xff0c;用起来也更得劲更迅速 官网地址&#xff1a;https…

【CT】LeetCode手撕—103. 二叉树的锯齿形层序遍历

目录 题目1- 思路2- 实现⭐103. 二叉树的锯齿形层序遍历——题解思路 2- ACM实现 题目 原题连接&#xff1a;103. 二叉树的锯齿形层序遍历 1- 思路 二叉树的层序遍历&#xff0c;遇到奇数时&#xff0c;利用 Collections.reverse() 翻转即可 2- 实现 ⭐103. 二叉树的锯齿形层…

优惠卷秒杀(并发问题)

Redis实战篇 | Kyles Blog (cyborg2077.github.io) 目录 一、Redis实现全局唯一id 二、添加优惠卷 三、实现秒杀下单 四、解决超卖问题&#xff08;库存为负&#xff09; 乐观锁解决超卖问题&#xff08;CAS法&#xff09; 五、实现一人一单 ​编辑 悲观锁解决一人一单问题…

QT绘画仪表盘

代码一步一步讲&#xff0c;就不写用啥之类的了&#xff0c;暗部走来&#xff0c;自己找使用的类以及使用方法 1、创建工程 2、重载paintEvent #include <QMainWindow> #include <QPainter> #include <QPaintEvent> protected:virtual void paintEvent(QP…

QT自定义标题栏窗口其一:实现拖动及可拉伸效果

1、效果 2、核心代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(paren

前端新手小白的Vue3入坑指南

昨天有同学说想暑假在家学一学Vue3&#xff0c;问我有没有什么好的文档&#xff0c;我给他找了一些&#xff0c;然后顺带着&#xff0c;自己也写一篇吧&#xff0c;希望可以给新手小白们一些指引&#xff0c;Vue3欢迎你。 目录 1 项目安装 1.1 初始化项目 1.2 安装初始化依…

redis哨兵模式下业务代码连接实现

目录 一&#xff1a;背景 二&#xff1a;实现过程 三&#xff1a;总结 一&#xff1a;背景 在哨兵模式下&#xff0c;真实的redis服务地址由一个固定ip转变为可以变化的ip,这样我们业务代码在连接redis的时候&#xff0c;就需要判断哪个主redis服务地址&#xff0c;哪个是从…

火绒安全删除explorer.exe文件造成windows系统异常的问题

问题 过程是这样的&#xff0c;电脑在使用过程中突然就变成了黑色的&#xff0c;任务栏、桌面等都消失了&#xff0c;只有部分程序的窗口。具体如下&#xff1a; 因为&#xff0c;在变化的时候&#xff0c;我有瞟到一眼有个火绒的气泡消息&#xff0c;就感觉是火绒错误的删除…

适用于Mac的免费外置硬盘数据恢复软件

“我有一个 1 TB 的外置硬盘&#xff0c;它被意外格式化了。我尝试从中恢复丢失的数据。我把它连接到我的Mac&#xff0c;但里面什么也没找到。我正在寻找适用于Mac的免费外置硬盘数据恢复软件&#xff0c;例如奇客数据恢复Mac版或其他Mac数据恢复免费软件来扫描它并恢复数据。…

如何有效地进行机台数据管理,让数据发挥更大的价值?

机台数据管理是一个涉及收集、存储、分析和保护与机台&#xff08;可能是机械设备、生产线设备、医疗设备等&#xff09;相关数据的过程。通常包括以下几个方面&#xff1a; 1.数据收集&#xff1a;使用传感器和数据采集系统来收集机台的性能数据&#xff0c;如温度、压力、速…

Python轻松设置Excel单元格数字显示格式

Excel作为强大的数据处理与分析工具&#xff0c;不仅能够存储大量数据&#xff0c;还支持复杂的数据处理与可视化功能。而如何恰当地展示Excel表格中的数据是Excel文件制作的关键之一。这便涉及到Excel单元格数字格式的设置。数字格式不仅关乎数据的美学呈现&#xff0c;如货币…

【Sa-Token|4】Sa-Token微服务项目应用

若微服务数量多&#xff0c;如果每个服务都改动&#xff0c;工作量大&#xff0c;则可以只在网关和用户中心进行改动&#xff0c;也是可以实现单点登录的。 这种方式可以通过在网关服务中生成和验证 Sa-Token&#xff0c;并将其与现有的 Token关联存储在 Redis 中。用户中心提供…

arsetryhtehrwgefwadasdadasd

驱动项目 https://github.com/wqreytuk/article/blob/main/agsdygasidgasuidgoGx64_ASM_Kernel_Mode-main.7z 48b91400000080f7ffff48b8bd427ae5d594bfd6488b0948f7e148b8cdcccccccccccccc48c1ea1748f7e24c8bea49c1ed02 直接在windbg中把执行内存修改为上面这一串字节序列&am…

Java开发环境配置

一、JDK 下载JDK&#xff1a;Java Downloads | Oracle 配置环境变量&#xff1a;09、Java入门&#xff1a;Path、JAVA_HOME环境变量配置_哔哩哔哩_bilibili 二、IDEA 下载IDEA&#xff1a; Download IntelliJ IDEA – The Leading Java and Kotlin IDE (jetbrains.com) 建…

【Sa-Token|3】Sa-Token集成到现有微服务详细介绍

一、系统架构调整 用户中心&#xff1a;保持现有的用户登录、注册接口不变。多个项目&#xff1a;前后端分离&#xff0c;保持现有逻辑不变。网关服务&#xff1a;新增或配置网关服务&#xff0c;处理所有请求并进行 Token 校验和转发。统一 Token 管理&#xff1a;通过 Sa-Tok…

Kafka多维度调优

优化金字塔 应用程序层面 框架层面&#xff08;Broker层面&#xff09; JVM层面 操作系统层面 应用程序层面&#xff1a;应当优化业务代码合理使用kafka&#xff0c;合理规划主题&#xff0c;合理规划分区&#xff0c;合理设计数据结构&#xff1b; 框架层面&#xff1a;在不…

俄罗斯塔斯社TASS 媒体投放报道:海外媒体发稿扭转战局

大舍传媒 -作为一家颇具影响力的媒体机构&#xff0c;一直致力于传播客观、真实的新闻信息。最近&#xff0c;大舍传媒注意到了塔斯社TASS的报道&#xff0c;了解到海外媒体发稿对于扭转国内局势有着重要的影响。本文将就此话题进行分析探讨。 塔斯社TASS&#xff1a;俄语区最…

transformer之位置编码

由于 Transformer 模型中自注意力模块具有置换不变性,因此仅使用注意力机制无法捕捉序列中的顺序关系,从而退化为“词袋模型”。为了解决这一问题,需要引入位置编码(Position Embedding, PE)对于序列信息进行精确建模,从而将绝对或相对位置信息整合到模型中。 什么是位置…

Excel 组内多列明细拼成一行

某表格有 1 个分组列和 2 个明细列。 ABC1ObjectNameInfo212AGggtz44456312AGggtr99987412AKkkio66543512ABbvgf66643612AVvvhg888765712AFffgt8786FGggtf23232596FXxxde44321610P23Cccvb554328711P23Vvvbj565656412P23Sswec898976413P23Llloiu343432 现在要把组内的多列明细…

在ubuntu中恢复误删除的文件

1、安装 TestDisk 在 Ubuntu 上&#xff0c;可以使用以下命令安装 TestDisk&#xff1a; sudo apt-get install testdisk2、查询你删除的文件所在那个分区 #查询分区 df -h #我这里是/dev/sda2 #也可以使用下面命令查看具体哪个分区 lsblk3、查询该分区是什么系统类型 sudo …