-
子模板
语法：
{{ include './header.html' }};// 其中'./header.html'是相对于当前文件位置的文件应用：
# layout.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ include './header.html' }} </body> </html> # header.html <div>这是头部信息<div>当前模块加载子模版的时候，会将子模板的内容填充到主模板中进行显示
-
模板继承
什么是模板继承？
类似于采用
include方式加载子模块一样，不同的在于，模板继承既可以将父模板的内容继承过来，同时子模块也可以在拥有父模块的基础上添加新的内容。语法：
{{ extend './layout.html' }} {{ block 'foo标识符'}}...{{ / block }} // 可选解释：
'layout.html'为父模板，路径为相对于当前文件的路径-
{{ block 'foo标识符'}}...{{ / block }}可选，但是如果不写的话，就等价于使用include来加载子模板，没有继承的意味了。所以一般采用此语法来实现子模板自己添加内容的方式。foo标识符是当子模板要将自定义内容添加到父模板某个位置时的标识符。也即：# child.html {{ block 'content' }} <h1> 这是即将要填充到父模板对应的content插槽中的内容<h1> {{ /block }} # parent.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> 哈哈哈哈哈 </div> {{ block 'content' }} <h1> 这是默认的内容 </h1> {{ /block }} </body> </html> {{ /block }}子模板
block的content内容被填充到父模板对应的block处，如果子模板没有传入的内容，则显示默认内容
案例：
# head.html <h1> 这是一个公共头部 </h1> # footer.html <h1>这是一个公共底部</h1> # layouot.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--公共头部区域--> {{ include './head.html' }} <!-- 自定义部分--> {{ block 'content' }} <h1>这是默认内容</h1> {{ /block }} {{ include './footer.html' }} <!--公共底部区域--> </body> </html> # index.html {{ extend './layout.html' }} {{ block 'content' }} <h2>这是填充部分</h2> {{ /block }} ## 结果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--公共头部区域--> <h1> 这是一个公共头部 </h1> <!-- 自定义部分--> <h2>这是填充部分</h2> <h1>这是一个公共底部</h1> <!--公共底部区域--> </body> </html> -
总结：
当可以复用的内容的时候，可以使用
include进行引用，当只需要对某一个内容进行部分修改时，可以使用extend继承
artTemplate模板继承和子模板
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
