模板继承（详细）_arttemplate 模板继承

作者：空白诗007 | 2024-06-29 11:02:28

踩

arttemplate 模板继承

下面是对模板继承的整理，希望可以帮助到有需要的小伙伴~
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承模板文件

在这里插入图片描述

示例：

html骨架：

layout.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML骨架</title>
    <!-- block是要插入内容的标志 'link'是区分多个插入位置的 -->
    <!-- 为了区分多个插入位置，在每个block的后面都加一个与其他block区分的标志 -->
    {{block 'link' }} {{/block}}
</head>
<body>
    {{block 'content'}} {{/block}}
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

05_模板继承.js

// 导入模板引擎
const template = require('art-template');
const path = require('path');

// __dirname可以找到 template文件夹的目录
// 下面是index.art文件的目录
const views = path.join(__dirname,'views','05_模板继承.art');

// template方法是用来拼接字符串的
// 1. 模板引擎 绝对路径
// 2. 要在模板中显示数据 对象类型
// 返回值是拼接好的字符串
// template(模板路径,{数据})  【数据是对象形式的】
const html = template(views, {
    msg: '首页模板'
});

console.log(html)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

05_模板继承.art

<!-- 继承HTML骨架 
     {{ extend关键字  '可以找到html骨架文件的路径' }} 
-->
{{extend './common/layout.art'}}

<!-- 填充HTML骨架 
    {{ block '区分每个要填充的标志' }} 填充的内容 {{ ock }}
-->
{{block 'content'}}
<p> {{ msg }} </p>
{{ /block }}

{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

end~

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】