node.js 如何使用车把更改 express 中的默认布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26871522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change default layout in express using handlebars?
提问by Alexander Kim
I am using Express 4.9.0 and express-generator.
我正在使用 Express 4.9.0 和 express-generator。
Created boilerplate with a following command:
使用以下命令创建样板：
express --hbs projectname
Builtin handlebars is using views/layout.hbsby default as a master page. But i cannot see any settings in my app.js to change that behaviour.
views/layout.hbs默认情况下，内置把手用作母版页。但是我在 app.js 中看不到任何设置来改变这种行为。
piece of code from my app.js:
我的 app.js 中的一段代码：
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
- How can i change my default layout globally?
- What if i want to have 2 or 3 different global layouts?
- 如何全局更改默认布局？
- 如果我想要 2 或 3 个不同的全局布局怎么办？
回答by Timothy Strimple
You can specify what layout you want to use as part of the render call. If you create a new layout called other.hbs, you can then do something like:
您可以指定要用作渲染调用的一部分的布局。如果您创建一个名为 的新布局other.hbs，则可以执行以下操作：
res.render('view', { title: 'my other page', layout: 'other' });
To override this for the entire application, you can use:
要为整个应用程序覆盖它，您可以使用：
app.set('view options', { layout: 'other' });
回答by Flaudre
From the handlebars readme:
来自车把自述文件：
There are two ways to set a default layout: configuring the view engine's defaultLayout property, or setting Express locals app.locals.layout.
The layout into which a view should be rendered can be overridden per-request by assigning a different value to the layout request local. The following will render the "home" view with no layout:
app.get('/', function (req, res, next) { res.render('home', {layout: false}); });
有两种方法可以设置默认布局：配置视图引擎的 defaultLayout 属性，或者设置 Express locals app.locals.layout。
通过为本地布局请求分配不同的值，可以根据请求覆盖视图应呈现的布局。以下将呈现没有布局的“主页”视图：
app.get('/', function (req, res, next) { res.render('home', {layout: false}); });
In case you want to set the default layout just for a specific subroute, you might wanna use the following in the top section of your route:
如果您只想为特定的子路由设置默认布局，您可能需要在路由的顶部使用以下内容：
router.all('/*', function (req, res, next) {
req.app.locals.layout = 'admin'; // set your layout here
next(); // pass control to the next handler
});
You can also set the default layout on initialization:
您还可以在初始化时设置默认布局：
// 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');
回答by venkat7668
This should work now..
这应该现在工作..
npm install express-handlebars
.
├── app.js
└── views
├── home.handlebars
└── layouts
└── main.handlebars
2 directories, 3 files
app.js
应用程序.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);
views/layouts/main.handlebars:
视图/布局/main.handlebars：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
</head>
<body>
{{{body}}}
</body>
</html>
回答by Spen
If you're using the 'express-handlebars' module, then the following should work:
如果您使用的是 'express-handlebars' 模块，那么以下应该可以工作：
// ...
app.set("views", __dirname );
exphbs.ExpressHandlebars.prototype.layoutsDir = 'path/to/directory/';
app.engine('handlebars', exphbs({defaultView: 'name-of-template'}));
// ...
I came to this by digging around in the module's source, it turns out that this line...
我是通过在模块的源代码中挖掘出来的，结果发现这条线......
// express-handlebars/lib/express-handlebars.js (line 55 in v1.2.2)
ExpressHandlebars.prototype.layoutsDir = 'views/layouts/';
...is what gives the default behaviour of always looking in '{{whatever you specified}}/views/layouts/'
...是什么给出了总是在 '{{whatever you specified}}/views/layouts/' 中查找的默认行为
So essentially - if, perhaps, you have a different dir structure in mind or have some other reason to override it, you can by using the line in my example. Just be sure that you do this beforeyou instantiate exphbs.
所以基本上 - 如果，也许，你有一个不同的目录结构或有其他一些理由来覆盖它，你可以使用我的例子中的行。请确保在实例化exphbs之前执行此操作。
If you're using some other module (I'm not sure which are out there) it's likely that they have some similar setting that can be overridden with a bit of jiggery-pokery (just run a 'find' on the file contents for 'views/layouts/'.
如果您正在使用其他一些模块（我不确定那里有哪些），它们很可能有一些类似的设置，可以用一些 jiggery-pokery 覆盖（只需在文件内容上运行“查找”即可） '视图/布局/'。
note that I am leaving 'app.set("views", __dirname );' as is so that I keep templates anywhere in my server directory and render them like so:
请注意，我要离开 'app.set("views", __dirname );' 这样我就可以将模板保存在我的服务器目录中的任何位置并像这样渲染它们：
res.render("moduleName/templateName");
After updating to v2.0.1 The above won't work, instead you can pass the default directory in as an argument as below:
更新到 v2.0.1 后，以上将不起作用，您可以将默认目录作为参数传递，如下所示：
var hbs = exphbs.create({
layoutsDir: 'app/server/',
...
回答by Anand Raja
I hope you are using express-handlebars. This instructions are for express-handlebars. For hbs, procedures are little different.
我希望你正在使用express-handlebars. 本说明适用于快速车把。对于hbs，过程略有不同。
Step-1: Require handlebars
第 1 步：需要车把
const exphbs = require('express-handlebars');
step-2: Register handlebars template engine. while registering, you can configure
步骤 2：注册车把模板引擎。注册时，您可以配置
for changing layout directory
用于更改布局目录
const layoutPath = path.join(__dirname, './templates/layouts'); //you can build your desired path
app.engine('handlebars', exphbs({ layoutsDir: layoutPath }));
other available options along with layoutsDir are
与 layoutsDir 一起的其他可用选项是
interface ExphbsOptions {
handlebars?: any;
extname?: string;
layoutsDir?: string;
partialsDir?: any;
defaultLayout?: string;
helpers?: any;
compilerOptions?: any;
}
step-3: If you want to change views directory
第 3 步：如果要更改视图目录
const viewPath = path.join(__dirname, './templates/views');
app.set('views', viewPath);
step-4: For some template, If you don't wish to give layout, you have to specify as layout: false. Otherwise app will crash. You can configure as follow, if you need.
step-4：对于某些模板，如果您不想给出布局，则必须指定为layout: false. 否则应用程序会崩溃。如果需要，您可以进行如下配置。
app.get('/', (req, res, next) => {
res.render('shop', { title: 'My Shop', layout: false })
});
