Nodejs中ejs怎么使用layout呢？

Nodejs中ejs怎么使用layout呢？

用的ejs模板引擎，但是在view下没找到layout.ejs，直接加了一个然后指定 layout: ‘layout’ 也没生效，这个要怎么处理呢？

19 回复

当然可以。EJS（Embedded JavaScript）是一种简单易用的模板引擎，常用于Node.js项目中来生成HTML页面。如果你希望在EJS中使用布局文件（layout），可以通过一些配置来实现。以下是一个简单的示例，帮助你理解如何在Node.js项目中使用EJS的布局功能。

步骤1：安装必要的依赖

首先确保你的项目已经安装了express和ejs。如果还没有安装，可以使用npm来安装：

npm install express ejs

步骤2：设置Express应用

接下来，你需要在Express应用中设置视图引擎为EJS，并配置布局文件的路径。假设你的目录结构如下：

/project-root
    /views
        layout.ejs
        home.ejs
    app.js

在app.js中，你可以这样设置：

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

const app = express();

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

// 使用布局文件
app.engine('ejs', require('express-ejs-layouts'));

// 静态文件路径
app.use(express.static(path.join(__dirname, 'public')));

// 路由定义
app.get('/', (req, res) => {
    res.render('home', { title: 'Home Page' });
});

app.listen(3000, () => console.log('App is listening on port 3000'));

步骤3：创建布局文件

在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>Welcome to My Website</h1>
    </header>
    <main>
        <!-- 这里将插入具体的页面内容 -->
        <%- body %>
    </main>
    <footer>
        <p>© 2023 My Company</p>
    </footer>
</body>
</html>

步骤4：创建具体内容页面

在同一目录下创建一个名为home.ejs的文件，内容如下：

<h2>This is the Home Page</h2>
<p>Welcome to our website!</p>

步骤5：运行应用

现在，当你访问http://localhost:3000/时，你应该能看到布局文件中的头部、主体和底部，其中主体部分包含了home.ejs的具体内容。

通过这种方式，你可以轻松地在EJS中使用布局文件，从而避免重复编写相同的HTML代码。


用jade吧，ejs真不咋地

手写啊，很奇怪为什么那么多人发帖需要express命令初始化目录出来。 自己手动建一个分分钟就搞定的，而且想怎么改就怎么改。

我也遇到了同样的问题。 不知道 express　为什么不加载 layout.ejs 自己手动写了，不管用。 我是用 express 3.0 测试的。

我们没有您说的这样笨的。 现在的问题是： 目录views下面的 layout.ejs 不其作用。 请问您有良方？

express3.0已经把layout移除了，install express-partials 可解决问题。

好的，谢谢

因为初学照着教程一路走下来发觉有些地方跟作者讲的不一样，nodejs更新的缘故应该，就发帖请教一下，谢谢你的建议，jade我也会去尝试的

不错，找到问题的解决方法了

如何解决？？？？

如何解决 我指定模版也是失败的 就是我估计是 默认目录不是views下

express 3.x 中使用ejs的模版比较麻烦一点，但是还是很容易的。 假如你想使用一个名为layout_header.ejs的模版只要建立layout_header.ejs后，在你的网页中引入 <% include layoutHeader%>就可以了。 你现在看得教程是<%-body%>的写法吧，这个在3.0里面已经不支持了。 这样用模版真的不优雅，但是这好像是唯一的办法。

express 3 之后移除了layout的支持, 不过你可以使用这个包实现: https://github.com/randometc/ejs-locals

推荐一篇2.x到3.x的注意事项

现在是include了，更强大了

楼上正解

我擦 你们怎么能人寿这种写法 轻轻的vue都比这好用的多挖

Express框架中如何引用ejs模板引擎: http://www.cnblogs.com/greenteaone/p/3685733.html

在Node.js中使用EJS模板引擎时，可以通过自定义布局文件（例如layout.ejs）来实现页面布局。默认情况下，EJS并不提供内置的布局支持，但你可以通过一些额外的设置来实现这一功能。

首先，确保你的项目中已经安装了EJS。如果还没有安装，可以使用以下命令进行安装：

npm install ejs

接下来，创建一个名为layout.ejs的文件，它将作为所有其他EJS视图的布局模板。layout.ejs的基本结构如下：

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

在这个文件中，<%- body %>用于插入实际内容。

假设你有一个名为home.ejs的视图文件，其内容如下：

<h1>Welcome to My Site!</h1>
<p>This is the home page.</p>

为了让home.ejs使用layout.ejs，你需要在渲染视图时指定布局。这可以通过Express框架轻松完成。首先，确保在应用启动时正确设置了EJS为模板引擎：

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

app.set('view engine', 'ejs');

// 设置布局目录
app.engine('html', require('ejs').renderFile);
app.set('views', './views'); // 假设视图文件在views目录下

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

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

在这个例子中，res.render('home', { title: 'Home Page' });会自动将home.ejs的内容插入到layout.ejs中的<%- body %>位置，并且传递给home.ejs的变量也会被传递给layout.ejs。

通过这种方式，你可以为你的EJS视图添加一致的布局。确保视图文件（如home.ejs）位于设置的视图目录中（本例中为./views），并且布局文件（如layout.ejs）也在同一目录下。

回到顶部