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 ...
随机推荐
- Windows 2008 更改网卡绑定顺序
用 ncpa.cpl 或者用鼠标右键点网上邻居进去也好. 来到网卡列表画面. 然后,你会发觉没有菜单去操作[高级设置], 这里,最高级的步骤来了, 就是你需要按一个 [Alt]把菜单给显示出来,太神奇 ...
- 记录一个错误，在bundle install时候出现 shoulda-mathcers bundle install fails with git error
复制粘体错误到google.找到解决方案: https://github.com/thoughtbot/shoulda-matchers/issues/1057 GIT remote: https:/ ...
- android----AsyncHttpClient的get,post和图片上传
async-http-client库是一个基于回调函数的Http异步通信客户端Android组件,是在Apache的HttpClient库的基础上开发构建而成的. Eclipse使用:导入androi ...
- Shell脚本中点号+文件名的作用
熟悉linux是程序员必须具备的技能,水滴石穿,一点点学习吧. linux中一个文件是根据其是否具有执行属性来判断他是否可以直接运行的.就像windows下的exe一样. 如果我们要执行某一个文件,可 ...
- Krapo 2
The krpano Viewer is a small and very flexible high-performance viewer for all kind of panoramic ima ...
- Markdown语法笔记
1.文字和图片中怎么让图片换行? 答:在文字和图片之间加入多个空格或者直接按Tab健即可
- POJ 1442 splay
前几天用treap写了这一题,不过treap支持的操作不如splay的多,作为一个完美主义者,重新用splay写了这一题. splay大部分操作可以通过 强大到无与伦比的数据结构splay-tree ...
- OC Foundation框架—字符串
一.Foundation框架中一些常用的类 字符串型: NSString:不可变字符串 NSMutableString:可变字符串 集合型: 1) NSArray:OC不可变数组 NSMutableA ...
- @Component 元注解
@Component 元注解 这是一个元注解,意思是它可以用于标注其他注解,被它标注的注解和它起到相同或者类似的作用.Spring用它定义了其他具有特定意义的注解如@Controller @Servi ...
- 远程桌面连接 [Content] 出现身份验证错误。 要求的函数不受支持
[Window Title] 远程桌面连接 [Content] 出现身份验证错误. 要求的函数不受支持 以上是我远程得时候报的错. 下面直接上 最NB得解决方案.不管用直接在下面评论 通过管理控 ...