比如布局模板`\template\base.htm`中每个区块由`{block} {/block}`标签组成。 下面就是基础模板中的一个典型的区块设计(用于设计网站导航): ~~~ {block name="nav"} 我是网站导航 {/block} ~~~ block标签必须指定`name`属性来标识当前区块的名称,这个标识在当前模板中应该是唯一的,block标签中可以包含任何模板内容,包括其他标签和变量,例如: ~~~ {block name="nav"}{$web_logo}{/block} ~~~ 你甚至还可以在区块中加载外部文件: ~~~ {block name="nav"} {include file="nav" /} {/block} ~~~ 一个模板中可以定义任意多个名称标识不重复的区块,例如下面定义了一个base.html基础模板: ~~~ <!DOCTYPE html> <html lang="zh-cn"> {block name="head"} {include file="$head" title="$webdb.web_title" keywords="$webdb.web_keywords" descriiption="$webdb.web_description" /} {/block} <body {$webonclick}> //网站导航 {block name="nav"} {include file="nav" /} {/block} //网站内容 {block name="cont"} 我是cont内容 {/block} <script> layui.config({ base: '__IMAGES__/js/' }).use('app'); layui.config({ base: '__PUBLIC__/js/' }).use('wormweb'); </script> //网站底部 {block name="foot"} {include file="$foot" /} {/block} //js内容 {block name="foot_js"}我是js内容{/block} </body> </html> ~~~ 然后我们在子模板(其实是当前操作的入口模板)中使用继承: ~~~ {extend name="base" /} {block name="cont"} {/block} ~~~ 上例中,我们可以看到在子模板中使用了extend标签来继承了母模板`base.htm`。 在子模板中,可以对基础模板中的区块进行重载定义,如果没有重新定义的话,则表示沿用基础模板中的区块定义,如果定义了一个空的区块,则表示删除基础模板中的该区块内容。 上面的例子,我们就把cont区块的内容删除了,其他的区块都进行了重载。而 * * * **特别注意:** ~~~ {block name="foot_js"} {__block__}@我是合并的内容 {/block} ~~~ 这一区块中有{*block*}这个标签,当区块中有这个标记时,就不只是直接重载这个区块,它表示引用所继承模板对应区块的内容到这个位置,最终这个区块是合并后的内容。所以这里footer区块最后的内容是: 我是js内容@我是合并的内容 * * * **再特别注意:** * * * **在当前子模板中,只能定义区块。而不能在区块外面定义其他的模板内容,否则将会直接忽略,并且只能定义基础模板中已经定义的区块。** 重要的事再重复一次,并且只能定义基础模板中已经定义的区块。 例如,如果采用下面的定义: ~~~ {block name="title"}<title>{$title}</title>{/block} <a href="/" >首页</a> <a href="/info/" >资讯</a> <a href="/bbs/" >论坛</a> ~~~ 下面的三个链接导航部分将是无效的,不会显示在模板中。因为他在区块的外面。 子模板中的区块定义顺序是随意的,模板继承的用法关键在于基础模板如何布局和设计规划了,如果结合原来的布局功能,则会更加灵活。 *下面这个极少用, 大家可以了解一下即可* 模板可以多级继承,比如B继承了A,而C又继承了B,最终C中的区块会覆盖B和A中的同名区块,但C和B中的区块必须是A中已定义过的。