-
子模板
语法:
{ { 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模板继承和子模板
猜你喜欢
转载自blog.csdn.net/chen__cheng/article/details/115051791
今日推荐
周排行