Ale*_*Kim 52 node.js express handlebars.js
我正在使用Express 4.9.0和express-generator.
使用以下命令创建样板:
express --hbs projectname
内置车把手views/layout.hbs默认用作母版页.但我在app.js中看不到任何设置来改变这种行为.
我app.js的一段代码:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
Tim*_*ple 94
您可以指定要在渲染调用中使用的布局.如果创建一个名为的新布局other.hbs,则可以执行以下操作:
res.render('view', { title: 'my other page', layout: 'other' });
要覆盖整个应用程序,可以使用:
app.set('view options', { layout: 'other' });
从车把自述文件:
设置默认布局有两种方法:配置视图引擎的defaultLayout属性,或设置Express locals app.locals.layout.
通过为布局请求本地分配不同的值,可以按请求覆盖应该呈现视图的布局.以下将呈现没有布局的"主页"视图:
Run Code Online (Sandbox Code Playgroud)app.get('/', function (req, res, next) { res.render('home', {layout: false}); });
如果您只想为特定的子路由设置默认布局,您可能希望在路径的顶部使用以下内容:
router.all('/*', function (req, res, next) {
req.app.locals.layout = 'admin'; // set your layout here
next(); // pass control to the next handler
});
您还可以在初始化时设置默认布局:
// Create `ExpressHandlebars` instance with a default layout.
var hbs = exphbs.create({
defaultLayout: 'main',
helpers : helpers,
// Uses multiple partials dirs, templates in "shared/templates/" are shared
// with the client-side of the app (see below).
partialsDir: [
'shared/templates/',
'views/partials/'
]
});
// Register `hbs` as our view engine using its bound `engine()` function.
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
这应该现在工作..
npm install express-handlebars
.
??? app.js
??? views
??? home.handlebars
??? layouts
??? main.handlebars
2 directories, 3 files
应用程序.js
var express = require('express');
var exphbs = require('express-handlebars');
var app = express();
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
app.get('/', function (req, res) {
res.render('home');
});
app.listen(3000);
视图/布局/main.handlebars：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
</head>
<body>
{{{body}}}
</body>
</html>
我希望你正在使用express-handlebars. 本说明适用于快速车把。对于hbs，程序略有不同。
第 1 步：需要车把
const exphbs = require('express-handlebars');
步骤2：注册车把模板引擎。注册时，您可以配置
用于更改布局目录
const layoutPath = path.join(__dirname, './templates/layouts'); //you can build your desired path
app.engine('handlebars', exphbs({ layoutsDir: layoutPath }));
其他可用选项以及 layoutsDir 是
interface ExphbsOptions {
handlebars?: any;
extname?: string;
layoutsDir?: string;
partialsDir?: any;
defaultLayout?: string;
helpers?: any;
compilerOptions?: any;
}
步骤 3：如果您想更改视图目录
const viewPath = path.join(__dirname, './templates/views');
app.set('views', viewPath);
步骤4：对于某些模板，如果您不想给出布局，则必须指定为layout: false。否则应用程序将崩溃。如果需要，您可以按如下方式进行配置。
app.get('/', (req, res, next) => {
res.render('shop', { title: 'My Shop', layout: false })
});
| 归档时间： |
|
| 查看次数： |
42046 次 |
| 最近记录： |