1.模板引擎的基础概念
1.1 模板引擎
模板引擎是第三方模块，
让开发者以更加友好的方式拼接字符串，使项目更加清晰、更加易于维护
//未使用模板引擎的写法
var ary = [{name: 'zhangsan',age: 20}];
var str = '<ul>';
for(var i = 0;i < ary.length;i++){
str += '<li>\
<span>' + ary[i].name + '</span>\
<span>' + ary[i].age + '</span>\
</li>';
}
str += '</ul>';
//使用模板引擎
<ul>
{{each ary}}
<li>{{$value.name}}</li>
<li>{{$value.age}}</li>
{{each}}
</ul>1.2 art-template模板引擎
- 使用npm install art-templet下载
- 使用const template = require('art-template')引入模板引擎
- 告诉模板引擎要拼接的数据和模板在哪 const html = template('模板路径',数据)
2.模板引擎语法
2.1 模板语法
- art-template同时支持两种模板语法：标准语法和原始语法
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力
标准语法：{{数据}}
原始语法：<%=数据 %>
2.2 输出
<!--标准语法-->
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
<!--原始语法-->
<h2>{{%= value %}}</h2>
<h2>{{%= a ? b : c %}}</h2>
<h2>{{%= a + b %}}</h2>
2.3 条件判断
在模板中可以根据条件来决定显示那块HTML代码
<!--标准语法-->
{{if 条件}}...{{/if}}
{{if vl}}...{{else if}}...{{/if}}
<!--原始语法-->
<% if(value) { %>...<% } %>
<% if(va1) { %>...<% } else if(va2) { %>...<% } %>2.4 循环
<!--标准语法-->
{{each 数据}}{{/each}}
<!--原始语法-->
<% for() {%> <%} %>2.5 子模版
使用子模版可以将网站公共区域（头部、底部）抽离到单独的文件中。
- 标准语法：{{include '模板'}
- 原始语法：<%include('模板')%>
2.6 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件
03.art继承layout.art
layout.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
{{block 'link'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>03.art
{{extend './layout.art'}}
{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}
{{block 'link'}} <link rel="stylesheet" href="./main.css"> {{/block}}2.7 模板配置
1.向模板中导入变量 template.defaults.imports.变量名 = 变量名
2.设置模板根目录 template.defaults.root = 模板目录
3.设置模板默认后缀 template.defaults.extname = '.art'