## 模板是如何继承的呢 [模板继承](/book/xyfzwl/cxbs-net/preview/模板继承.md)是一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层。模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区块(block),然后继承(extend)该基础模板的子模板中就可以对基础模板中定义的区块进行重载。 因此,模板继承的优势其实是设计基础模板中的区块(block)和子模板中替换这些区块。 每个区块由`{block} {/block}`标签组成。 下面就是base.htm基础模板中的一个典型的区块设计: ``` <!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} <div style="min-height: 850px"> {block name="cont"} {/block} </div> <script> layui.config({ base: '__IMAGES__/js/' }).use('app'); layui.config({ base: '__PUBLIC__/js/' }).use('wormweb'); </script> {block name="foot"} {include file="$foot" /} {/block} {block name="foot_js"}{/block} </body> </html> ``` **每个页面都要写上如下代码,这个是不能去的,因为每个页面都是要的,所以我们直接在基础模板写上这个代码,然后别的页面再继承这个基础模板就行了** ``` <script> layui.config({ base: '__IMAGES__/js/' }).use('app'); layui.config({ base: '__PUBLIC__/js/' }).use('wormweb'); </script> ``` * 我们在如上文件中定义了name为`head`的block区块用来放我们的头部信息,用name为`nav`的block区块来放我们的头部导航信息,用name为`cont`的block区块来放我们的列表信息,用name为`foot`的block区块来放我们的底部信息,用name为`foot_js`的block区块来放我们的底部信息 * 我们这样定义好了一个基础的模板文件之后,在别的模板文件内我们就可以直接继承base.htm这个基础模板文件,使用如下的继承标签: ``` {extend name="base" /} {block name="cont"} 我对cont内容进行重载了 {/block} ``` * 在模板中写上如上{extent name='base'} 这是继承了base.htm文件的意思,继承{extent name='base'}该base.htm基础模板的子模板中就可以对基础模板中定义的区块进行重载,如上我们在base.htm文件中有`head` `nav` `cont` `foot` `foot_js`,可见我们对name为 `cont` 的区块进行了重载,其他区块进行了继承。 * 为了使我们的代码更加简介,我在base.htm内还使用了[包含文件](/book/xyfzwl/cxbs-net/preview/包含文件.md)的方法,在定义name为nav的区块我们里面用{include name='nav'}标签引进了nav.htm文件(在这个文件里写头部导航的信息),在定义name为foot的区块我们里面用{include name='foot'}标签引进了foot.htm文件(在这个文件里写底部导航的信息)