在使用TP的时候经常要将view中的HTML的公共部分提取出来放在一个公共的.html文件中,然后在需要的地方include file下,之前看TP模板继承没有看到,昨天终于明白了。做个笔记记录下。
TP的模板继承相当于class类的继承一样,首先在一个公共基类中需要之后继承的时候可能被修改的地方用block包裹起来,并且取一个name用来在继承的时候对应替换,不至于替换错位。
一、基模板 ./view/Public/base.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit">
<meta content="sxfenglei" name="author" />
<span style="color:#ff0000;"><strong><block <span style="background-color: rgb(255, 204, 0);">name="subcss"</span>></block></strong></span>
<strong><span style="color:#ff0000;"><span style="background-color: rgb(255, 255, 255);"><block </span><span style="background-color: rgb(255, 204, 0);">name="title"</span><span style="background-color: rgb(255, 255, 255);">></span></span></strong><title>后台管理系统</title><span style="color:#ff0000;"><strong></block></strong></span>
</head>
<body>
<!-- 顶端菜单 -->
<span style="color:#ff0000;"><strong><block <span style="background-color: rgb(255, 204, 0);">name="topnav"</span>></block> </strong></span>
<!-- 正文 -->
<div class="container-fluid">
<div class="row">
<!-- 菜单侧栏 -->
<div class="col-sm-2 menu">
<strong><span style="color:#ff0000;"><block <span style="background-color: rgb(255, 204, 0);">name="sidebar"</span>></block></span></strong>
</div>
<!-- 内容区 -->
<div class="col-sm-10 content">
<span style="color:#ff0000;"><strong><block name="content"></block></strong></span>
</div>
</div>
<!-- 末尾 -->
<div class="row">
<strong><span style="color:#ff0000;"><block <span style="background-color: rgb(255, 204, 0);">name="footer"</span>></span></strong>
<p class="footer">@技术支持 <a href="http://www.sxfenglei.com">sxfenglei</a></p>
<strong><span style="color:#ff0000;"></block></span></strong>
</div>
</div>
<!-- 脚本 -->
<script src="__PUBLIC__/js/jquery1.min.js"></script>
<strong><span style="color:#ff0000;"><block <span style="background-color: rgb(255, 204, 0);">name="subscript"</span>></block></span></strong>
</body>
</html>
二、继承base.html基模板 ./Index/index.html
1、通过extend引入公共基模板
2、重写基模板中的block区域注意name对应
3、block区域可以直接写HTML代码或者通过include引入其它.html文件
<strong><span style="color:#000099;"><</span><span style="color:#ff0000;">extend</span><span style="color:#000099;"> name="</span><span style="color:#ff0000;">Public:base</span><span style="color:#000099;">" /></span></strong>
<block <strong><span style="color:#ff0000;">name="topnav"</span></strong>>
<include file="Public:topnav" />
</block>
<block <strong><span style="color:#ff0000;">name="sidebar"</span></strong>>
<include file="Public:menu" />
</block>
<block <strong><span style="color:#ff0000;">name="content"</span></strong>>
<div class="rightBox">
……
</div>
</block>