Nodejs express ejs 模板继承的问题

发布于 1周前 作者 phonegap100 来自 nodejs/Nestjs

Nodejs express ejs 模板继承的问题

教程上说默认情况下所有的模板都继承自layout.ejs 可是我新下的express安装后,views文件夹只有index.ejs 查了下说express3.0已经把layout概念移除了 那我怎样做到继承呢

14 回复

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

示例代码

  1. 安装 express-ejs-layouts 中间件

首先,你需要安装 express-ejs-layouts

npm install express-ejs-layouts --save
  1. 配置 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');
});
  1. 创建 layout.ejsindex.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的概念,但你可以通过一些方法来实现类似的功能。下面是一个简单的实现模板继承的方法。

示例代码

  1. 安装依赖

    确保你已经安装了expressejs

    npm install express ejs
  2. 设置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'));
  3. 创建布局文件

    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>
  4. 创建子模板

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

    <!-- views/index.ejs -->
    <% layout('layout') %>
    <h2><%= title %></h2>
    <p>欢迎来到我的主页!</p>
  5. 渲染子模板

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

解释

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

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

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!