ejs模板

ejs模板的三种用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const ejs = require('ejs');
const path = require('path');

const html = '<div><%= user.name %></div>'
const options = {}
const data = {
    user: {
        name: 'io'
    }
}

// 1. 多次复用
const template = ejs.compile(html, options);
const compiled = template(data)
console.log(compiled);

// 2. 只用一次
const rendered = ejs.render(html, data, options);
console.log(rendered);

// 3. 读取html, promise调用
const renderedfile = ejs.renderFile(path.resolve(__dirname, './index.html'), data, options);
renderedfile.then(file => console.log(file))

ejs不同标签的含义

<% if(user){ %> <% } %> ‘脚本’标签,用于流程控制,无输出
<%_ %> 删除前面的空格
<%= user.name %> 输出数据到模板(转义字符, HTML标签)
<%- %> 输出非转义字符
<%# 这是注释%> 注释
%> 结束标签
<%% 输入字符串’<%’
-%> 删除紧随其后的换行符
<% _%> 将结束标签后的空格删除

包含

1
2
<!-- footer.html -->
<div>footer: user is <%= user.name %> </div>
1
<%- include('./footer.html', {user}) %>

分隔符

1
2
3
4
// 传给ejs的加载器
const options = {
    delimiter: '?'
}

fileloader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 注意: fileloader里面添加的字符串模板会在每一次读取文件的时候运行一次
// 例如 下面在读取footer.html的时候再次进行了添加
ejs.fileLoader = function (filePath) {
    console.log('fileLoader', filePath);
    const content = '<div>footer: user is <?= user.name ?> </div>'+fs.readFileSync(filePath, 'utf8').toString();
    return content;
}

ejs.renderFile(path.resolve(__dirname, './index.html'), data, options, (err, file) => {
    console.log(file);
});
// <div>footer: user is john </div><%if(user){ -%>
//     <% for (var i=0; i < 10; i++){ -%>
// <%_ %><div><%= user.name -%></div>
//     <%} -%>
// <%} -%>


// <div>footer: user is john </div><div>footer: user is john </div>