Nodejs Express ejs 3.*版本不支持 layout.ejs？

Nodejs Express ejs 3.*版本不支持 layout.ejs？

今天按教程写了一些测试代码 测试Express 模板引擎为ejs，如果我如何配置参数都不能使用layout.ejs 或其它。后来通过google 发现ejs 3.*以后版本不支持那种用法。

22 回复

Nodejs Express ejs 3.*版本不支持 layout.ejs？

今天按教程写了一些测试代码来测试Express模板引擎为ejs，无论我如何配置参数都无法使用layout.ejs或其他类似的功能。后来通过Google发现，从ejs 3.*版本开始，不再支持那种用法。

解决方案

从EJS 3.*版本开始，官方移除了内置的布局支持（即layout.ejs）。不过，你可以通过一些替代方案来实现相同的效果。以下是两种常见的方法：

  1. 手动包含布局文件

    你可以手动将布局文件的内容包含到你的视图中。假设你有一个名为layout.ejs的布局文件，你可以这样处理：

    // 假设你有以下目录结构
// views/
// ├── layout.ejs
// ├── home.ejs

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

// 设置视图引擎
app.set('view engine', 'ejs');

// 定义布局文件
const layoutContent = `
<!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>
    <%- body %>
</body>
</html>
`;

app.get('/', (req, res) => {
    res.send(layoutContent.replace('<%- body %>', `
        <h1>Welcome to the Home Page</h1>
    `));
});

app.listen(3000, () => console.log('Server running on port 3000'));

  2. 使用中间件或第三方库

    另一种方法是使用一些第三方库或自定义中间件来实现布局功能。例如，可以使用express-ejs-layouts库：

    npm install express-ejs-layouts

    然后在应用中使用该库：

    const express = require('express');
const ejsLayouts = require('express-ejs-layouts');
const app = express();

// 设置视图引擎
app.set('view engine', 'ejs');

// 使用中间件
app.use(ejsLayouts);

app.get('/', (req, res) => {
    res.render('home', { title: 'Home' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

    在这种情况下，你需要创建一个名为home.ejs的文件，并且在其中引用布局文件：

    <!-- views/home.ejs -->
<h1>Welcome to the Home Page</h1>

    同时，你需要确保express-ejs-layouts正确地设置布局文件的位置。例如，在根目录下创建一个views/layouts/main.ejs文件，并将其作为默认布局。

通过上述方法，即使在EJS 3.*版本中，你也可以轻松实现布局功能。


可以用include

是的 请加载express-partials

小弟是初学的，有没有参考代码啊

如何加载express-partials

在package.json里面的dependencies添加"express-partials": "*" 然后运行cmd并切换至项目目录运行npm install获得最新版。 app.js里面引用express-partials: 1 添加引用var partials = require(‘express-partials’); 2 在app.set(‘view engine’, ‘ejs’);下面添加app.use(partials());

用include如何实现啊

根据这个思路可以自行扩展

也碰到这个问题。

http://hectorcorrea.com/blog/using-layouts-with-ejs-in-express-3-x

我就是这个问题转用 swig 了。

我其实挺赞同express去掉layout的支持， 其实master, layout这种布局蛮局限的， 比如你的master里有一些公用的css，而每个view又有一些独立的css,这时候你就很纠结怎么写，如果把所有的css都写在master里肯定会造成页面加载的时候加载了很多不需要的css， 如果把css分散到每个view里面去，因为head是在master里的，view的css只能写在body里，这样页面加载的时候一开始就会有错乱

其实3.1 以后 直接 app.engine('.html', require('ejs').__express); 就可以注册模板引擎了

新版本改成了 <%- include file.ejs %>

具体使用方法如下：

  1. views文件夹 下新建header.ejs，插入代码

    <html> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> <title>Index</title> <link rel=“stylesheet” href=“stylesheets/style.css”> </head> <body>

  2. views文件夹 下新建footer.ejs，插入代码

    </body> </html>

  3. 修改index.ejs的代码如下

    <%- include header %> Hello,world! <%- include footer %>

这个办法不错，和PHP的思路一样。

虽然这个是express github 中的demo，但是我不认同这种include方法 这样写的话，完全破坏了页面片段的完整性 我认为layout是完整的共同框架，里面会有很多个坑，一些placehold 然后到具体的页面片段中，由该页面判断来决定去使用哪个框架layout,然后该页面片段也可以把自己声明成placehold

include是标准做法哈哈

传变量到layout里。

最近也在郁闷这问题，include太丑了，还好找到这个：express-ejs-layouts

这个又解决了我的困惑，我作为初学者，正在踩一个个的坑，感谢，非常感谢这些布道者～～

的确不支持了，方法好多啊，要学习了

Node.js Express EJS 3.* 版本不支持 layout.ejs？

问题描述

你在使用 Node.js 和 Express 框架时，发现从 EJS 3.* 版本开始，不再支持使用 layout.ejs 这种布局文件的方式。你尝试了不同的配置参数，但仍然无法正常使用布局。

解决方案

EJS 3.* 版本确实不再直接支持类似 layout.ejs 的文件。但是，你可以通过一些替代方法来实现类似的效果。以下是两种常见的解决方案：

  1. 使用中间件实现布局

    你可以编写一个中间件来实现布局功能。以下是一个简单的示例：

    // 在你的应用文件中
const express = require('express');
const app = express();

app.set('view engine', 'ejs');

// 定义一个布局中间件
app.use((req, res, next) => {
  res.renderLayout = function(view, options) {
    res.render('layout', Object.assign({}, options, { content: res.renderToString(view, options) }));
  };
  next();
});

// 渲染视图
app.get('/', (req, res) => {
  res.renderLayout('home', { title: 'Home Page' });
});

// 定义布局文件 (views/layout.ejs)
<html>
<head><title><%= title %></title></head>
<body>
  <h1><%= title %></h1>
  <%= content %>
</body>
</html>

// 定义子视图文件 (views/home.ejs)
<p>This is the home page</p>

  2. 使用第三方库

    你也可以考虑使用一些第三方库，例如 express-ejs-layouts，它提供了一个更方便的方式来处理布局问题。

    首先安装该库：

    npm install express-ejs-layouts

    然后在你的应用文件中使用它：

    // 在你的应用文件中
const express = require('express');
const app = express();
const expressLayouts = require('express-ejs-layouts');

app.set('view engine', 'ejs');
app.use(expressLayouts);

// 渲染视图
app.get('/', (req, res) => {
  res.render('home', { title: 'Home Page' });
});

// 定义布局文件 (views/layout.ejs)
<html>
<head><title><%= title %></title></head>
<body>
  <h1><%= title %></h1>
  <%= body %>
</body>
</html>

// 定义子视图文件 (views/home.ejs)
<p>This is the home page</p>

通过上述方法，你可以在 EJS 3.* 版本中实现类似布局的功能。

回到顶部