Nodejs express ejs 模板继承的问题

当然可以。根据你的描述，Express.js 的布局功能确实有一些变化，特别是在 Express 4.x 版本之后。Express 4.x 取消了内置的布局系统，而是将布局管理的责任交给了中间件。因此，如果你使用的是较新的 Express 版本，你需要手动引入一个布局管理中间件，比如 express-ejs-layouts。

示例代码

安装 express-ejs-layouts 中间件

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

npm install express-ejs-layouts --save

配置 Express 使用 express-ejs-layouts

接下来，在你的应用中配置 Express 使用这个中间件，并设置布局文件路径：

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);

// 设置 views 文件夹路径
app.set('views', path.join(__dirname, 'views'));

// 定义 layout.ejs 布局文件
app.get('/', (req, res) => {
    res.render('index', {
        title: '主页',
        content: '这是首页的内容'
    });
});

// 启动服务器
app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

创建 layout.ejs 和 index.ejs 文件

在 views 文件夹中创建以下两个文件：

layout.ejs（定义布局）
index.ejs（定义页面内容）

layout.ejs

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

index.ejs

<h1><%= title %></h1>
<p><%= content %></p>

解释

express-ejs-layouts 是一个第三方中间件，它允许你在 Express 应用中轻松实现 EJS 模板的继承。
在 layout.ejs 中，<%- body %> 标签用于插入实际页面的内容。
当你渲染 index.ejs 时，它会被自动插入到 layout.ejs 中。

这样，你就可以通过简单的配置和文件组织来实现 EJS 模板的继承了。

yuanlaile 2楼•1 个月前

express-partials Express 3.x Layout & Partial support. The beloved feature from Express 2.x is back as a middleware!

itying888 3楼•1 个月前

那我应该怎么做啊。。。

sinazl 4楼•1 个月前

npm install express-partials 然后在你的layout中需要显示body的地方<%- body %>

ionicwang 5楼•1 个月前

这都快成月经贴了…ejs提供了include功能…

phonegap100 6楼•1 个月前作者

app.use(partials()); 一定要在 app.use(app.router); 前面

phonegap100 7楼•1 个月前作者

去学习一套完整的模版引擎吧，完整的模版引擎会告诉你一些标准模版语言使用规范和一些接口，使用模版继承，一般都是用include，几乎所有模版语言都这么定义的。（推荐先去看看freemark模版引擎，不要在意他是java的，主要看他提供的模版语言规范和引擎）

phonegap100 8楼•1 个月前作者

好的。O(∩_∩)O谢谢~

sinazl 9楼•1 个月前

step1:npm install express-partials step2:var partials = require(‘express-partials’) step3:app.use(partials());

wuwangju 10楼•1 个月前

顶你。。。

bupafengyu 11楼•1 个月前

请问不想用layout的页面应该咋写呢？ ejs模板的

gougou168 12楼•1 个月前

res.render('XXOO',{layout:false});

sinazl 13楼•1 个月前

res.render('XXOO',{layout:false});

yuanlaile 14楼•1 个月前

在Express.js中，虽然从Express 4.0开始不再直接支持layout.ejs的概念，但你可以通过一些方法来实现类似的功能。下面是一个简单的实现模板继承的方法。

示例代码

安装依赖

确保你已经安装了express和ejs：
```
npm install express ejs
```

设置Express应用

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

// app.js
const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

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

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

创建布局文件

在views文件夹中创建一个名为layout.ejs的布局文件：

<!-- views/layout.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%- title %></title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <main>
        <%- body %>
    </main>
    <footer>
        <p>版权所有 © 2023</p>
    </footer>
</body>
</html>

创建子模板

在views文件夹中创建一个名为index.ejs的子模板：

<!-- views/index.ejs -->
<% layout('layout') %>
<h2><%= title %></h2>
<p>欢迎来到我的主页！</p>

渲染子模板

修改路由以确保子模板使用布局文件进行渲染。

解释

在上面的例子中，我们创建了一个基本的Express应用，并使用EJS作为视图引擎。layout.ejs充当布局模板，而index.ejs是具体的页面内容。通过在index.ejs中使用<% layout('layout') %>指令，我们可以指示EJS将该模板的内容嵌入到layout.ejs的<main>标签中。

这种方法虽然不是内置的布局机制，但可以很好地模拟Express早期版本中的layout.ejs功能。