Menu
I run ExpressJS and installed Handlebars as a template engine. I'm using AdminLTE and split it up to 6 hbs files in /views/layouts. I put AdminLTE template in public folder.
views/layouts
-- base.hbs // as defaultLayout
-- footer.hbs
-- head.hbs
-- js.hbs
-- nav.hbs
-- sidebar.hbs
I get the following error on node console everytime when i try to access localhost:3000
Error: The partial head could not be found
Here is my app.js setup:
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;
}
}));
[...]
And this is my base.hbs file:
<!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>
779
Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that may be called directly by other templates.
Partials are a common templating concept not unique to Handlebars. The idea behind it is to create templates that are likely to be re-used, separate them into their own file (a Partial), and then use them in different templates. You may think at Partials as a simple a tool to modularize your templates.
Partials are basically just views that are designed to be used from within other views. They are particularly useful for reusing the same markup between different views, layouts, and even other partials.
You need to register the path to partials directory while configuring express-handlebars and move your partials to that folder.
app.engine('hbs', hbs({
extname: 'hbs',
defaultLayout: 'base',
layoutsDir: path.join(__dirname, 'views/layouts'),
partialsDir : [
// path to your partials
path.join(__dirname, 'views/partials'),
]
}));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
