一、模板引擎的基础概念
1.1 模板引擎
模板引擎是第三方模块。
让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
未使用模版引擎的写法：麻烦且不直观
const arr = [
{ name: '小红', age: 20 },
{ name: '小蓝', age: 20 },
];
let str = '<ul>';
for (var i = 0; i < arr.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-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
}
});
<!--index.art-->
<div>
<span>{{ data.name }}</span>
<span>{{ data.age }}</span>
</div>
二、模板引擎语法
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>
输出经过 HTML 转义的内容，即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体 (如< > &)
因此最好保证里面内容不要有HTML字符。
const text = '<p>你好你好</p>'
<h2>{{ text }}</h2>
<h2><%= text %></h2>
// 会输出 <p>你好你好</p> 插入 <h2> 标签中
2.3 原文输出
- 标准语法：
{{@ 数据 }} - 原始语法：
<%-数据 %>
<!-- 标准语法 -->
<h2>{{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>
输出非转义的内容(原始内容)，通常用于输出富文本，即 HTML内容。参考上文 2.2，如果数据中携带 HTML 标签，默认模板引擎会将标签转义后输出。如果需要原样输出 html 标签，需要用下面这种格式。
const content = '<p>我来啦</p>'
<h2>{{@ content }}</h2>
<h2><%- content %></h2>
// 直接把 <p>我来啦</p> 插入 <h2> 标签中
2.4 条件判断
<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{else}}...{{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
举例：
// 举例
{{ if a && b }}
<p>可以直接放 html 内容</p>
{{/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
<ul>
{{each users}}
{{include './header.art' {user: $value, id: $index} }}
{{/each}}
</ul>
2.7 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
左边骨架模版，右边页面模版
2.8 模板继承示例
骨架模版
<!--layout.art 骨架模板-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{{block 'head'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art 首页模板-->
<!--用extend关键字继承layout（骨架模版）-->
{{extend './layout.art'}}
{{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}
{{block 'content'}} <p>This is just an awesome page.</p> {{/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') }}
网友评论