# 模板分离 通常,一个网站会包含公共的头部、脚部、侧边栏等公共布局模块,我们可以通过模板分离的方式将他们分离出去。 ## 父模板 (模板布局) 在父模板中只允许出现 `include` 和 `block` 标签。 使用 `include` 标签包含公共部分 ``` {include file='文件路径' /} ``` 以下几种写法均为合法 ``` {include file='public/header' /} {include file='public:header' /} {include file='public::header' /} ``` 使用 `block` 标签进行标识可替换的区块 ``` {block name='区块名称'} 代码部分 {/block} ``` 其中,如果子模板中申明了对应名称的 block 标记,则 代码部分 会被子模板中的内容所替换。 ## 子模板 (模板继承) 在子模板中只允许出现 `extend` 和 `block` 标签。 使用 `extend` 标签继承父模板 ``` {extend name='文件路径' /} ``` 使用 `block` 标签重写父模板中对应 block 的内容。 ``` {block name='区块名称'} 代码部分 {/block} ``` ## 举例 目录结构 :-: ![](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/%E6%88%AA%E5%9B%BE/QQ%E6%88%AA%E5%9B%BE20180315223332.jpg) 注意,模板布局和继承的定位位置是在当前模块下的 `view` 目录下。 其中,`view/public` 目录下为公共模块,`view/template` 目录下为模板目录。 在模板文件 `view/template/base.html` 中,定义一个基础模板 : ```html {include file='public/meta' /} {block name='seo'} 网站标题、关键字与描述 {/block} {include file='public/header' /} {include file='public/menu' /} {block name='content'} 页面主体内容 {/block} {include file='public/footer' /} {block name='js'} 用户自定义js脚本 {/block} ``` 在 `view/index/index.html` 视图文件中引入 : ```html {extend name='template/base' /} {block name='seo'} <title>{$title|default='页面标题'}</title> <meta name="keywords" content="{$keywords|default='关键字'}"> <meta name="description" content="{$desc|default='描述'}"> {/block} {block name='content'} <div> 主体内容 </div> {/block} {block name='js'}{/block} ``` 子模板中使用变量,使用 `{$variableName}`,可以定义其 `default` 属性,设置默认值。 注意,如果在父模板中定义的区块在子模板中未实现,则渲染父模板中的内容。 如果想要引入父模板中对应区块的内容,可以使用 `{__block__}` 引入,如 ```html {block name='content'} <div> 主体内容 </div> {__block__} {/block} ```