如何更改Express中的Handlebars扩展名？

Question

我是node.js的新手，想使用handlebars模板引擎，但希望使用缩写扩展名hbs。

这是原始代码（来源）:

var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

它在使用扩展名为handlebars的模板时工作良好，但我将其更改为：

var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' });
app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');

将所有模板扩展名更改为hbs。 然而，现在我遇到了这个错误：

Error: ENOENT: no such file or directory, open '/path/to/node/myproject/views/layouts/main.handlebars'
   at Error (native)

我也尝试了

var handlebars = require('express3-handlebars')
.create({ defaultLayout: 'main' , extname : '.hbs'});
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

根据这里的回答，但我得到的结果是：

Error: Failed to lookup view "500" in views directory "/path/to/myproject/views"
   at EventEmitter.render (/path/to/myproject/node_modules/express/lib/application.js:579:17)
   at ServerResponse.render (/path/to/myproject/node_modules/express/lib/response.js:961:7)
   at /path/to/myproject/app.js:96:6
   at Layer.handle_error (/path/to/myproject/node_modules/express/lib/router/layer.js:71:5)
   at trim_prefix (/path/to/myproject/node_modules/express/lib/router/index.js:310:13)
   at /path/to/myproject/node_modules/express/lib/router/index.js:280:7
   at Function.process_params (/path/to/myproject/node_modules/express/lib/router/index.js:330:12)
   at next (/path/to/myproject/node_modules/express/lib/router/index.js:271:10)
   at Layer.handle_error (/path/to/myproject/node_modules/express/lib/router/layer.js:67:12)
   at trim_prefix (/path/to/myproject/node_modules/express/lib/router/index.js:310:13)

我也尝试了其他方法，但都没有起作用，所以想知道该怎么解决这个问题？

- supermario

Answer 1

这个可以解决问题：

exphbs = require('express3-handlebars'),
app.engine('hbs', exphbs({defaultLayout: 'main', extname: '.hbs'}));
app.set('view engine', 'hbs');

- supermario

---

此外，'hbs' 引擎名称也很重要。 - Marvin

此软件包已被弃用，请使用 express-handlebars。https://www.npmjs.com/package/express3-handlebars - buycanna.io

此软件包现已被弃用。 - nipun-kavishka

Answer 2

您可以使用express-hbs代替express3-handlebars。

简单地说，您可以这样做：

var hbs = require('express-hbs');
/*
...
*/
app.engine('hbs', hbs.express4({
  partialsDir   : __dirname +'/views/partials',
  defaultLayout : __dirname +'/views/layouts/default',
  extname       : '.hbs',
  layoutsDir    : __dirname +'/views/layouts',
}));

app.set('view engine', 'hbs');
app.set('views', __dirname + '/views');

- Gökay Gürcan

---

那么使用 express3-handlebars 不就可以实现吗？ - supermario

很可能是这样。但是 express3-handlebars 已经更名为 express-handlebars，而您可能正在使用当前版本的 Express 4。因此，它不太可能与旧模块一起工作。如果您将其更改为 express-handlebars，那么就没问题了。我更喜欢使用 express-hbs，因为它具有一致性和开箱即用的功能，例如 i18n 或 _beautify_。 - Gökay Gürcan

Answer 3

你的代码没有问题，你只需要在 views 目录下创建一个名为 layouts 的文件夹，然后将你的 defaultLayout = main.hbs 移动到这个文件夹中。

如果你遇到了这个错误： Error : The partial header could no be found . 那么请再次在 views 目录下创建另一个名为 partials 的文件夹，并将所有的局部文件放在其中__例如 header 文件等等...

- Guzter

Answer 4

'express3-handlebars' 包现在已经弃用(2020年)。因此，您可以尝试使用以下内容

const handlebarOptions = {
    viewEngine: {
      extName: '.hbs',
      partialsDir: 'views',//your path, views is a folder inside the source folder
      layoutsDir: 'views',
      defaultLayout: ''//set this one empty and provide your template below,
    },
    viewPath: 'views',
    extName: '.hbs',
  };


mailTransport.use('compile', hbs(handlebarOptions));

const mailOptions = {
        from: '"Spammy Corp." <[e-mail]>',
        to: '[e-mail]',
        template: 'index',//this is the template of your hbs file
  };

- nipun-kavishka