EJS（Embedded JavaScript）是一个流行的模板引擎，允许开发者在HTML文件中嵌入JavaScript代码。它主要用于在Node.js应用中生成动态网页。EJS通过简单的语法使得将数据渲染到HTML页面中变得直观和高效。
Pug（之前称为 Jade）是一个高性能的模板引擎，主要用于Node.js和Express应用。它的设计目标是使HTML代码更加简洁和易读。Pug通过采用缩进的语法，省去了许多传统HTML中的冗余标记，使得开发者能够更快速地构建复杂的HTML结构。
下面我们就来看看这两种模板引擎如何在前端渲染中实现静态HTML的渲染
使用 EJS
安装 EJS
首先，在你的项目中安装 EJS，如下所示。
npm install ejs编写 EJS 模板
在views/index.ejs中添加相应的静态页面模板，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title %></title>
</head>
<body>
<h1>Welcome to <%= title %>!</h1>
<p><%= message %></p>
</body>
</html>
创建 Express 应用
在app.js中添加如下的内容来引入相关的配置。
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;
// 设置视图引擎为 EJS
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
res.render('index', { title: 'My EJS App', message: 'This is a static HTML page generated from EJS!' });
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
运行应用
在终端中运行应用，如下所示。
node app.js然后就可以在浏览器中看到对应的效果了。
使用 Pug
安装 Pug
首先，在你的项目中安装 Pug，如下所示。
npm install pug编写 Pug 模板
在views/index.pug中添加如下的静态文件模板，如下所示。
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title= title
body
h1 Welcome to #{title}!
p #{message}
创建Express应用
如下所示创建一个Express模板
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;
// 设置视图引擎为 Pug
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
res.render('index', { title: 'My Pug App', message: 'This is a static HTML page generated from Pug!' });
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在终端中运行应用
node app.js然后在浏览器中访问 http://localhost:3000，就可以看到对应的效果了。
总结
使用EJS或Pug等模板引擎可以方便地在服务端生成动态的HTML内容。这种方法适用于需要根据用户输入或其他数据生成HTML的情况。通过以上示例，我们可以快速上手并生成静态HTML页面。