Flask 入门6:模板继承

1.

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

2. 使用 Flask-Bootstrap 集成 Bootstarp

Bootstrap 是 Twitter 开发的一个开源 Web 框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且兼容所有现代的桌面和移动平台 Web 浏览器。
Bootstrap 是客户端框架,因此不会直接涉及服务器。服务器需要做的只是提供引用了 Bootstrap 层叠样式表(CSS)和 JavaScript 文件的 HTML 响应,并在 HTML、CSS 和 JavaScript 代码中实例化所需的用户界面元素。这些操作最理想的执行场所就是模板。
要想在应用中集成 Bootstrap,最直接的方法是根据 Bootstrap 文档中的说明对 HTML 模板进行必要的改动。不过,这个任务使用 Flask 扩展处理要简单得多,而且相关的改动不会导致主逻辑混乱。

初始化 Flask-Bootstrap:

from flask_bootstrap import Bootstrap  
# ... 
bootstrap = Bootstrap(app)

初始化Flask-Bootstrap 之后,就可以在应用中使用一个包含所有Bootstrap文件和一般结构的基模板。应用利用Jinja2的模板继承机制来扩展这个基模板。
例如:

{% extends "bootstrap/base.html" %} 
{% block title %}Flasky{% endblock %} 
{% block navbar %} 
<div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Flasky</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> </ul> </div> </div> 
</div> 
{% endblock %} 
{% block content %} 
<div class="container"> <div class="page-header"> <h1>Hello, {{ name }}!</h1> </div> 
</div> 
{% endblock %}

在这个模板中,navbar 区块使用 Bootstrap 组件定义了一个简单的导航栏。content区块中有个 <div> 容器,其中包含一个页头。之前版本中的欢迎消息,现在就放在这个页头里。
在这里插入图片描述

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

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

相关文章

Netty中使用编解码器框架

目录 什么是编解码器&#xff1f; 解码器 将字节解码为消息 将一种消息类型解码为另一种 TooLongFrameException 编码器 将消息编码为字节 将消息编码为消息 编解码器类 通过http协议实现SSL/TLS和Web服务 什么是编解码器&#xff1f; 每个网络应用程序都必须定义如何…

解决CORS错误(Spring Boot)

记录一下错误&#xff0c;以博客的形式 前言 跨域&#xff08;Cross-Origin&#xff09;是指在Web开发中&#xff0c;当一个Web应用试图从一个源&#xff08;域名、协议、端口组合&#xff09;获取资源时&#xff0c;该请求的目标与当前页面的源不同。具体来说&#xff0c;当一…

25、数据结构/二叉树相关练习20240207

一、二叉树相关练习 请编程实现二叉树的操作 1.二叉树的创建 2.二叉树的先序遍历 3.二叉树的中序遍历 4.二叉树的后序遍历 5.二叉树各个节点度的个数 6.二叉树的深度 代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h> ty…

SolidWorks学习笔记——入门知识2

目录 建出第一个模型 1、建立草图 2、选取中心线 3、草图绘制 4、拉伸 特征的显示与隐藏 改变特征名称 5、外观 6、渲染 建出第一个模型 1、建立草图 图1 建立草图 按需要选择基准面。 2、选取中心线 图2 选取中心线 3、草图绘制 以对称图形举例&#xff0c;先画出…

蓝桥杯---生日蜡烛

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

路由器如何映射端口映射?

在现代互联网中&#xff0c;随着网络应用的不断发展&#xff0c;很多用户需要进行远程访问或搭建服务器来满足自己的需求。由于网络安全的原因&#xff0c;直接将内网设备暴露在公网中是非常危险的。为了解决这个问题&#xff0c;路由器映射端口映射技术应运而生。本文将介绍什…

redis之布隆过滤

目录 1、redis之布隆过滤 2、布隆过滤器原理 3、布隆过滤器使用步骤 初始化bitmap 添加占坑位 判断是否存在圜 1、redis之布隆过滤 布隆过滤&#xff1a;有一个初值都为0的bit数组和多个哈希函数构成&#xff0c;用来快速判断集合中是否存在某个元素。目的&#xff1a;减…

新型RedAlert勒索病毒针对VMWare ESXi服务器

前言 RedAlert勒索病毒又称为N13V勒索病毒&#xff0c;是一款2022年新型的勒索病毒&#xff0c;最早于2022年7月被首次曝光&#xff0c;主要针对Windows和Linux VMWare ESXi服务器进行加密攻击&#xff0c;到目前为止该勒索病毒黑客组织在其暗网网站上公布了一名受害者&#x…

2024年:用OKR管理你的生活

在科技高速发展的时代&#xff0c;越来越多的企业和团队开始采用OKR&#xff08;Objectives and Key Results&#xff09;管理方法来设定目标并跟踪进度。你是否想过&#xff0c;将OKR理念引入个人生活&#xff0c;以更有效地实现人生目标&#xff1f;本文将探讨如何在2024年运…

国产三维剖面仪—MPAS-100相控参量阵浅地层剖面仪

最近声学所东海站邹博士发来了他们最新的浅地层剖面仪—MPAS-100相控参量阵浅地层剖面仪的资料&#xff0c;市场型号GeoInsight&#xff0c;委托Ocean Physics Technology公司销售&#xff0c;地大李师兄的公司负责技术支持。 MPAS-100相控参量阵浅地层剖面仪就是俗称的三维浅…

『运维备忘录』之 Ansible 自动化运维工具

一、简介 Ansible是基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、cfengine、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能的自动化运维工具&#xff0c;广泛用于配置管理、应用部署以及任务协…

07:Kubectl 命令详解|K8S资源对象管理|K8S集群管理(重难点)

Kubectl 命令详解&#xff5c;K8S资源对象管理&#xff5c;K8S集群管理 kubectl管理命令kubectl get 查询资源常用的排错命令kubectl run 创建容器 POD原理pod的生命周期 k8s资源对象管理资源文件使用资源文件管理对象Pod资源文件deploy资源文件 集群调度的规则扩容与缩减集群更…

计算机网络-无线通信技术与原理

一般我们网络工程师接触比较多的是交换机、路由器&#xff0c;很少涉及到WiFi和无线设置&#xff0c;但是呢在实际工作中一般企业也是有这些需求的&#xff0c;这就需要我们对于无线的一些基本配置也要有独立部署能力&#xff0c;今天来简单了解一下。 一、无线网络基础 1.1 无…

Linux(三)--文件系统

Linux命令简介 [rootlocalhost ~]# 表示 Linux 系统的命令提示符。 []&#xff1a;这是提示符的分隔符号&#xff0c;没有特殊含义。 root&#xff1a;显示的是当前的登录用户&#xff0c;笔者现在使用的是 root 用户登录。 &#xff1a;分隔符号&#xff0c;没有特殊含义。 l…

PyTorch 2.2 中文官方教程(四)

torch.nn 到底是什么&#xff1f; 原文&#xff1a;pytorch.org/tutorials/beginner/nn_tutorial.html 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 注意 点击这里下载完整示例代码 作者&#xff1a; Jeremy Howard&#xff0c;fast.ai。感谢 Rachel Thomas 和 Fr…

Vue.js设计与实现(霍春阳)

Vue.js设计与实现 (霍春阳) 电子版获取链接&#xff1a;Vue.js设计与实现(霍春阳) 编辑推荐 适读人群 &#xff1a;1.对Vue.js 2/3具有上手经验&#xff0c;且希望进一步理解Vue.js框架设计原理的开发人员&#xff1b; 2.没有使用过Vue.js&#xff0c;但对Vue.js框架设计感兴趣…

深度学习系列56:使用whisper进行语音转文字

1. openai-whisper 这应该是最快的使用方式了。安装pip install -U openai-whisper&#xff0c;接着安装ffmpeg&#xff0c;随后就可以使用了。模型清单如下&#xff1a; 第一种方式&#xff0c;使用命令行&#xff1a; whisper japanese.wav --language Japanese --model…

算法随想录第五十二天打卡|300.最长递增子序列 , 674. 最长连续递增序列 , 718. 最长重复子数组

300.最长递增子序列 今天开始正式子序列系列&#xff0c;本题是比较简单的&#xff0c;感受感受一下子序列题目的思路。 视频讲解&#xff1a;动态规划之子序列问题&#xff0c;元素不连续&#xff01;| LeetCode&#xff1a;300.最长递增子序列_哔哩哔哩_bilibili 代码随想录…

SpringBoot3整合Mybatis-Plus,自定义动态数据源starter

文章目录 前言正文一、项目总览二、核心代码展示2.1 自定义AbstractRoutingDataSource2.2 动态数据源DynamicDataSource2.3 动态数据源自动配置2.4 动态数据源上下文DynamicDataSourceContextHolder2.5 动态数据源修改注解定义2.6 修改切面DynamicDataSourceAspect2.7 动态数据…

【RT-DETR有效改进】计算训练好权重文件对应的FPS、推理每张图片的平均时间(科研必备)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是利用我们训练好的权重文件计算FPS,同时打印每张图片所利用的平均时间,模型大小(以MB为单位),同时支持batch_size功能的选择,对于轻量化模型的读者来说,本文的内容对你一定有…