express-handlebars 没有找到我的布局或部分

Question

我有以下 Express 4 视图引擎设置：

var handlebars = require('express-handlebars').create({
  layoutsDir: path.join(__dirname, "views/layouts"),
  partialsDir: path.join(__dirname, "views/partials"),
  defaultLayout: 'layout',
  extname: 'hbs'
});

app.engine('handlebars', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));

我有以下文件结构：

/views
    error.hbs
    index.hbs
    /partials
        menu.hbs
    /layouts
        layout.hbs

最后在我的路线中： res.render('index');

访问我的网站时，它只加载我的index.hbs模板。 它不使用我的layout.hbs 。 我没有得到任何错误或任何东西。 即使在把手配置中将layout设置为我的默认布局，它也只是不使用布局。

接下来我尝试将我的代码更改为：

res.render('index', {layout: 'layout'});

现在我得到错误：

Error: ENOENT: no such file or directory, open '/.../views/layout.hbs'

所以它就像没有找到我的layoutsDir ......我在这里错过了什么？

接下来我把它改成了这样：

res.render('index', {layout: 'layouts/layout'});

好的，这样就行了。 我的布局现在已加载。 但后来我在我的布局中添加了一部分：

{{> menu }}

现在我得到： /.../views/index.hbs: The partial menu could not be found

那么这里发生了什么？ 为什么 Handlebars 无法识别我的layoutsDir或partialsDir ？ 它只是根本没有看到它们或其他东西。 为什么defaultLayout没有被使用？ 我必须指定布局。

Answer 1

根据 express-handlebars 的API 文档，如果您要更改默认的.handlebars文件扩展名，那么当您设置视图引擎时，所有出现的把手都应替换为您希望使用的新扩展名。

因此，您的快速设置需要更新为：

app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));

注意：文档在扩展名之前使用了一个句点，例如.hbs但它似乎没有这个就可以工作。

完整代码：

var path = require('path');
var express = require('express');
var app = express();
var http = require('http').Server(app);

var handlebars = require('express-handlebars').create({
  layoutsDir: path.join(__dirname, "views/layouts"),
  partialsDir: path.join(__dirname, "views/partials"),
  defaultLayout: 'layout',
  extname: 'hbs'
});

app.engine('hbs', handlebars.engine);
app.set('view engine', 'hbs');
app.set('views', path.join(__dirname, "views"));

app.get('/', function(req, res){
  res.render('index');
});


http.listen(3000, function(){
  console.log("Server running");
});

Answer 2

在您使用部分的新把手中，您不必在 server.js 中包含其目录

• 分音包含在“express-handlebars”中
• 视图引擎设置中的第一行负责以上内容

注意这些。

    const hbs = require('hbs');
    const expressHbs = require('express-handlebars');

//view engine setup
     app.engine('.hbs', expressHbs({ defaultLayout: 'layout', extname: '.hbs' }));
     app.set('view engine', 'hbs');
     app.set('views', path.join(__dirname, '../views'));
     app.use(express.static(path.join(__dirname, '../public')));

尝试在您的依赖项上使用通配符以确保您匹配最新版本

"dependencies": {  
    "express": "*",
    "express-handlebars": "^3.0.0",
    "hbs": "*"
  },