Flask 入门6:模板继承

一个网站中,大部分网页的模块是重复的,比如顶部的导航栏,底部的备案信息。如果在每个页面中都重复的去写这些代码,会让项目变得臃肿,提高后期的维护成本。比较好的做法是,通过模板继承,把一些重复性的代码写在父模板中,子模板继承父模板后,再分别实现自己页面的代码。我们首先来看一个父模板 base.html 的例子:

<!DOCTYPE html>
<html lang="en">
<head><link rel="stylesheet" href="base.css" /><title> {% block title %} {% endblock %} </title>{% block head %} {% endblock %}
</head>
<body><div id="body">{% block body %} {% endbody %} </div><div id="footer">{% block footer %}&copy; Copyright 2008 by <a href="http://domins.invaild/">you</a>{% endblock %}</div>	
</body>
</html>

以上父模板中,编写好了网页的整体结构,并且把所有子模板都需要用到的样式文件 base.css 也提前引用好了。然后针对子模板需要重写的地方,则定义成了 block,比如以上定义了 title、head、body、footer 这几个 block,子模板在继承了父模板后,重写对应 block 的代码,即可完成子模板的渲染。这里我们用继承 base.html 的方式,实现一个 index.html 文件,代码如下:

{% extends "base.index" %}
{% block title %} 首页 {% endblock %}
{% block head %}<style type="text/css">.detail{color: red;}</style>
{% endblock %}
{% block content%}<h1>这里是首页 </h1><p class="detail">首页的内容</p>
{% endblock %}

首先我们通过 extends 语法,加载父模板,因为 base.html 和 index.html 是在同一级目录下,所以直接写“base.html”。这里需要注意的是,extends 必须出现在子模版所有代码的最前面。接下来分别实现了 title、head、content 这三个 block,实现的 block 中的代码,将会被自动填充到父模板指定的位置,并且最终会生成一个完成 html 结构的 index.html 文件。

模板中不能出现重名的 block,如果一个地方需要用到另外一个 block 中的内容,可以使用 self.blockname 的方式进行引用,比如:

<title>{% block title %}这是标题{% endblock %}
</title>
<h1> {{ self.title()}} </h1>

以上示例代码中,h1 标签中通过 {{self.title}} 把 title 这个 block 中的内容引用到 h1 标签中。

如果子模版想要继承父模板中某个 block 的内容,比如以上案例中,我们想要继承父模板 footer 这个 block 中已有的内容,则可以通过 super() 来实现:

{% block footer %}{{super()}}// 子模版自己的代码
{% endblock %}

如果没有 {{super()}},那么子模版将不能继承父模板 footer 这个 block 中的内容。

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

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

相关文章

电脑文件误删除怎么办?8个恢复软件解决电脑磁盘数据可能的误删

您是否刚刚发现您的电脑磁盘数据丢失了&#xff1f;不要绝望&#xff01;无论分区是否损坏、意外格式化或配置错误&#xff0c;存储在其上的文件都不一定会丢失到数字深渊。 我们已经卷起袖子&#xff0c;深入研究电脑分区恢复软件的广阔领域&#xff0c;为您带来一系列最有效…

合并排序算法

合并排序依赖于合并操作&#xff0c;即将两个已经排序的序列合并成一个序列&#xff0c;具体的过程如下&#xff1a; 1申请空间&#xff0c;使其大小为两个已经排序序列之和&#xff0c;然后将待排序数组复制到该数组中。 2设定两个指针&#xff0c;最初位置分别为两个已经排…

如何标准化地快速编辑文档

介绍个公文类的文档技巧吧&#xff0c;尤其在国企、机关、有ISO管理体系内控要求的会议记录、公文写作等&#xff0c;要求大同小异&#xff0c;一般都是中规中矩的【GB/T 9704—2012】&#xff0c;其实国标本身就是经过长期检验&#xff0c;证明是最规范合理&#xff0c;阅读效…

深度学习介绍

对于具备完善业务逻辑的任务&#xff0c;大多数情况下&#xff0c;正常的人都可以给出一个符合业务逻辑的应用程序。但是对于一些包含超过人类所能考虑到的逻辑的任务&#xff0c;例如面对如下任务&#xff1a; 编写一个应用程序&#xff0c;接受地理信息、卫星图像和一些历史…

Java 中 ExceptionInInitializer 错误

在这篇文章中&#xff0c;我们将了解Java中的 ExceptionInInitializerError。 Java中 ExceptionInInitializerError 简介 ExceptionInInitializerError 是 Java 中的未经检查的异常&#xff0c;它是 Error 类的子类。 它属于运行时异常的类别。 在 Java 中&#xff0c;每当 J…

python爬虫代码示例:爬取京东详情页图片【京东API接口】

一、Requests请求示例【京东API接口】 爬虫爬取网页内容首先要获取网页的内容&#xff0c;通过requests库进行获取。 安装 pip install requests 示例代码 import requests url "http://store.weigou365.cn"res requests.get(url)res.text 执行效果如下&#x…

大数据 - Spark系列《三》- 加载各种数据源创建RDD

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 目录 3.1&#x1f9c0;加载文件(本地) 1. 加载本地文件路径 &#x1f32e;使用te…

Java实现婚恋交友网站 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 会员管理模块2.3 新闻管理模块2.4 相亲大会管理模块2.5 留言管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 会员信息表3.2.2 新闻表3.2.3 相亲大会表3.2.4 留言表 四、系统展示五、核心代码5.…

Redis核心技术与实战【学习笔记】 - 20.Redis原子操作及并发访问

概述 使用 Redis 时&#xff0c;不可避免地会遇到并发访问的问题&#xff0c;比如说如果多个用户同时下单&#xff0c;就会对缓存在 Redis 中的商品库存并发更新。一旦有了并发写操作&#xff0c;数据就会被修改&#xff0c;如果我们没有对并发写请求做好控制&#xff0c;就可…

MySQL-----DML基础操作

DML语句 DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增删改操作。 ▶ 添加数据(INSERT) 【语法】 1. 给指定字段添加数据 INSERTO 表名 (字段名1&#xff0c;字段名2,...) VALUES (值1&#xff0c;值2,...); 2.给全…

蓝桥杯---生日蜡烛

某君从某年开始每年都举办一次生日party&#xff0c;并且每次都要吹熄与年龄相同根数的蜡烛&#xff0c;现在算起来&#xff0c;他一共吹熄了236根蜡烛。请问,他从多少岁开始过生日party的? 请填写他开始过生日 party的年龄数。 注意:你提交的应该是一个整数&#xff0c;不要…

区间时间检索

前端 <el-col :md"6" v-if"advanced"><el-form-item :label"$t(inRecord.column.createTime)"><el-date-pickerstyle"width: 100%;"v-model"daterangeCreateTime"value-format"yyyy-MM-dd"type&qu…

JavaScript鼠标拖放(Drag and Drop)

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 拖放是现代界面不可或缺的交互方式之一。本文将介绍如何用JavaScript…

界面组件DevExpress中文教程 - 如何使用UI本地化客户端工具本地化应用

DevExpress拥有.NET开发需要的所有平台控件&#xff0c;包含600多个UI控件、报表平台、DevExpress Dashboard eXpressApp 框架、适用于 Visual Studio的CodeRush等一系列辅助工具。 获取DevExpress v23.2正式版下载(Q技术交流&#xff1a;909157416&#xff09; 在2023年12月…

django+flask网上购物商城系统的设计与实现python-vue

全球经济在快速的发展&#xff0c;中国更是进步飞速&#xff0c;这使得国内的互联网技术进入了发展的高峰时期&#xff0c;这让中外资本不断转向互联网这个大市场[3]。在这个信息高度发达的现在&#xff0c;利用网络进行信息管理改革已经成为了人们追捧的一种趋势。“网上购物系…

华西建筑智能化团队助力建筑行业转型升级

华西建筑智能化团队全力推进建筑数字化转行。华西建筑智能化团队作为专业的机电安装及弱电智能化项目施工管理团队&#xff0c;先后实施了多个大型机电、智能化工程项目&#xff0c;包括&#xff1a;智慧医院项目、智能楼宇项目、机场/体育场馆/展馆等大型公共建筑及科研单位园…

sqli-labs-master靶场训练笔记(21-38|精英级)

2024.1.30 level-21 (cookie 注入数据加密) 从页面上就可以看出这次的数据被 baes64 加密了 中国有句古话&#xff1a;师夷长技以制夷 &#xff0c;用base64加密后的数据即可爆出数据 加密前&#xff1a; admin and updatexml(1,concat(~,(select database()),~),1) and …

python内置模块abc,抽象基类

一、简介 abc 模块&#xff08;Abstract Base Classes&#xff09;是 Python 标准库中的一个模块&#xff0c;主要用于创建和使用抽象基类。 抽象基类是一种特殊的类&#xff0c;用于定义接口和共享功能&#xff0c;但不能直接实例化。它们用于建立类的继承关系&#xff0c;并…

搜索专项---Flood Fill

文章目录 池塘计数城堡问题山峰与山谷 一、池塘计数OJ链接 1.BFS做法 #include <bits/stdc.h>#define x first #define y secondtypedef std::pair<int,int> PII;constexpr int N1010;int n,m; char g[N][N]; bool st[N][N];//用来表示已经记录过的 std::queue&…

javaEE - 21( 15000字 Tomcat 和 HTTP 协议入门 -2)

一&#xff1a; HTTP 响应 1.1 认识 “状态码” (status code) 状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况…)&#xff0c;以下为常见的状态码. 1.1.1 200 OK 这是一个最常见的状态码, 表示访问成功. 抓包抓到的大部分结果都是 200 HTTP/…