web-dev-qa-db-ja.com

ハンドルバーを使用してエクスプレスでデフォルトのレイアウトを変更する方法は？

Express 4.9.0とエクスプレスジェネレーターを使用しています。

次のコマンドでボイラープレートを作成しました：

_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.jsexpresshandlebars.js
50
Alexander Kim

レンダリング呼び出しの一部として使用するレイアウトを指定できます。 other.hbsという新しいレイアウトを作成すると、次のようなことができます。

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

アプリケーション全体でこれをオーバーライドするには、次を使用できます。

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

ハンドルバーのreadmeから：

デフォルトレイアウトを設定するには、ビューエンジンのdefaultLayoutプロパティを構成する方法と、Express locals app.locals.layoutを設定する方法の2つがあります。

ビューをレンダリングするレイアウトは、レイアウト要求ローカルに異なる値を割り当てることにより、要求ごとにオーバーライドできます。以下は、レイアウトなしで「ホーム」ビューをレンダリングします。

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');
8
Flaudre

これで動作するはずです。

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

views/layouts/main.handlebars：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>

    {{{body}}}

</body>
</html>
2
venkat7668

「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/';

...常に「{{whatever specified}}/views/layouts /」を検索するデフォルトの動作を提供するものです

本質的に-おそらく、異なるディレクトリ構造を念頭に置いているか、他の理由でそれをオーバーライドする必要がある場合は、私の例の行を使用してできます。必ずこれを行うようにしてくださいbeforeインスタンス化exphbs。

他のモジュールを使用している場合（どちらが出ているのかわかりません）、類似の設定があり、それらは少しのジガリーポケリーでオーバーライドできます（ファイルの内容に対して 'find'を実行するだけです） 「views/layouts /」。

「app.set（ "views"、__dirname）;」のままにしていることに注意してください。サーバーディレクトリ内の任意の場所にテンプレートを保持し、次のようにレンダリングできるように、そのままにします。

res.render("moduleName/templateName");

V2.0.1への更新後上記は機能しませんが、代わりにデフォルトのディレクトリを以下の引数として渡すことができます。

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