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学习] Java super关键字
super 关键字与 this 类似,this 用来表示当前类的实例,super 用来表示父类. super 可以用在子类中,通过点号(.)来获取父类的成员变量和方法.super 也可以用在子类的子类 ...
- LeetCode--225--用队列实现栈
问题描述: 使用队列实现栈的下列操作: push(x) -- 元素 x 入栈 pop() -- 移除栈顶元素 top() -- 获取栈顶元素 empty() -- 返回栈是否为空 注意: 你只能使用队 ...
- 《图解Http》 HTTPS 安全协议
相关博客:https://www.cnblogs.com/chentianwei/p/9374341.html (讲的更明白,有图) HTTPS 7.1http的缺点 使用明文,内容会被窃听. 不验 ...
- Confluence 6 为站点启用匿名用户访问
如果你希望你的站点能够被所有人看到,包括不需要登录就可以访问的用户.你必须为你的站点启用匿名用户访问权限才可以. 希望启用匿名用户访问你的站点: 在屏幕的右上角单击 控制台按钮 ,然后选择 Gener ...
- CF-499div2-E-裴蜀定理
E. Border time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...
- UVA-11149 Power of Matrix（矩阵二分幂）
题目大意:给一个n阶方阵,求A1+A2+A3+......Ak. 题目分析:令F(k)=A1+A2+A3+......Ak.当k为偶数时,F(k)=F(k/2)*(E+Ak/2),k为奇数时,F(k) ...
- SQL语句增加列、修改列类型、修改列、删除列
1.增加列: alter table tableName add columnName varchar(30) 2.修改列类型: alter table tableName alter column ...
- Windows系统下修改Erlang默认路径
新建.erlang文件: io:format("consulting .erlang in ~p~n",[element(2, file:get_cwd())]). c:cd(&q ...
- OC 类对象和类加载
//------------------------Persion类----------------------------// 1 #import "Person.h" @imp ...
- Freemaker FTL指令常用标签及语法
https://blog.csdn.net/pengpengpeng85/article/details/52070602 FTL指令常用标签及语法 注意:使用freemaker,要求所有标签必须闭合 ...