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 ...
随机推荐
- 使用排序数组/链表/preorder构建二叉搜索树
2018-08-13 11:29:05 一.Convert Sorted Array to Binary Search Tree 问题描述: 问题求解: public TreeNode sortedA ...
- 4-2 什么是WebSocket； Action Cable的使用。Rails guide-6.3视频教学，没有看！
WebSocket WebSocket是一种在单个TCP连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范.WebSock ...
- Andorid 之日历控件,可左右滑动，包含公历，农历，节假日等
公司项目需要日历这个功能,经过查阅资料写了个demo,包含公历,农历,节假日等,还可左右滑动. 效果图: 代码: public class MainActivity extends AppCompat ...
- dp练习（9）——最大乘积
1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Desc ...
- 杜伦大学提出GANomaly：无需负例样本实现异常检测
杜伦大学提出GANomaly:无需负例样本实现异常检测 本期推荐的论文笔记来自 PaperWeekly 社区用户 @TwistedW.在异常检测模块下,如果没有异常(负例样本)来训练模型,应该如何实现 ...
- es-hadoop saveToEsWithMeta
@Test def testEsRDDWriteWithDynamicMapping() { val doc1 = Map("one" -> null, "two& ...
- idea破解更新
idea破解教程: https://www.cnblogs.com/jpfss/p/8872358.html JetbrainsCrack-3.1-release-enc.jar下载:http://i ...
- C#Winform窗体实现服务端和客户端通信例子（TCP/IP）
Winform窗体实现服务端和客户端通信的例子,是参考这个地址 http://www.cnblogs.com/longwu/archive/2011/08/25/2153636.html 进行了一些异 ...
- POJ 1754 线段树
e,应该是线段树里的水题.线段树单点更新.查询区间最值. 代码套用模板 PS :模板有些地方不太懂. #include<stdio.h>#include<iostream>#i ...
- hadoop hadoop install (1)
vmuser@vmuser-VirtualBox:~$ sudo useradd -m hadoop -s /bin/bash[sudo] vmuser 的密码: vmuser@vmuser-Virt ...