ejs学习笔记-生成html静态文件

什么是ejs

ejs高效的 JavaScript 模板引擎,ejs官网:https://ejs.bootcss.com/

参考文章:
EJS 中文文档
几个常用的ejs语法

建议先看参考文章。

安装

新建文件夹studyejs,使用命令行工具打开,运行:

1
2
npm init -y
npm install ejs

ejs标签

<% ‘脚本’ 标签,用于流程控制,无输出。

<%_ 删除其前面的空格符

<%= 输出数据到模板(输出是转义 HTML 标签)

<%- 输出非转义的数据到模板

<%# 注释标签,不执行、不输出内容

<%% 输出字符串 ‘<%’

%> 一般结束标签

-%> 删除紧随其后的换行符

_%> 将结束标签后面的空格符删除

示例说明

  • 安装使用ejs
  • 在模板中输出值
  • 在模板中引入其他模板
  • 在模板中使用ejs的‘脚本’标签运行javascript代码
  • 用‘脚本’标签书写判断语句
  • 将模板生成静态的html文件

示例

写一个简单的示例,示例使用ejs文档中小部分功能,其他功能自行学习补充。
在项目目录下新建以下文件:

views/heade.ejs
views/index.ejs
views/footer.ejs
main.js

1
2
<!-- views/heade.ejs -->
<h1>头部</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= title %></title>
</head>
<body>
<!-- 模板片段引入 -->
<%- include('header') -%>

<!-- 输出变量 -->
<%= title %>

<!-- 使用js定义str -->
<% var str='你好,这里是学习ejs啊。'; %>
<!-- 输出js变量str -->
<%- str %>

<!-- 判断 嵌套 模板片段引入 -->
<% if (active===1) { %>
<%- include('footer') -%>
<% } %>
</body>
</html>
1
2
<!-- views/footer.ejs -->
<h2>底部</h2>
1
2
3
4
5
6
7
8
9
10
// main.js
var ejs = require('ejs');
ejs.renderFile("views/index.ejs", {title:'hello',active:1}, function(err, str){
// str => 输出绘制后的 HTML 字符串
if(err) {
console.log(err)
}else{
console.log(str)
}
});

运行

1
node main.js

控制台打印结果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$ D:\git\studyejs> node main.js
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>hello</title>
</head>

<body>
<!-- 模板片段引入 -->
<h1>头部</h1>
<!-- 输出变量 -->
hello

<!-- 使用js定义str -->

<!-- 输出js变量str -->
你好,这里是学习ejs啊。

<!-- 判断 嵌套 模板片段引入 -->

<h2>底部</h2>

</body>

</html>

生成html静态文件保存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// save.js
var fs = require('fs');
var ejs = require('ejs');

ejs.renderFile("views/index.ejs", {title:'hello',active:1}, function(err, str){
if(err) {
console.log(err)
}else{
console.log(str)
fs.writeFile('index.html',str,{encoding:'utf8'},function(err){
if(err) console.error(err)
})
}
});

运行:

1
node save.js

在项目下会新建一个index.html,内容和控制台输出的一样。

© 2018 粤ICP备17158201号