Flask第31课——include标签
我们在上一节代码基础上增加一些代码，样式：
文件名index.html，代码：
{% from 'macros/forms.html' import input %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宏</title>
<style>
*{
list-style: none;
text-decoration: none;
}
.header{
height: 60px;
background: #3a3a3a;
color: #fff;
margin-bottom: 20px;
}
.header .nav-group{
margin-left: 10px;
}
.header .nav-group li{
float: left;
line-height: 60px;
margin: 0px 20px;
}
.nav-group li a{
color: #fff;
}
.footer{
height: 60px;
background: #3a3a3a;
}
.footer p{
color: #fff;
margin-left: 30px;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="header">
<ul class="nav-group">
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>
<table>
<tbody>
<tr>
<td>账号</td>
<td>{{ input(placeholder="请输入账号") }}</td>
</tr>
<tr>
<td>密码</td>
<td>{{ input(type="password", placeholder="请输入密码") }}</td>
</tr>
<tr>
<td></td>
<td>{{ input(type="submit", value="提交") }}</td>
</tr>
</tbody>
</table>
<div class="footer">
<p>页面底部</p>
</div>
</body>
</html>现在考虑这样一个问题，如果页面头部和底部是很多页面要用的样式，那么如果在每一个新的文件中都要复制相同的代码肯定不是我们希望的，这时候就可以用到include标签了：
用法
{% include '引用文件路径' %}用include前提是把相同的代码先提取出来，所以我们将对应的代码先提取成文件：
文件结构：
headers.html
<style>
*{
list-style: none;
text-decoration: none;
}
.header{
height: 60px;
background: #3a3a3a;
color: #fff;
margin-bottom: 20px;
}
.header .nav-group{
margin-left: 10px;
}
.header .nav-group li{
float: left;
line-height: 60px;
margin: 0px 20px;
}
.nav-group li a{
color: #fff;
}
</style>
<div class="header">
<ul class="nav-group">
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">视频</a></li>
</ul>
</div>footers.html
<style>
.footer{
height: 60px;
background: #3a3a3a;
}
.footer p{
color: #fff;
margin-left: 30px;
padding-top: 20px;
}
</style>
<div class="footer">
<p>页面底部</p>
</div>将公共部分提取出以后在调用的地方只需要用include标签调用即可：
index.html
{% from 'macros/forms.html' import input %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宏</title>
</head>
<body>
{% include 'index/headers.html' %}
<table>
<tbody>
<tr>
<td>账号</td>
<td>{{ input(placeholder="请输入账号") }}</td>
</tr>
<tr>
<td>密码</td>
<td>{{ input(type="password", placeholder="请输入密码") }}</td>
</tr>
<tr>
<td></td>
<td>{{ input(type="submit", value="提交") }}</td>
</tr>
</tbody>
</table>
{% include 'index/footers.html' %}
</body>
</html>如果还有一个详情页，那么只需要：
detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Detail</title>
</head>
<body>
{% include 'index/headers.html' %}
<p>这是详情页</p>
{% include 'index/footers.html' %}
</body>
</html>显示
Flask第31课——include标签的更多相关文章
- 【Flask模板】include标签
# include标签:1. 这个标签相当于是直接将指定的模版中的代码复制粘贴到当前位置.2. `include`标签,如果想要使用父模版中的变量,直接用就可以了,不需要使用`with context ...
- Android 多个include标签的监听事件处理
include标签的作用是为了xml文件代码的模块化,详细不再多提.主要是说说include标签的监听. 网上也有很多例子,不过大多是只写了一个include标签的监听,如果需要实现多个include ...
- include指令和include标签的区别
区别 类别 语法 发生作用时间 包含的内容 转化成Servlet 编译时间 运行时间 include指令 <%@ include file="" %> 页面交换 实际内 ...
- Android优化——UI优化（二） 使用include标签复用布局
使用include标签复用布局 - 1.include标签的作用 假如说我下图的这个布局在很多界面都用到了,我该怎么办?每个页面都写一遍的话,代码太冗余,并且维护难度加大. <LinearLay ...
- 【Android 界面效果25】android中include标签的使用
在一个项目中我们可能会需要用到相同的布局设计,如果都写在一个xml文件中,代码显得很冗余,并且可读性也很差,所以我们可以把相同布局的代码单独写成一个模块,然后用到的时候可以通过<include ...
- JSP include标签和include指令
test1.jsp <% int a = 5; out.println(a); %> test2.jsp <jsp:include page="/test1.jsp&quo ...
- Android Include标签
编程的世界有的时候很微妙,有的时候就好像是在解决一个哲学问题,Android开发的时候,所有的布局,颜色,等(其实这些都可以称之为资源,Android中的资源是指非代码部分,如图片.音频.视频.字符等 ...
- mybatis include标签
使用mybatis 的include标签达到SQL片段达到代码复用的目的 示例: xml文件 <sql id="paysql"> payid,p.oid,p.bdate ...
- Android中View绘制优化二一---- 使用<include />标签复用布局文件
本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning 译二: 使用<include />标签复用布局文件 翻译地址:http://de ...
随机推荐
- Java读取xml
首先将xml的格式展示出来,如下 <?xml version="1.0"?> <configuration> <connectionStrings n ...
- js如何创建JSON对象
js如何创建JSON对象 一.总结 一句话总结:直接创建js数组和js对象即可,然后JSON.stringify就可以获取json字符串,js中的一切都是对象,而且js中的对象都是json对象 js ...
- Tomcat 中文乱码 设置UTF-8编码 问题解决办法
在Java Web开发中,http请求带有中文字符的URI如果不处理容易出现乱码问题:这是因为Tomcat容器默认编码是iso-8859-1引起的,因此要避免出现乱码就要需要做相应的处理.解决办法如下 ...
- JVM中对象的内存布局与访问定位
一.对象的内存布局 已主流的HotSpot虚拟机来说, 在HotSpot虚拟机中,对象在内存中存储的布局可以分为3块区域:对象头(Header).实例数据(Instance Data)和对齐填 ...
- Population Size CodeForces - 416D (贪心,模拟)
大意: 给定$n$元素序列$a$, 求将$a$划分为连续的等差数列, 且划分数尽量小. $a$中的$-1$表示可以替换为任意正整数, 等差数列中必须也都是正整数. 贪心策略就是从前到后尽量添进一个等差 ...
- Java字符串 API
常用API
- store procedure
store procedure: _________________________________________________ set ANSI_NULLS ON set QUOTED_IDEN ...
- 新建 ASP.NET MVC 项目快速代码
视图模型- PagingInfo 类: public class PagingInfo { public int TotalItems { get; set; } public int ItemsPe ...
- G1收集器
转载:https://blog.csdn.net/zhou2s_101216/article/details/79202893 http://blog.jobbole.com/109170/ http ...
- 使用axios发送post请求，将JSON数据改为为form类型
我的github(PS:希望star):https://github.com/thWinterSun/v-admin 通常前端通过POST请求向服务器端提交数据格式有4中,分别是"appli ...