html静态模版若何经由过程模版引擎如 EJSPug等在办事端生成静态HTML

EJS（Embedded JavaScript）是一个盛行的模板引擎，许可开拓者在HTML文件中嵌入JavaScript代码。
它紧张用于在Node.js运用中天生动态网页。
EJS通过大略的语法使得将数据渲染到HTML页面中变得直不雅观和高效。

Pug（之前称为 Jade）是一个高性能的模板引擎，紧张用于Node.js和Express运用。
它的设计目标是使HTML代码更加简洁和易读。
Pug通过采取缩进的语法，省去了许多传统HTML中的冗余标记，使得开拓者能够更快速地构建繁芜的HTML构造。

下面我们就来看看这两种模板引擎如何在前端渲染中实现静态HTML的渲染

html静态模版若何经由过程模版引擎如 EJSPug等在办事端生成静态HTML Java

（图片来自网络侵删）

利用 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;// 设置视图引擎为 EJSapp.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 htmlhtml(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模板

在终端中运行运用

node app.js

然后在浏览器中访问 http://localhost:3000，就可以看到对应的效果了。

总结

利用EJS或Pug等模板引擎可以方便地在做事端天生动态的HTML内容。
这种方法适用于须要根据用户输入或其他数据天生HTML的情形。
通过以上示例，我们可以快速上手并天生静态HTML页面。