Nodejs ejs解析html后缀

Nodejs ejs解析html后缀

新建：express web -e(新建ejs模板的网站web) 安装：cd web;npm install 修改：在app.js中添加app.register(’.html’,require(‘ejs’)); 运行：node app.js 错误：enter image description here


3 回复

Nodejs ejs解析html后缀

在使用Express框架时，我们经常需要将EJS作为视图引擎来渲染HTML页面。默认情况下，Express可能不会自动识别.html文件作为EJS模板文件。因此，我们需要对其进行一些配置，以便能够使用.html作为后缀来解析EJS模板。

示例代码

首先，确保你已经安装了Express和EJS模块。如果没有安装，可以使用以下命令进行安装：

npm install express ejs --save

接下来，在你的项目中创建一个简单的Express应用，并配置EJS模板引擎以支持.html后缀。

app.js

const express = require('express');
const path = require('path');

const app = express();

// 设置视图引擎为EJS
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 注册.html为EJS模板
app.engine('.html', require('ejs').__express);

// 静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

// 路由示例
app.get('/', (req, res) => {
    res.render('index.html', { title: 'Welcome to EJS' });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

views/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to the EJS page!</h1>
</body>
</html>

解释

  1. 设置视图引擎：

    • app.set('view engine', 'ejs'); 设置默认的视图引擎为EJS。
    • app.set('views', path.join(__dirname, 'views')); 指定视图文件的位置。

  2. 注册.html为EJS模板：

    • app.engine('.html', require('ejs').__express); 这行代码告诉Express如何处理.html文件。require('ejs').__express 是EJS模块提供的一种方法，用于解析EJS模板。

  3. 路由和渲染：

    • app.get('/', ...) 定义了一个根路径的路由，当访问该路径时，会调用res.render('index.html', { title: 'Welcome to EJS' }); 方法来渲染index.html文件，并传递一个包含title属性的对象。

通过以上步骤，你可以成功地让Express使用EJS模板引擎来解析具有.html后缀的文件。


####同遇到这个问题，也没搞明白怎么回事

在Node.js项目中使用EJS作为视图引擎时，默认情况下EJS模板文件的扩展名是.ejs。如果你想使用.html扩展名来保存你的EJS模板文件，可以通过修改Express应用中的配置来实现。

以下是如何设置Express以支持.html扩展名的EJS模板文件：

示例代码

首先，确保你在项目中已经安装了EJS模板引擎：

npm install ejs --save

然后，在你的app.js（或server.js等主文件）中添加如下配置：

const express = require('express');
const app = express();

// 设置EJS为模板引擎，并指定.html作为扩展名
app.set('views', './views'); // 设置视图文件夹路径
app.set('view engine', 'ejs'); // 设置EJS为模板引擎
app.engine('.html', require('ejs').__express); // 注册.ejs扩展名为.html文件使用

// 其他中间件和路由配置
app.get('/', function(req, res) {
    res.render('index.html', { title: 'Hello EJS' }); // 渲染index.html文件
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`App listening on port ${port}`));

解释

  1. app.set('views', './views'): 指定视图文件所在的目录。在这个例子中，假设所有视图文件都在views文件夹中。

  2. app.set('view engine', 'ejs'): 设置EJS作为默认的模板引擎。

  3. app.engine('.html', require('ejs').__express);: 注册.html扩展名的文件使用EJS模板引擎。注意这里使用的是__express方法，它是EJS库中用于注册自定义文件扩展名的方法。

  4. res.render('index.html', { title: 'Hello EJS' }): 渲染名为index.html的视图文件，并传递一个包含数据的对象给模板。

通过上述步骤，你可以让Express应用正确识别并渲染.html扩展名的EJS模板文件。这样你就可以用.html扩展名来组织你的EJS模板文件了。

回到顶部