我使用layout.hbs创建了一个样式格式,注意到所有页面在样式上并不具有相同的一致性。我注意到我没有在app.js中声明app.engine。接下来,我实现了app.engine代码以设置在layout.hbs中实现的默认布局
app.engine('hbs', hbs ({extname: 'hbs',defaultLayout: 'layout'}));
发生了一个错误,指出无法定位layout.hbs。我再次实现了代码,因为我注意到我没有将文件夹目录定向到layout. hbs。因此我实现了代码以
app.engine('hbs', hbs ({extname: 'hbs',defaultLayout: 'layout', layoutsDir:__dirname + '/app_server/views'}));
而且错误已经消失了,默认的布局结构已经设置为layout.hbs只显示在本地服务器索引上,在所有的控制器上都不一样。我不太确定我还遗漏了什么
控制器和路由代码
var express = require('express');
var exphbs = require('express-handlebars');
var router = express.Router();
var ctrlCaribbeanIslands = require('../controllers/CaribbeanIslands')
/* GET home page. */
router.get('/', ctrlCaribbeanIslands.login);
router.get('/blog/add',ctrlCaribbeanIslands.addPost);
router.get('/chat/add',ctrlCaribbeanIslands.addChat);
router.get('/review/add',ctrlCaribbeanIslands.addReview);
router.get('/traceYourTravel', ctrlCaribbeanIslands.tracetravel);
**module.exports = router;**
//controller
module.exports.login = function (req, res) {
res.render('index', { title: 'login'});
};
module.exports.addPost = function(req, res){
res.render('index', { title: 'Add Post' });
};
module.exports.addChat = function(req, res){
res.render('index', { title: 'Add Chat' });
};
module.exports.addReview = function(req, res){
res.render('index', { title: 'Add Review' });
};
module.exports.tracetravel = function(req, res){
res.render('index', { title: 'Trace travel' });
};
应用程序.js
var createError = require('http-errors');
var express = require('express');
var handlebars = require('hbs');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var hbs = require ('express-handlebars');
var indexRouter = require('./app_server/routes/index');
var usersRouter = require('./app_server/routes/users');
var app = express();
app.engine('hbs', hbs ({extname: 'hbs',defaultLayout: 'layout', layoutsDir:__dirname + '/app_server/views'}));
app.set('views', path.join(__dirname, 'app_server','views'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, 'public')));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function (req, res, next) {
next(createError(404));
});
// error handler
app.use(function (err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
4条答案
按热度按时间sqxo8psd1#
我认为express不再包含车把了,我建议用npm下载HBS,然后要求
var hbs = require('hbs')
然后将视图引擎设置为hbs,如下所示-〉
app.use("view engine", "hbs")
尝试,而不是要求它从快速车把,它一直为我工作到目前为止。
zphenhs42#
将
hbs
更改为hbs.engine
,如下所示:yqyhoc1h3#
//查看引擎设置
(01)* * 应用引擎('hbs ',hbs({扩展名:' hbs ',默认布局:'布局',布局目录:__目录名+'/视图/布局/'}));**
(02)应用程序.集合("视图",路径.联接(__目录名,"视图"));
(03)应用程序集("视图引擎"、"hbs");
将(01)行更改为如下所示(hbs更改为hbs.engine):
应用引擎('hbs ',hbs引擎({扩展名:' hbs ',默认布局:'布局',布局目录:__目录名+'/视图/布局/'}));
dhxwm5r44#
@Zrushb对不起,我的错,它是与app.set,而不是使用.代码应该看起来像这样: