Nodejs Express4.x创建项目没有layout.ejs怎么解决

Nodejs Express4.x创建项目没有layout.ejs怎么解决

如题，新手请教怎么解决在express4.x版本下没有layout.ejs

10 回复

当然可以。在Express 4.x版本中，不再包含默认的布局文件（如layout.ejs），而是需要开发者自行引入中间件来实现类似的功能。下面将详细介绍如何在Express 4.x中使用EJS模板引擎并添加一个布局文件。

解决方案

  1. 安装必要的依赖包： 确保你已经安装了express和ejs。如果还没有安装，可以通过npm进行安装：

    npm install express ejs --save

  2. 设置EJS作为视图引擎： 在你的Express应用中设置EJS作为视图引擎，并指定视图文件的路径。

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

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

// 设置视图文件存放路径
app.set('views', './views');

  3. 创建布局文件： 在views目录下创建一个名为layout.ejs的文件，这个文件将作为所有其他视图文件的布局模板。

    <!-- views/layout.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <p>Copyright © 2023</p>
    </footer>
</body>
</html>

  4. 创建子视图文件： 创建一个简单的子视图文件，比如index.ejs，它将被插入到布局文件中的<%- body %>位置。

    <!-- views/index.ejs -->
<h2>Hello, <%= name %>!</h2>

  5. 渲染视图文件： 在路由处理函数中渲染子视图文件，Express会自动使用布局文件。

    app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page', name: 'Visitor' });
});

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

通过上述步骤，你就可以在Express 4.x项目中使用EJS模板引擎并实现布局功能。这样，所有的视图都会共享相同的布局文件，从而保持页面的一致性和整洁性。


它不支持，就不要用了。用 include 就好了。

这个可用 https://www.npmjs.org/package/express-ejs-layouts 不过我更倾向用express-handlebars

我推荐使用consolidate.js切换使用的模板引擎。

最近把一个project的模板引擎从Jade切换到Nunjucks。Mozilla出品的Nunjucks模板引擎功能很强劲。

虽然没用过layout.ejs，但是我估计楼主你看的是旧教程。

有一个解决方案是安装 express-partials 模块，然后在 app.set(‘view engine’, ‘ejs’); 这句后面加上app.use(partials());即可。 不知道还有没有别的解决方法？

如果用 mustache 类的模板引擎（比如 Hogan 和 Handlebars）的话可以试试我写的这个插件：MustLayout，用起来会非常方便。而且理论上只要模板语法不冲突，这个插件可以兼容所有模板引擎。

参考下这个，新版express重写的微博实例 https://github.com/zjh-neverstop/microblog

mark 一下 nunjucks 名字挺别扭的

在Express 4.x中，布局文件（如layout.ejs）不再直接包含在框架中。你需要手动引入一个中间件或使用模板引擎插件来实现这一功能。常用的解决方案是使用express-ejs-layouts插件。

示例代码

  1. 安装express-ejs-layouts插件

    在你的项目目录中运行以下命令：

    npm install express-ejs-layouts --save

  2. 配置应用以使用express-ejs-layouts

    在你的应用入口文件（通常是app.js或server.js）中，添加以下代码：

    const express = require('express');
const path = require('path');
const expressLayouts = require('express-ejs-layouts');

const app = express();

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

// 使用express-ejs-layouts中间件
app.use(expressLayouts);

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

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

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

  3. 创建一个基本的布局文件views/layout.ejs

    在views目录下创建一个名为layout.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>
    <%- body %>
</body>
</html>

  4. 创建一个示例页面views/index.ejs

    创建一个简单的页面文件views/index.ejs，内容如下：

    <h1>Welcome to the Home Page</h1>
<p>This is a simple page.</p>

解释

  • express-ejs-layouts插件提供了类似Rails的布局功能。
  • app.use(expressLayouts)使express-ejs-layouts生效。
  • 在模板文件中，使用<%- body %>来插入主体内容。
  • 每个页面的标题可以在渲染时动态设置，如res.render('index', { title: 'Homepage' })。

通过这种方式，你可以轻松地在Express 4.x应用中实现布局功能。

回到顶部