Nodejs中代替layout.ejs的方法

Nodejs中代替layout.ejs的方法

express 3.x已经去掉的layout，那用什么方法能实现layout.ejs的功能。网上说用include，哪位能给个具体的例子？

4 回复

当然可以！在Express 4.x及更高版本中，内置的布局功能已被移除。不过，我们可以通过一些第三方中间件来实现类似的功能。一个非常流行的解决方案是使用express-ejs-layouts库。

安装 express-ejs-layouts

首先，你需要安装 express-ejs-layouts：

npm install express-ejs-layouts --save

示例代码

假设你有一个基本的Express应用，并且你想创建一个通用的布局文件 layout.ejs 来包含其他页面。下面是具体的步骤：

  1. 创建布局文件

    创建一个名为 layout.ejs 的文件，放在 views 目录下：

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

  2. 设置Express应用

    在你的Express应用中，引入并配置 express-ejs-layouts：

    const express = require('express');
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('public'));

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

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

  3. 创建页面文件

    创建一个简单的页面文件 index.ejs 放在 views 目录下：

    <!-- views/index.ejs -->
<h2>Welcome to the Home Page!</h2>

解释

  • express-ejs-layouts 中间件会自动将所有渲染的视图包裹在 layout.ejs 中。
  • 在 layout.ejs 中，<%- body %> 是占位符，用于插入实际的页面内容。
  • 通过 res.render('index', { title: 'Home Page' }); 渲染 index.ejs 文件时，layout.ejs 会自动包含 index.ejs 的内容，并传递 title 变量到 layout.ejs 中。

这样，你就实现了类似于 layout.ejs 的功能，而无需手动编写复杂的逻辑。


<% include footer.ejs %>

http://cnodejs.org/topic/519e01c563e9f8a542fa68f9

这位大神的教程里面有第一章就有介绍，所以你可以看看

在Express.js应用中，如果你想要实现类似layout.ejs的功能，可以使用模板引擎（如EJS）中的布局功能，或者使用第三方中间件来管理布局。

方法一：使用模板引擎内置的布局功能

以EJS为例，你可以通过以下方式创建一个基础布局文件和一个视图文件：

  1. 创建一个布局文件 views/layout.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%- title %></title>
</head>
<body>
    <%- body %>
</body>
</html>
  1. 创建一个视图文件 views/home.ejs:
<% include layout %>

<h1>Home Page</h1>
<p>Welcome to the home page.</p>

在Express.js应用中，你需要配置EJS作为默认的模板引擎，并且指定布局文件的位置：

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

app.set('view engine', 'ejs');
app.set('views', './views'); // 设置视图目录
app.engine('html', require('ejs').renderFile);

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

app.listen(3000);

方法二：使用第三方中间件

你也可以使用如@mantrajs/mvc或express-ejs-layouts等中间件来简化布局管理。

使用 express-ejs-layouts

首先安装 express-ejs-layouts:

npm install express-ejs-layouts

然后，在你的Express应用中使用它：

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

const app = express();

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

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

app.listen(3000);

此时，所有视图都会自动包含 layout.ejs 文件，而无需显式引用。

以上是两种不同的方法来实现类似于layout.ejs的功能。希望这对你有所帮助！

回到顶部