模板继承 · ThinkCMF5.1开发手册

模板继承是 ThinkCMF推荐一种布局方式,它比上一篇讲的模板布局更灵活;模板继承就是你先定义一个基础的模板,在这个基础模板你可以设置很多个区块( block),然后在其它实际要渲染的子模板文件中用 extend标签继承这个基础模板,在子模板中定义name相同的 block,这样就可以对基础模板中定义的区块进行重载; 每个区块都是`<block></block>`这样的标签,如: ``` <block name="leftsider">左边</block> ``` 每个 block 标签必须有个 name 属性,并且保证它在此个模板文件中是惟一的,在block中可以包含任何模板内容,标签,变量,甚至是 include标签,如: ``` <block name="leftsider"> 左边 <include file="/public/leftsider" /> {$name}<br> <div>{$hello}</div> </block> ``` 在每个模板中可以定义任意多个 block,只要 block的 name 值不相同;如我们在主题根目录定义一个 base.html 基础模板 ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <block name="seo"> <title>标题</title> <meta name="keywords" content=""/> <meta name="description" content=""> </block> </head> <body> <block name="nav">导航菜单</block> <block name="main">内容</block> <block name="sider">右边分栏</block> <block name="footer"> {__block__} <div>由 ThinkCMF强力驱动</div> </block> </body> </html> ``` 下面我们在子模板(也就是我们实际要渲染的模板)中使用继承标签: ``` <extend name="/base"/> <block name="seo"> <title>首页</title> <meta name="keywords" content="ThinkCMF,ThinkPHP"/> <meta name="description" content="ThinkCMF是ThinkPHP最简约的内容管理框架"> </block> <block name="nav"> <ul> <li>首页</li> <li><a href="/aboutus.html">关于我们</a></li> </ul> </block> <block name="main">这是首页内容</block> <block name="sider"></block> <block name="footer">这里是底部,我不想写了</block> ``` 以上演示的是一个首页模板代码,我们可以看到在这个模板中使用了extend标签来继承了主题根目录的base.html模板,在这个模板代码中,我们同样定义很多 block对base中的block进行重载,如果想沿用基础模板中的block,你就可以不用新定义这个 block，如果你想删除基础模板中的某个区块内容,就可以为它定义一个空的 block,首页模板代码中我们就把右边栏删除了,其他的区块都进行了重载. 如果你看得仔细点,会发现: ``` <block name="footer"> {__block__} <div>由 ThinkCMF强力驱动</div> </block> ``` 这个代码中我们有个`{__block__}`这样的标记,它表示把子模板这个block解析后的内容替换到这里,它其实就是一个占位标记. extend 标签的用法和 include 标签的用法一样: ``` <extend name="public@base" />  ``` > 注意在渲染子模板时,只会渲染 block 标签中的内容,block标签之外的内容是直接被忽略的,如: ``` <extend name="public@base"/> <block name="seo"> <title>首页</title> <meta name="keywords" content="ThinkCMF,ThinkPHP"/> <meta name="description" content="ThinkCMF是ThinkPHP最简约的内容管理框架"> </block>  <div>这里你就是写1W行代码也没有用!</div> <div>这里你就是写1W行代码也没有用!</div> <div>这里你就是写1W行代码也没有用!</div> <div>这里你就是写1W行代码也没有用!</div>  <block name="nav"> <ul> <li>首页</li> <li><a href="/aboutus.html">关于我们</a></li> </ul> </block> <block name="main">这是首页内容</block> <block name="sider"></block> <block name="footer">这里是底部,我不想写了</block> ```