thinkphp5.1 || 模板继承标签引入js，css文件

模板继承：
在view/public下创建一个基础模板base.html:


{
      
      include file="public/meta"/}

{
      
      block name="title"}
网页标题
{
      
      /block}

{
      
      include file="public/header"/}
{
      
      include file="public/menu"/}

{
      
      block name="content"}
页面内容
{
      
      /block}

{
      
      include file="public/footer"/}

{
      
      block name="js"}
自定义js脚本
{
      
      /block}



</body>
</html>

每个区块由{block name=" "} {/block}标签组成。在这个基础模板base.html中一般只有{block name=" “} {/block} 和{include file=”"/} 标签。

其他模板可以继承该base.html模板，使用{extend name=“base.html模板的路径”}继承。这里在view/index下的index.html继承该模板：

{
      
      extend name="public/base"/}

{
      
      block name="title"}
<title>{
      
      $title|default="主页"}</title>
</head>
<body>
{
      
      /block}

{
      
      block name="content"}
<section class="Hui-article-box">
	<nav class="breadcrumb"><i class="Hui-iconfont"></i> <a href="/" class="maincolor">首页</a>
		<span class="c-999 en">&gt;</span>
		<span class="c-666">我的桌面</span>
		<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			<p class="f-20 text-success">欢迎使用H-ui.admin
				<span class="f-14">v2.3</span>
				后台模版！</p>
			<p>登录次数：18 </p>
			<p>上次登录IP：222.35.131.79.1  上次登录时间：2014-6-14 11:19:55</p>
			<table class="table table-border table-bordered table-bg">
				<thead>
				<tr>
					<th colspan="7" scope="col">信息统计</th>
				</tr>
				<tr class="text-c">
					<th>统计</th>
					<th>资讯库</th>
					<th>图片库</th>
					<th>产品库</th>
					<th>用户</th>
					<th>管理员</th>
				</tr>
				</thead>
				<tbody>
				<tr class="text-c">
					<td>总数</td>
					<td>92</td>
					<td>9</td>
					<td>0</td>
					<td>8</td>
					<td>20</td>
				</tr>
				<tr class="text-c">
					<td>今日</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
				</tr>
				<tr class="text-c">
					<td>昨日</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
				</tr>
				<tr class="text-c">
					<td>本周</td>
					<td>2</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
				</tr>
				<tr class="text-c">
					<td>本月</td>
					<td>2</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
					<td>0</td>
				</tr>
				</tbody>
			</table>
			<table class="table table-border table-bordered table-bg mt-20">
				<thead>
				<tr>
					<th colspan="2" scope="col">服务器信息</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<th width="30%">服务器计算机名</th>
					<td><span id="lbServerName">http://127.0.0.1/</span></td>
				</tr>
				<tr>
					<td>服务器IP地址</td>
					<td>192.168.1.1</td>
				</tr>
				<tr>
					<td>服务器域名</td>
					<td>www.h-ui.net</td>
				</tr>
				<tr>
					<td>服务器端口 </td>
					<td>80</td>
				</tr>
				<tr>
					<td>服务器IIS版本 </td>
					<td>Microsoft-IIS/6.0</td>
				</tr>
				<tr>
					<td>本文件所在文件夹 </td>
					<td>D:\WebSite\HanXiPuTai.com\XinYiCMS.Web\</td>
				</tr>
				<tr>
					<td>服务器操作系统 </td>
					<td>Microsoft Windows NT 5.2.3790 Service Pack 2</td>
				</tr>
				<tr>
					<td>系统所在文件夹 </td>
					<td>C:\WINDOWS\system32</td>
				</tr>
				<tr>
					<td>服务器脚本超时时间 </td>
					<td>30000秒</td>
				</tr>
				<tr>
					<td>服务器的语言种类 </td>
					<td>Chinese (People's Republic of China)</td>
				</tr>
				<tr>
					<td>.NET Framework 版本 </td>
					<td>2.050727.3655</td>
				</tr>
				<tr>
					<td>服务器当前时间 </td>
					<td>2014-6-14 12:06:23</td>
				</tr>
				<tr>
					<td>服务器IE版本 </td>
					<td>6.0000</td>
				</tr>
				<tr>
					<td>服务器上次启动到现在已运行 </td>
					<td>7210分钟</td>
				</tr>
				<tr>
					<td>逻辑驱动器 </td>
					<td>C:\D:\</td>
				</tr>
				<tr>
					<td>CPU 总数 </td>
					<td>4</td>
				</tr>
				<tr>
					<td>CPU 类型 </td>
					<td>x86 Family 6 Model 42 Stepping 1, GenuineIntel</td>
				</tr>
				<tr>
					<td>虚拟内存 </td>
					<td>52480M</td>
				</tr>
				<tr>
					<td>当前程序占用内存 </td>
					<td>3.29M</td>
				</tr>
				<tr>
					<td>Asp.net所占内存 </td>
					<td>51.46M</td>
				</tr>
				<tr>
					<td>当前Session数量 </td>
					<td>8</td>
				</tr>
				<tr>
					<td>当前SessionID </td>
					<td>gznhpwmp34004345jz2q3l45</td>
				</tr>
				<tr>
					<td>当前系统用户名 </td>
					<td>NETWORK SERVICE</td>
				</tr>
				</tbody>
			</table>
		</article>
		<footer class="footer">
			<p>感谢jQuery、layer、laypage、Validform、UEditor、My97DatePicker、iconfont、Datatables、WebUploaded、icheck、highcharts、bootstrap-Switch<br> Copyright &copy;2015 H-ui.admin v3.0 All Rights Reserved.<br> 本后台系统由<a href="http://www.h-ui.net/" target="_blank" title="H-ui前端框架">H-ui前端框架</a>提供前端技术支持</p>
		</footer>
	</div>
</section>
{
      
      /block}

{
      
      block name="js"}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

</script>
<!--/请在上方写此页面业务相关的脚本-->
{
      
      /block}

</body>
</html>

在这些子模版中，一般只有{extend name=""/} 和 {block name="" }…{/block}标签。
如果子模板不调用父模板的block标签，子模版自动继承父模板内容并显示。不想继承父模板内容，可以用 {block name="" }…{/block}标签中…省略，不写内容。也可以用{block name="" }{__block__}{/block}继承模板内容，中间还可以加上子模版自定义内容如：{block name="" }{__block__}你好{/block}。

标签引入js，css文件：

<!--_footer 作为公共模版分离出去-->

{
      
      load href="__LIB__/jquery/1.9.1/jquery.min.js"/}  
 
<script type="text/javascript" src="__LIB__/jquery/1.9.1/jquery.min.js"></script>

{
      
      js href="/__STATIC__/h-ui.admin/js/H-ui.admin.page.js"/}  

{
      
      css href="__STATIC__/h-ui/js/H-ui.css"/}       

<!--/_footer /作为公共模版分离出去-->

标签引入js，css文件：有多种方法， {load href=""/} 或 {js href=""/} 或 {css href=""/} 都可以取代原生的。

总结：

{include file=" "/}	加载文件
–	–
{block name=" "} {/block}	基础模板中的一个典型的区块设计
–	–
{extend name=""/}	继承模板文件
–	–
{load href=""/} 或 {js href=""/} 或 {css href=""/}	标签引入js，css文件

thinkphp5.1 || 模板继承 标签引入js，css文件

猜你喜欢

thinkphp5.1 || 模板继承标签引入js，css文件