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

问题描述 投票：0回答：5

我正在使用 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');
  1. 如何全局更改默认布局？
  2. 如果我想要 2 或 3 个不同的全局布局怎么办？
node.js express handlebars.js
5个回答
131
投票

您可以指定要在渲染调用中使用的布局。如果您创建一个名为 

other.hbs
的新布局，则可以执行以下操作： 

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

要覆盖整个应用程序的此设置，您可以使用：

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

来自车把自述文件：

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

可以通过为本地布局请求分配不同的值来覆盖每个请求应呈现视图的布局。以下将渲染没有布局的“主页”视图：

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');
6
投票

现在应该可以了..

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
投票

我希望您正在使用

express-handlebars
。本说明适用于快速车把。对于 
hbs
，程序略有不同。

第 1 步：需要车把

const exphbs = require('express-handlebars');

step-2: 注册车把模板引擎。注册的时候可以配置

用于更改布局目录

const layoutPath = path.join(__dirname, './templates/layouts'); //you can build your desired path
app.engine('handlebars', exphbs({ layoutsDir: layoutPath }));

其他可用选项以及布局目录是

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

step-4: 对于某些模板，如果您不想给出布局，则必须指定为 

layout: false
。否则应用程序将崩溃。如果需要，您可以按如下方式进行配置。

app.get('/', (req, res, next) => {
    res.render('shop', { title: 'My Shop', layout: false })
});

有关快速车把的更多信息

2
投票

如果您使用“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覆盖（只需在文件内容上运行“查找”对于“视图/布局/”。

请注意，我要离开 'app.set("views", __dirname );'这样我就可以将模板保留在服务器目录中的任何位置并像这样渲染它们：

res.render("moduleName/templateName");
更新到 v2.0.1 后，上述内容将不起作用，您可以将默认目录作为参数传递，如下所示：

var hbs = exphbs.create({ layoutsDir: 'app/server/', ...
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.