如何在一个Node.js和Express项目中同时使用EJS和Jade？

Question

我想在一个nodejs和express项目中，使用ejs来处理局部页面，同时使用jade来处理单独的页面。请问如何实现？

- Henry Leu

---

我认为这个答案可能会对你有所帮助：https://dev59.com/t2Up5IYBdhLWcg3wxpmt#15064438 - Elad Amsalem

出于好奇，你为什么想要这样做呢？ - esp

对于部分页面，只需使用Handlebars替换变量即可快速完成，但对于复杂页面，则需要一个强大的模板引擎。这取决于具体情况。我已经找到了解决方案并将分享给大家。 - Henry Leu

嗨 @HenryLeu，您能分享一下您的智慧吗？我愿意做完全相同的事情。 - AmirHd

Answer 1

在 expressjs api 文档 和 consolidate.js 的 github 页面上，很容易找到相关的内容。

请参考下面的 express.js 文档片段：

---

app.engine(ext, callback)

将给定的模板引擎回调函数注册为 ext。默认情况下，将基于文件扩展名使用 require() 引入引擎。例如，如果您尝试呈现一个 "foo.jade" 文件，则 Express 将在内部调用以下内容，并缓存 require() 以增加性能。

app.engine('jade', require('jade').__express);

对于那些没有提供.__express方法的引擎，或者如果您希望将不同的扩展名“映射”到模板引擎，可以使用此方法。例如，将EJS模板引擎映射到“.html”文件：

app.engine('html', require('ejs').renderFile);

在这种情况下，EJS提供了一个与Express期望的相同签名的.renderFile()方法：（路径、选项、回调），但请注意，它在内部将此方法别名为ejs.__express，因此如果您使用“.ejs”扩展名，则无需执行任何操作。

一些模板引擎不遵循这个惯例，consolidate.js库被创建用于将所有Node流行的模板引擎映射到遵循这个惯例，从而使它们能够在Express中无缝工作。

var engines = require('consolidate');
app.engine('haml', engines.haml);
app.engine('html', engines.hogan);

- Henry Leu

---

但是我不需要在某个地方使用 express.set('view engine', 'ext'); 吗？ - theonlygusti

@theonlygusti，您能详细说明一下吗？我正在尝试让它工作，但不确定在使用consolidate时是否需要默认的“视图引擎”？我在文档中，如果您有指针参考，将不胜感激。谢谢。 - tim.rohrer

Answer 2

这适用于我：

1. 添加 pug 和 ejs 作为渲染器

index.js

const express = require('express');
const path = require('path');
const app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.set('view engine', 'ejs');

2. 使用文件名.文件扩展名调用render函数。

routes/users

const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
  res.render('users.ejs');
});
module.exports = router;

关于路由

const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
  res.render('about.pug');
});
module.exports = router;

- joseAndresGomezTovar

---

感谢您引入新的名称“pug”。我对这个还很陌生。您是否使用“consolidate.js”进行了任何测试？我认为这是我需要采取的路线，因为我正在尝试使用“ejs”向前端提供单个变量。 - tim.rohrer

我使用Mocha+Assert进行了测试。 - joseAndresGomezTovar

我看了一下 consolidate.js，但是据我所知，它不允许我在单个页面上混合渲染方法。既然我已经在使用 PUG，那么我选择了使用 AJAX 来获取我的数据。可能有点过度设计了... - tim.rohrer

这是一个更新的答案，也许为了正确性，答案应该更新为这个。 - kabuto178