Nodejs express ejs 模板继承的问题
Nodejs express ejs 模板继承的问题
教程上说默认情况下所有的模板都继承自layout.ejs 可是我新下的express安装后,views文件夹只有index.ejs 查了下说express3.0已经把layout概念移除了 那我怎样做到继承呢
当然可以。根据你的描述,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 模板的继承了。
express-partials Express 3.x Layout & Partial support. The beloved feature from Express 2.x is back as a middleware!
npm install express-partials 然后在你的layout中需要显示body的地方<%- body %>
这都快成月经贴了…ejs提供了include功能…
app.use(partials());
一定要在 app.use(app.router);
前面
去学习一套完整的模版引擎吧,完整的模版引擎会告诉你一些标准模版语言使用规范和一些接口,使用模版继承,一般都是用include,几乎所有模版语言都这么定义的。(推荐先去看看freemark模版引擎,不要在意他是java的,主要看他提供的模版语言规范和引擎)
好的。O(∩_∩)O谢谢~
step1:npm install express-partials step2:var partials = require(‘express-partials’) step3:app.use(partials());
顶你。。。
请问不想用layout的页面应该咋写呢? ejs模板的
res.render('XXOO',{layout:false});
res.render('XXOO',{layout:false});
在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
功能。