您的位置 首页 > 数码极客

如何prefab中的资源进行引用转路径

今天给大家讲解的是include标签,在打代码的时候总会出现一些重复的样式,这个时候就可以用include标签来减少打代码的次数。


文件名index.html,代码:

{% from 'macro; 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前提是把相同的代码先提取出来,所以我们将对应的代码先提取成文件:

文件结构:

<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>

<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 'macro; import input %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>宏</title></head><body> {% include 'index/' %} <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/' %}</body></html>

如果还有一个详情页,那么只需要:

de

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Detail</title></head><body> {% include 'index/' %} <p>这是详情页</p> {% include 'index/' %}</body></html>

显示

如果对接口、性能、自动化测试、面试经验交流等感兴趣的,可以关注我的头条号,我会不定期的发放免费的资料,这些资料都是从各个技术网站搜集、整理出来的,如果你有好的学习资料可以私聊发我,我会注明出处之后分享给大家。欢迎分享,欢迎评论,欢迎转发。需要资料的同学可以关注小编+转发文章+私信【测试资料】

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“如何prefab中的资源进行引用转路径”边界阅读