在Nodejs中，怎么给ejs模板添加布局？

在Nodejs中，怎么给ejs模板添加布局？

为什么我在views文件夹下编写了layout.ejs文件，但是布局好像并没有添加到页面，这是怎么回事啊？

4 回复

当然可以。在Node.js中使用EJS模板引擎时，添加布局通常涉及到继承和部分（partials）的使用。以下是一个详细的步骤和示例代码来帮助你理解如何实现这一点。

步骤

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

    npm install express ejs

  2. 设置Express应用： 创建一个基本的Express应用，并配置视图引擎为EJS。

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

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

// 设置视图文件夹
app.set('views', './views');

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

  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>
    <header>
        <h1>My Website</h1>
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <p>Copyright © 2023</p>
    </footer>
</body>
</html>

  4. 创建子视图： 在views文件夹下创建一个子视图文件，例如index.ejs。在这个文件中，你可以使用<%- include('layout') %>来引用布局文件。

    <!-- views/index.ejs -->
<%- include('../layout.ejs', { title: 'Home Page' }) %>
<p>Welcome to the home page!</p>

  5. 渲染视图： 在你的路由中渲染子视图文件。

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

解释

  • 布局文件 (layout.ejs)：这个文件包含了网站的基本结构，包括头部、主体和底部。<%- body %>标签用于插入子视图的内容。
  • 子视图文件 (index.ejs)：这个文件包含具体的页面内容。通过<%- include('../layout.ejs', { title: 'Home Page' }) %>，它会引用布局文件并传递数据（如标题）。
  • 路由：在路由处理函数中，使用res.render()方法渲染子视图，并传递数据到布局文件。

这样，你就可以在Node.js应用中使用EJS模板引擎来添加布局了。


已经改了，采用include <%includeheader.html%>

嗯。express已经抛弃layout了，layout的功能已经交给了template engine去处理了。template engine支持就支持，不支持就算了。

要在Node.js中使用EJS模板引擎添加布局，你需要创建一个基础的布局文件（例如layout.ejs），然后在子页面中引用它。默认情况下，EJS本身并不提供内置的布局功能，但你可以通过中间件如express-ejs-layouts来实现这一功能。

以下是一个简单的步骤说明：

  1. 安装必要的依赖： 你需要先安装express-ejs-layouts中间件。

    npm install express-ejs-layouts

  2. 设置Express应用： 在你的Express应用中配置EJS作为视图引擎，并使用express-ejs-layouts中间件。

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

const app = express();

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

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

// 其他路由和中间件配置...

  3. 创建布局文件： 在views目录下创建一个名为layout.ejs的文件。这个文件包含了页面的基本结构和共享元素。

    <!-- views/layout.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%- title %></title>
</head>
<body>
    <%- body %>
</body>
</html>

  4. 使用布局文件： 当你在其他EJS文件中渲染视图时，可以指定布局文件，或者直接将内容放入，express-ejs-layouts会自动处理布局。

    // routes.js 或者你的路由文件
app.get('/', (req, res) => {
    res.render('index', { title: 'Home' });
});

  5. 创建子页面文件： 创建一个子页面文件（例如index.ejs），并在这个文件中编写具体的内容。

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

通过上述步骤，你可以轻松地为你的Node.js应用中的EJS模板添加布局。当访问根路径时，Express会自动将index.ejs的内容插入到layout.ejs中定义的位置。

回到顶部