How do I reuse my layout with handlebars in express?
Question
Okay I don't want to include my actual layout in every view.
So my views would look something like
layout.hbs
<html lang="en">
<head></head>
<body>
<div id="content">
{{ content }}
</div>
</body>
</html>
index.hbs
<div>my index content</div>
help.hbs
<div>my help content</div>
When I use my express routes like the following examples I just had to include my whole layout stuff in each view - which is obviously a bad idea.
express routes
app.use('/', function (req, res) {
res.render('index', {content: 'foo'});
});
app.use('/about', function (req, res) {
res.render('about', {content: 'foo'});
});
So the question is: How do I reuse my layout in handlebar views?
My idea was to compile my content additionaly like
app.use('/', function (req:express.Request, res:express.Response, next:Function) {
fs.readFile(path.join(viewPath, 'index.hbs'), function(err, text){
var template = hbs.handlebars.compile(text);
var content = template({foo: 1234});
res.render('layout', {content: content});
});
});
But I'm not sure if this is the right way.
1 answers
solution1
3 ACCPTED 2015-11-18 03:36:19
You can use express-handlebars and give it a default layout.
var hbs = exphbs.create({
extname:'hbs',
layoutsDir: '/path/to/layouts',
defaultLayout: 'main'
});
// Initialize engine
app.engine('hbs', hbs.engine);
// Set engine
app.set('view engine', 'hbs');
Once the layout is set, you can just call res.render({content: content});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.