>

ExpressJS를 실행하고 핸들 바를 템플릿 엔진으로 설치했습니다. AdminLTE를 사용하고 있으며 최대 6 개의 hbs 로 분할했습니다.   /views/layouts 의 파일 . public 에 AdminLTE 템플릿을 넣었습니다.  폴더.

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>


  • 답변 # 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'),
        ]
    }));
    
    

  • 답변 # 2

    app.js/index.js에서 사용

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

    템플릿 hbs 파일에서 올바른 구문 사용 예 : {{> header}}

  • 답변 # 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());
    
    

  • 답변 # 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

관련 자료

  • 이전 ipfs - 자바 스크립트 - 잡히지 않은 typeerror : 정의되지 않은 'set'속성을 읽을 수 없습니다
  • 다음 linux - 파일이 많은 파일을 한 줄씩 두 단어 이상으로 grep