第一步:view下建立父模板文件,layoutextend.html , 写入内如如下:
< !DOCTYPE html>
<html lang="en">
<head>
kmeta charset="UTF-8">
<meta name="v iewport" content="width=device width, initial-scale=1. 0">
meta http-equiv="X-UA-Compatible" content=" ie=edge">
<tit le>Document</title>
</head>
<body>
{block name="nav" }导航{/block}
{block name=" info"}信息列表{/block}
{block name=" link" }友情链接{/block}
</body>
</html>
第二步:分离文件头部与尾部HTML代码,写入公共模板中
在view目录下建立base文件夹,分别建立head.html和foot.html存入母模板layoutextend.html 头部与尾部HTML代码。
修改layoutextend.html
{include file='base/head' /}
{block name="nav" }导航{/block}
{block name=" info"}信息列表{/block}
{block name=" link" }友情链接{/block}
{include file='base/foot' /}
第三步:建立index控制器指定的子模板index.html继续母模板实现区块block 内容,index.html内容如下:
{extend name="layoutextend" /}
{block name="nav"}
<ul>
<li>
<a href="">首页</a>
<a href"">关于 我们</a>
<a href="">公司新闻</a>
<a href=""'>联系我们</a>
</li>
</ul>
{/block}
{block name=" info"}
<ul>
<li>信息1</li>
<li>信息2</li>
</ul>
{/block}
{block name=" link"}
<ul>
<li>友情连接1</li>
<li>友情连接2</li>
</ul>
{/block}
父模版中定义的{block},子模板要全部实现,如要在子模板中实现父模板的内容,可使用{__CONTENT__}标签。
总结:
模板布局和模板继承二者有很多相似之外。本质上讲,模板布局只有模板继承的一个特例,当父模板中只有一个需要实现的区块时,推荐使用模板布局,否则就用模板继承。具体还要看项目需求,有时用公共模板,可能比使用模板继承再方便~~
|