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 ...
随机推荐
- How to implement connection pool in spark streaming
在spark streaming的文档里,有这么一段: def sendPartition(iter): # ConnectionPool is a static, lazily initialize ...
- 51 jquery 节点操作和 bootstrapt
jquery 和 bootstrapt1.jquery each 函数 1.each 循环方式一: 可循环对象: var arr =["alex","deng" ...
- qxx项目大文件上传
1. 在做大文件上传的时候,要注意修改文件的配置,php.ini的配置,还有连接时间.这些东西都记不清了,明天需要问一下芳哥,然后遇到问题的时候就能自己解决了. 2. 然后就遇到一个很尴尬的问题:大文 ...
- Leetcode 77
//这似乎是排列组合的标准写法了已经class Solution { public: vector<vector<int>> combine(int n, int k) { v ...
- After reading a picture than out a picture
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...
- MySQL 事件跟踪器
/*第一步 创建以下两个 日志表 */ CREATE TABLE `slow_log` ( `start_time` timestamp NOT NULL DEFAULT CURRENT_TIMEST ...
- JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件
今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...
- Python简单网页爬虫——极客学院视频自动下载
http://blog.csdn.net/supercooly/article/details/51003921
- React Js之组件（Component）与state
React Js组件: 组件(Component)是为了更好的维护我们的应用,可以在不影响其他的组件的情况下更新或者更改组件. state:是标记数据的来源,我们使state比较简单和单一,如果我们有 ...
- hdu3613
题解: EX_KMP 网上似乎说kmp也可以,但是我交了一发代码没过 然后标记一下哪一些前缀和后缀会问 暴力枚举拆开了的位置 代码: #include<cstdio> #include&l ...