模板引擎基础概念
模板引擎是第三模块，让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
art-template模板引擎
- 使用
npm install art-template命令进行下载 - 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template('模板路径',数据)
示例：
const template = require("art-template");
const path = require("path");
const views = path.join(__dirname, "views", "index.art");
//template方法是用来拼接字符串的
//1.模板路径 绝对路径
//2.要在模板中显示的数据 对象类型
//返回拼接好的字符串
const html = template(views, {
name: "张三",
age: 18,
});
console.log(html);
index.art文件(html文件)
<div>
名字：{{name}}
年龄：{{age}}
</div>
模板引擎语法
输出
- 标准语法：{{ 数据 }}
- 原始语法：<%= 数据 %>
如果数据里带html标签，默认情况下模板引擎是不解析的，会将其转转义后输出，如果确定数据是安全的，可以输出，则使用原文输出
原文输出
- 标准语法：{{@ 数据 }}
- 原始语法：<%- 数据 %>
条件判断
<!-- 标准语法 -->
{{if 条件}} … {{/if}}
{{if v1}} … {{else if v2}} … {{/if}}
<!-- 原始语法(代码块) -->
<% if(value) { %> … <% } %>
<% if(v1) { %> … <% } else if { %>… <% } %>
循环
- 标准语法：{{each 数据}} {{/each}}
- 原始语法：<% for() { %> <% } %>
<!-- 标准语法 -->
{{each target}}
{{$index}}{{$value}}
{{/each}}
<!--原始语法-->
<% for(var i=0;i<target.length;i++){ %>
<%= i %><%= target[i] %>
<% } %>
子模板
使用子模板可以将网站公共区块（头部、底部）抽离到单独的文件中
- 标准语法：{{include '模板'}}
- 原始语法：<%include('模板') %>
<!-- 标准语法 -->
{{include './header.art'}}
<!-- 原始语法 -->
<% include('./header.art') %>
模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件
示例：
<!-- layout.art 模板-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{{block 'head'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
使用block挖坑，之后填坑进去
<!-- index.art 首页模板-->
{{extend './layout.art'}}
{{block 'head'}}<link rel="stylesheet" href="main.css">{{/block}}
{{block 'content'}}<p>你好</p>{{/block}}
使用extend继承骨架模板，之后给block填坑，就可以将内容填充进去了
模板配置
-
一般情况下是不能直接在模板中导入变量，向模板中导入变量要通过
template.defaults.imports.自定义变量名 = 变量值（方法）先使用
npm install dataformat下载dataformat规定时间格式{{ dataFormat ( time , 'yyyy-hh-dd' ) }}
-
设置模板根目录
template.defaults.root = 模板目录统一设置模板的根目录，之后同一个目录下的文件就不需要拼接，直接写文件全称就行
-
设置模板后缀
template.defaults.extname = '.art'统一设置模板后缀，和上面的方法一起配置后再省略后缀，直接写文件名即可