参考资料：

EJS – 嵌入式 JavaScript 模板引擎 | EJS中文文档

ejs文件如何转化成html | PingCode智库

ejs和pug类似，都是html的模板语言。

语法规则

标签含义

  • <%‘脚本’标签，用于流程控制，无输出
  • <%_删除其前面的空格
  • <%=输出数据到模板(输出的是转义html标签)
  • <%-输出非转义的数据到模板
  • <%#注释标签，不执行、不输出内容
  • <%%输出字符串’<%’
  • %>一般结束标签
  • -%>删除紧跟其后的换行符
  • _%>将结束标签后面的空格符删除

实践

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// ejs2html.js is a Node.js script that uses the EJS library to render an EJS template file and write the output to a html file.
const ejs = require('ejs');
const fs = require('fs');
const path = require('path');

const templatePath = path.join(__dirname, 'test.ejs');
const outputPath = path.join(__dirname, 'test.html');
// 传入参数到ejs模板中
const data = {
    title: 'EJS Example',
    heading: 'Hello, EJS!',
    message: 'This is a message rendered using EJS.'
};


// 读取EJS模板文件
const template = fs.readFileSync(templatePath, 'utf8');

// 使用EJS渲染模板
const html = ejs.render(template, data);

// 将渲染后的HTML写入文件
fs.writeFileSync(outputPath, html);
console.log('HTML file has been generated successfully.');
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>

<head>
  <title>
    <%# < \ %=将变量名中的内容转义出来到html代码中 -%>
    <%= title %>

  </title>
</head>

<body>
  <h1>
    <%= heading %>
  </h1>

  a
  <%# 这一行注释将会占据空行 %>
  b

  a
  <%# 这一行注释将不会占据空行 -%>
  b

  a
  <%# 这一行注释后面的c前面会有空格 %> c
  b

  a
  <%# 这一行注释后面的c前面将没有空格 _%> c
  b

  <%# 下面这行代码在模板中定义了一个变量i=3 -%>
  <% var i = 3; %>
  <%# 下面这行代码在模板中使用了变量i -%>
  <%# 使用_\%\>是为了删除空格 -%>
  <%_ for(var i=0; i<5; i++) { _%>
  <a><%= i %></a>
  <% } _%>
  <%% sdfgsdg %>

    <%# <\%\- 后面可以加变量或者是include语句 -%>
    <%- message %>

    <!-- <\%- include(templatePath) %> 这一行报错找不到文件，应该是自己的转换脚本的问题-->

    <p>
      <%= message %>
    </p>

</body>


</html>
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>

<head>
  <title>
        EJS Example

  </title>
</head>

<body>
  <h1>
    Hello, EJS!
  </h1>

  a
  
  b

  a
    b

  a
   c
  b

  a
  c
  b

    
      <a>0</a>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <% sdfgsdg %>

        This is a message rendered using EJS.

    <!-- <\%- include(templatePath)  这一行报错找不到文件，应该是自己的转换脚本的问题-->

    <p>
      This is a message rendered using EJS.
    </p>

</body>


</html>