artTemplate模板继承和子模板_子模版的意思-优快云博客

本文链接：https://blog.youkuaiyun.com/chen__cheng/article/details/115051791

子模板

语法：

{{ 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>