include标签—引用文件路径

Posted 2020-12-06 vwvwvwgwgvervae

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了include标签—引用文件路径相关的知识，希望对你有一定的参考价值。

今天给大家讲解的是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，还会有同行一起技术交流。

显示

以上内容希望对你有帮助，有被帮助到的朋友欢迎点赞，评论。

来源：阜阳网站优化

以上是关于include标签—引用文件路径的主要内容，如果未能解决你的问题，请参考以下文章

如何在 FragmentPagerAdapter 中添加片段标签以便稍后引用片段？

head标签怎么给多个html引用

php的文件引用

[mybatis]动态sql_sql_抽取可重用的sql片段

MyBatis高级特性

JSP——常用配置-获取项目跟路径