Question

我正在使用Express 4.9.0和express-generator。

使用以下命令创建样板：

express --hbs projectname

Buildtin车把默认使用views/layout.hbs作为母版页。但我无法在app.js中看到任何设置来改变这种行为。

我的app.js中的一段代码：

// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs');

如何全局更改默认布局？
如果我想拥有2个或3个不同的全局布局怎么办？

Answer 1

您可以指定要在渲染调用中使用的布局。如果您创建一个名为other.hbs的新布局，则可以执行以下操作：

res.render('view', { title: 'my other page', layout: 'other' });

要覆盖整个应用程序，可以使用：

app.set('view options', { layout: 'other' });

Answer 2

来自车把自述：

设置默认布局有两种方法：配置视图引擎的defaultLayout属性，或设置Express locals app.locals.layout。

通过为布局请求本地分配不同的值，可以按请求覆盖应该呈现视图的布局。以下将呈现没有布局的“主页”视图：
list_place

如果您只想为特定的子路径设置默认布局，您可能希望在路线的顶部使用以下内容：

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
    });

Answer 3

如果您正在使用'express-handlebars'模块，则以下内容应该有效：

// ...
app.set("views", __dirname );

exphbs.ExpressHandlebars.prototype.layoutsDir = 'path/to/directory/';
app.engine('handlebars', exphbs({defaultView: 'name-of-template'}));

// ...

我是通过在模块的源头挖掘来实现的，事实证明这一行......

// express-handlebars/lib/express-handlebars.js (line 55 in v1.2.2)
ExpressHandlebars.prototype.layoutsDir  = 'views/layouts/';

...提供了始终查看'{{无论你指定的}} / views / layouts /'

的默认行为

所以基本上 - 如果你有一个不同的目录结构或者有其他理由来覆盖它，你可以使用我的例子中的行。请确保您之前实例化 exphbs 。

如果你正在使用其他模块（我不确定哪些模块在那里），它们可能会有一些类似的设置，可以用一些jiggery-pokery覆盖（只需在其上运行'find'） “views / layouts /”的文件内容。

请注意我要离开'app.set（“views”，__ dirname）;'因此，我将模板保存在我的服务器目录中的任何位置，并像这样呈现它们：

res.render("moduleName/templateName");

更新到v2.0.1之后上面的代码不起作用，你可以将默认目录作为参数传递，如下所示：

var hbs = exphbs.create({ layoutsDir: 'app/server/', ...

Answer 4

我希望您正在使用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 })
});

For more info about express-handlebars

Answer 5

现在应该可以了..

npm install express-handlebars

.
├── app.js
└── views
    ├── home.handlebars
    └── layouts
        └── main.handlebars

2 directories, 3 files

app.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>

如何使用车把更改快递中的默认布局？

5 个答案: