一、模板引擎的基础概念
1.1 模板引擎
模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
未使用模版引擎的写法：麻烦且不直观
const arr = [
{ name: '小红', age: 20 },
{ name: '小蓝', age: 20 },
];
let str = '';
for (var i = 0; i < arr.length; i++) {
str += '- \
'+ ary[i].name +'\
'+ ary[i].age +'\
';
}
str += '
';
使用模版引擎的写法：
{{each ary}}
- {{ $value.name }}
- {{ $value.age }}
{{/each}}
1.2 art-template 模板引擎
-
npm install art-template下载 -
const template = require('art-template')引入模板引擎 - 告诉模板引擎模板路径 (该文件里面写的是html文本) 和要拼接的数据在哪
const html = template(‘模板路径’, 数据); - 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接
1.3 art-template 代码示例
// 导入模板引擎模块
const template = require('art-template');
// template方法是用来拼接字符串的，将特定模板与特定数据进行拼接
// 1. 模板路径推荐用绝对路径，更安全，然后第一个路径参数用view替代即可
const views = path.join(__dirname, 'views', 'index.art');
// 2. 要在模板中显示的数据参数，传对象类型
// 返回拼接好的字符串
const html = template('./views/index.art',{
data: {
name: '小白',
age: 20
}
});
{{ data.name }}
{{ data.age }}
二、模板引擎语法
2.1 模板语法
- art-template 同时支持两种模板语法：标准语法和原始语法。
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
2.2 输出
- 标准语法：
{{ 数据 }} - 原始语法：
<%=数据 %>
{{ value }}
// 可以是变量
{{ a ? b : c }}
// 也可以是表达式
{{ a + b }}
<%= value %>
<%= a ? b : c %>
<%= a + b %>
输出经过 HTML 转义的内容，即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体 (如< > &)
因此最好保证里面内容不要有HTML字符。
const text = '你好你好
'
{{ text }}
<%= text %>
// 会输出 <p>你好你好</p> 插入 标签中
2.3 原文输出
- 标准语法：
{{@ 数据 }} - 原始语法：
<%-数据 %>
{{@ value }}
<%- value %>
输出非转义的内容(原始内容)，通常用于输出富文本，即 HTML内容。参考上文 2.2，如果数据中携带 HTML 标签，默认模板引擎会将标签转义后输出。如果需要原样输出 html 标签，需要用下面这种格式。
const content = '我来啦
'
{{@ content }}
<%- content %>
// 直接把 我来啦
插入 标签中
2.4 条件判断
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{else}}...{{/if}}
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
举例：
// 举例
{{ if a && b }}
可以直接放 html 内容
{{/if}}
<% if (a && b) { %>
<% console.log('也可以嵌套任意模版语句') %>
<% } %>
2.5 循环
- 标准语法：
{{each 数据}} {{/each}} - 原始语法：
<% for() { %> <% } %>
{{each target}}
{{$index}} {{$value}}
{{/each}}
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
2.6 子模版
使用子模板可以方便将网站公共块(头部、底部)抽离到单独的文件中。
- 标准语法：
{{include '模板路径'}}(include是关键字) - 原始语法：
<%- include('模板路径') %>(include是方法)
用<%- include指令而不是<% include，为的是避免对输出的 HTML 代码做转义处理。
{{include './header.art' [data]}}
<%- include('./header.art', [data]) %>
举例：结合了 2.5 的循环
// 当前模版路径：./views/tmp.ejs
// 引入模版路径：./views/user/show.ejs
{{each users}}
{{include './header.art' {user: $value, id: $index} }}
{{/each}}
2.7 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
左边骨架模版，右边页面模版
2.8 模板继承示例
骨架模版
HTML骨架模板
{{block 'head'}}{{/block}}
{{block 'content'}}{{/block}}
{{extend './layout.art'}}
{{block 'head'}} {{/block}}
{{block 'content'}} This is just an awesome page.
{{/block}}
2.9 模板配置
- 向模板中导入变量
template.defaults.imports.变量名 = 变量值; - 设置模板根目录
template.defaults.root = 模板目录 - 设置模板默认后缀
template.defaults.extname = '.art'
2.10 模版配置示例及 dateformat 模块
先在文件夹安装npm i dateformat
// test.js
const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat');
// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀，template方法第一个参数就不需要再写后缀了
template.defaults.extname = '.art';
const html = template('test', {
time: new Date()
});
console.log(html)
// ./views/test.art
//在模版引擎中调用dateFormat方法
{{ dateFormat(time, 'yyyy-mm-dd') }}