Nodejs express3.0安装并使用layout模板

Nodejs express3.0安装并使用layout模板

1.安装 express-partials。 方法一：运行 cmd 用 npm install express-partials 方法二：在 package.json 里面的 dependencies 添加 “express-partials”: “*”。然后运行 cmd 并切换至项目目录运行 npm install 获得最新版。

  1. app.js 里面引用 express-partials。 步骤一：添加引用 var partials = require('express-partials'); 步骤二：在 app.set('view engine', 'ejs'); 下面添加 app.use(partials());

3.在需要引用模板的地方调用 layout:'模版名称' 示例

app.get('/reg', function (req, res) {
  res.render('reg', {
    title: '用户注册',
    layout: 'template'
  });	
});

11 回复

Nodejs express3.0安装并使用layout模板

在Express 3.0中，我们可以通过使用express-partials库来实现页面布局（Layout）的功能。下面将详细介绍如何安装和配置express-partials，并在Express应用中使用它。

1. 安装 express-partials

首先，我们需要安装express-partials模块。这可以通过两种方式进行：

方法一：通过命令行安装

打开命令行工具（例如cmd或终端），然后运行以下命令：

npm install express-partials

方法二：通过修改package.json文件安装

在项目的package.json文件的dependencies部分添加以下行：

"dependencies": {
  "express-partials": "*"
}

保存文件后，在命令行中切换到项目目录并运行：

npm install

2. 在app.js中引入express-partials

接下来，在app.js文件中引入并配置express-partials：

步骤一：引入模块

var partials = require('express-partials');

步骤二：配置中间件 在设置视图引擎之后，添加如下代码：

app.set('view engine', 'ejs'); // 假设使用EJS作为视图引擎
app.use(partials());

3. 使用layout属性渲染模板

现在可以在路由处理函数中使用layout属性来指定要使用的布局模板。例如：

app.get('/reg', function (req, res) {
  res.render('reg', {
    title: '用户注册',
    layout: 'template'  // 这里指定了名为`template`的布局模板
  });
});

在这个例子中，当访问/reg路径时，Express会使用名为template的布局模板，并渲染reg.ejs视图文件。

通过以上步骤，你就可以成功地在Express 3.0应用中使用布局模板了。这样可以避免重复编写相同的HTML结构，提高代码的复用性和可维护性。


LZ资料哪里找的，我找了半天没找到ejs官网打不开 jade语法又那么蛋疼愁死了。ejs在这么不给力只好转jade了

我也是用楼主的方法，才行的。

include方法也挺不错的

express 2升级到3的注意事项和替代方案:

https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

视图类可以看下 View system changes 那一段

To get back layout functionality with EJS you can use express-partials or ejs-locals.

Enjoy~

怎么感觉升到3了之后怪事一大堆呢。 现在layout是有了，请问ejs有没有类似jade的mixin方法，我只用过include path但是没有办法传值？有什么解决办法么？

我运行npm install express-partials时出错，请教一下怎么解决？

而且用第二种方法时，它报错说install couldn’t read dependencies，这是问什么啊？

  res.render('index', {
    layout: '', // 如果不指定 默认就会使用layout.ejs 作为默认布局文件
    title: '首页',
    posts: posts,
  });

感谢楼主。

为了在 Express 3.0 中安装并使用 express-partials 模板，你可以按照以下步骤进行操作：

1. 安装 express-partials

你可以通过以下两种方式之一来安装 express-partials：

方法一：

打开命令行工具（如 CMD），然后运行：

npm install express-partials

方法二：

在项目的 package.json 文件中的 dependencies 部分添加 "express-partials": "*", 然后在项目根目录下运行：

npm install

2. 在 app.js 中引用 express-partials

在你的 app.js 文件中，添加对 express-partials 的引用，并确保它在设置视图引擎之后被调用：

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

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

// 引入 express-partials
var partials = require('express-partials');
app.use(partials());

// 其他中间件和路由配置

3. 使用布局模板

在你需要引用布局模板的地方，可以在渲染视图时指定 layout 参数：

app.get('/reg', function (req, res) {
  res.render('reg', {
    title: '用户注册',
    layout: 'template' // 这里的 'template' 是布局模板的名称
  });
});

这里假设你在 views 目录中有 template.ejs 布局文件，以及 reg.ejs 视图文件。

示例结构

  • views/template.ejs

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

  • views/reg.ejs

    <h1>用户注册页面</h1>
<p>这里是注册表单</p>

通过上述步骤，你就可以在 Express 3.0 应用中成功地安装并使用 express-partials 来实现布局模板了。

回到顶部