Question

我运行ExpressJS并安装了Handlebars作为模板引擎。我使用AdminLTE并将其拆分为hbs中的6个/views/layouts个文件。我将AdminLTE模板放在public文件夹中。

views/layouts
   -- base.hbs // as defaultLayout
   -- footer.hbs
   -- head.hbs
   -- js.hbs
   -- nav.hbs
   -- sidebar.hbs

每当我尝试访问localhost：3000

时，我都会在节点控制台上收到以下错误

Error: The partial head could not be found

以下是我的app.js设置：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var flash = require('express-flash');
var session = require('express-session');
var mongoose = require('mongoose');
var validator = require('express-validator');
var override = require('method-override');
var hbs = require('express-handlebars');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.engine('hbs', hbs({extname: 'hbs', defaultLayout: 'base', layoutDir: __dirname + '/views/layouts'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(session({secret: "1234"}));
app.use(flash());
app.use(validator());
app.use(override(function(req, res) {
  if (req.body && typeof req.body == 'object' && '_method' in req.body) {
    var method = req.body._method;
    delete req.body._method;
    return method;
  }
}));
[...]

这是我的base.hbs文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    {{> head}}
  </head>
  <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
      {{> nav}}
      {{> sidebar}}

      <div class="content-wrapper">
        {{{ body }}}
      </div>

      {{> footer}}
      <div class="control-sidebar-bg"></div>

      {{> js}}

    </div>
  </body>
</html>

Answer 1

您需要在配置express-handlebars时注册partials目录的路径，并将您的局部文件移动到该文件夹。

app.engine('hbs', hbs({
    extname: 'hbs', 
    defaultLayout: 'base', 
    layoutsDir: path.join(__dirname, 'views/layouts'),
    partialsDir  : [
        //  path to your partials
        path.join(__dirname, 'views/partials'),
    ]
}));

Answer 2

在app.js / index.js中使用

hbs.registerPartials(__dirname + '/views/layouts');

在模板hbs文件中使用正确的语法例如：{{> header}}

Answer 3

我通过在HTML DOM中提供id来修复此问题。这部分我错过了html。

<div class="modal-footer" id="btn-group"></div>

这是我的js部分

var templateBtnGroup = Handlebars.getTemplate("btn-group", "btn-group.html");
Handlebars.registerPartial("btn-group", templateBtnGroup());
var templateBtnGroupScript = Handlebars.compile($('#handlebars-btn-group').html());
$("#btn-group").append(templateBtnGroupScript());

Answer 4

[const hbs = require('hbs');

//this required before view engine setup
hbs.registerPartials(__dirname + '/views/partials');

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

] 1

Answer 5

请检查文件夹名称的大小写。可能会出现“公共”文件夹，而您指的是小写字母“公共”，则不会呈现css / images /客户端js

Answer 6

您应该为partials创建一个子文件夹，然后使用partialsDir指向该文件夹：

app.engine('hbs', hbs({
   extname: 'hbs', 
   defaultLayout: 'base', 
   layoutDir: __dirname + '/views/layouts',
   partialsDir: path.join(__dirname, 'views/partials'),
}));

如何解决无法找到部分头部的把手

6 个答案: