Nodejs 急 如何在一个模板里面嵌入另一个模板

Nodejs 急 如何在一个模板里面嵌入另一个模板

如下 layout 是基本模板 里面有body参数

如何把index的模板作为body参数

res.render(‘layout’, { title: ‘Express’, body :{“index” : “”}});

5 回复

当然可以！让我们来解答这个问题。假设你有一个基础模板 layout 和一个子模板 index，你想在 layout 中嵌入 index 模板。

示例代码

1. 基础模板 (layout.ejs)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>
    <!-- 在这里嵌入 index 模板 -->
    <%= body.index %>
</body>
</html>

2. 子模板 (index.ejs)

<p>This is the content of the index template.</p>

3. Node.js 代码 (app.js)

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

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

// 渲染页面
app.get('/', (req, res) => {
    res.render('layout', {
        title: 'My App',
        body: {
            index: ejs.renderFile(__dirname + '/views/index.ejs', {})
        }
    });
});

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

解释

  1. 基础模板 (layout.ejs):

    • 这个模板包含了页面的基本结构。
    • 使用 <%= body.index %> 来插入子模板 index.ejs 的内容。

  2. 子模板 (index.ejs):

    • 这个模板包含你要嵌入到基础模板中的内容。

  3. Node.js 代码 (app.js):

    • 首先设置模板引擎为 EJS。
    • 在路由处理函数中，使用 res.render 方法渲染 layout 模板。
    • body.index 参数通过 ejs.renderFile 方法渲染 index.ejs 文件的内容，并将其传递给 layout.ejs。

这样，当你访问 / 路径时，你会看到 layout.ejs 包含了 index.ejs 的内容。

希望这能帮到你！


木有人啊

什么模版模块，jade ejs ? ejs 可以在模版里面 <% include 模版名 %> 模版名没有后缀

嗯嗯 就是用这种 之前一直被误导le 以为默认加载layout,ejs 但是express3.0后不支持了

要在Node.js中使用模板引擎（例如EJS、Pug等）将一个模板嵌入到另一个模板中，可以通过传递局部变量或包含其他模板的方式来实现。这里以EJS模板引擎为例进行说明。

示例代码

假设我们有两个模板文件：

  • layout.ejs：主模板文件
  • index.ejs：子模板文件

layout.ejs

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <%- body %>
</body>
</html>

index.ejs

<h1>Hello, <%= name %>!</h1>
<p>Welcome to our site.</p>

在Node.js中渲染

在你的路由处理函数中，你可以这样渲染：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

// 渲染布局模板，并将index模板作为body部分
app.get('/', (req, res) => {
    const body = res.render('index', { name: 'John Doe' }, (err, result) => {
        if (err) return res.status(500).send(err);
        return res.render('layout', { title: 'Home Page', body });
    });
});

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

解释

  1. layout.ejs：这是一个基础模板文件，其中有一个变量 <%- body %> 用于插入其他模板的内容。
  2. index.ejs：这是一个简单的子模板文件，可以包含任何HTML和EJS逻辑。
  3. 渲染过程：在路由处理函数中，首先调用 res.render('index', ...) 渲染 index.ejs 模板，然后将结果传递给 layout.ejs 中的 body 变量。

这种方法可以让你轻松地在多个页面之间共享相同的布局，同时允许每个页面有自己的内容。

回到顶部