目录
- 1. 模板引擎
- 2. art-template模板引擎（腾讯）
- 3. art-template代码示例
- 4. 模板语法
- 4.1 标准语法 原始语法 原文输出
- 4.2 条件判断（68级）
- 4.3 循环
- 4.4 子模板
- 4.5 模板继承
- 4.6 模板配置
1. 模板引擎
模板引擎是第三方模块
让开发者以更友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。
2. art-template模板引擎（腾讯）
- 在命令行工具中使用 npm install art-template 命令进行下载
- 使用
const template = require('art-template')引入模板引擎 - 告诉模板引擎要拼接的数据和模板在哪
const html = template('模板路径', 数据)；
3. art-template代码示例
app.js
// 导入模板引擎
const template = require('art-template');
const path = require('path');
const view = path.join(__dirname, 'views', 'index.art')
// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(view, {
name: '张三',
age: 20
})
console.log(html);index.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{name}}
{{age}}
</body>
</html>4. 模板语法
- art-template同时支持两种模板语法：标准语法和原始语法
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力
4.1 标准语法 原始语法 原文输出
标准语法：{{数据}}
原始语法：<%=数据 %>
原文输出：{{@ content}} <%- content%><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 标准语法 -->
<p>{{name}}</p>
<p>{{1+1}}</p>
<p>{{1+1==2 ? '相等':'不相等'}}</p>
<p>{{content}}</p>
<!-- 原文输出 -->
<p>{{@ content}}</p>
<!-- 原始语法 -->
<p><%= name %></p>
<p><%= 1 + 2%></p>
<p><%= 1+1==2 ? '相等':'不相等' %></p>
<p><%= content%></p>
<!-- 原文输出 -->
<p><%- content%></p>
</body>
</html>4.2 条件判断（68级）
在模板中可以根据条件来决定显示那块HTML代码
<!-- 条件判断的标准语法 -->
{{if age>18}}
年龄大于18
{{else if age < 15}}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
<% if(age > 18) { %>年龄大于18<%} %>
<!-- 条件判断的原始语法 -->
<% if(age > 18) {%>
年龄大于18
<%} else if (age < 15) {%>
年龄小于15
<%} else {%>
年龄不符合要求
<%} %>4.3 循环
标准语法：{{each 数据}} {{/each}}
原始语法：<% for() {%> <%} %>
<ul>
{{each users}}
<li>
{{$value.name}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul>
<ul>
<% for (var i = 0; i < users.length; i++){ %>
<li>
<%= users[i].name %>
<%= users[i].age %>
<%= users[i].sex %>
</li>
<%}
%>
</ul>4.4 子模板
使用子模板可以将网站公共区块（头部，底部）抽离到单独的文件中。
- 标准语法：{{ include '模板' }}
- 原始语法：<% include{'模板'} %>代码示例：
{{include './common/header.art'}}
<% include('./common/header.art')%>
<div> {{ msg }} </div>
{{include './common/footer.art'}}
<% include('./common/footer.art')%>4.5 模板继承
使用模板继承可以将网站骨架抽离到单独的文件中，其他页面模板可以继承骨架文件
要继承的模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{{block 'link'}} {{/block}}
</head>
<body>
{{block 'content'}} {{/block}}
</body>
</html>向模板中填充：
// 继承layout模板
{{extend './common/layout.art'}}
{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}
{{block 'link'}}
<link rel="stylesheet" href="./main.css">
{{/block}}js文件：
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '05.art');
const html = template(views, {
msg: '首页模板'
})
console.log(html);4.6 模板配置
- 向模板中导入变量 template,defaults.imports.变量名 = 变量值；
- template.defaults.root = path.join(__dirname, ‘views’);
- template.defaults.extname = ‘.art’;
后缀名
const template = require('art-template');
const dateFormat = require('dateformat');
const path = require('path');
const views = path.join(__dirname, 'views', '06.art');
// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 默认后缀的配置
template.defaults.extname = '.art';
// 有后缀就找后缀名的文件
const html = template('06.art', {
time: new Date(),
// "2020-08-19T03:22:11.413Z" 用引号引起来的字符串
})
// 可以直接传模板的名字
// 没有后缀就找 template.defaults.extname 设置的文件
console.log(template('07', {}));
console.log(html);{{dateFormat(time,'yyyy-mm-dd hh:mm:ss')}}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
