include标签—引用文件路径
2024-09-05 03:20:14
今天给大家讲解的是include标签,在打代码的时候总会出现一些重复的样式,这个时候就可以用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>
如果对软件测试、接口测试、自动化测试、面试经验交流。感兴趣可以加软件测试交流:1085991341,还会有同行一起技术交流。
显示
以上内容希望对你有帮助,有被帮助到的朋友欢迎点赞,评论。
最新文章
- svn提交时提示 Aborting commit: remains in conflict 解决办法
- 安装oracle
- 实现listview中checkbox的多选与记录
- HDU 1164 Eddy&#39;s research I
- 安装指南:Win10下安装CentOs7
- IOS设计模式学习(20)命令
- HDU 1026 Ignatius and the Princess I 迷宫范围内的搜索剪枝问题
- Kafka 0.10 KafkaConsumer流程简述
- ACM HDU Bone Collector 01背包
- 过渡与动画 - steps调速函数&;CSS值与单位之ch
- .bashrc:16: command not found: shopt配置环境变量时出错
- Springboot集成FreeMarker
- dos模式下切换电脑用户
- bind与继承 待研究
- Git多人协作常用命令
- [20190213]学习bbed-恢复删除的数据.txt
- [matlab] 15.罚函数降维
- spring boot + session+redis解决session共享问题
- 定时任务 Wpf.Quartz.Demo.4
- MingW-v4.8.0+EDE-v13.04 配置使用C语言图形库
热门文章
- PHP xml_parse_into_struct() 函数
- 一些Tips
- 6.29 省选模拟赛 坏题 AC自动机 dp 图论
- Python的基本运用(一)
- 当asp.net core偶遇docker一(模型验证和Rabbitmq 二)
- 【NOIP2016】换教室 题解(期望DP)
- @property@classmethod@staticmethod
- 牛逼!Python的判断、循环和各种表达式(长文系列第2篇
- Docker-Compose介绍,安装和使用
- Vue中v-model指令的常用修饰符