web-dev-qa-db-fra.com

Comment changer la disposition par défaut dans Express en utilisant le guidon?

J'utilise Express 4.9.0 et Express-Generator.

Récapitulatif créé avec la commande suivante:

express --hbs projectname

Le guidon intégré utilise views/layout.hbs Par défaut comme page maître. Mais je ne vois aucun paramètre dans mon app.js pour changer ce comportement.

morceau de code de mon app.js:

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

  1. Comment puis-je changer ma mise en page par défaut globalement?
  2. Et si je veux avoir 2 ou 3 mises en page globales différentes?
node.jsexpresshandlebars.js
50
Alexander Kim

Vous pouvez spécifier la mise en page que vous souhaitez utiliser dans le cadre de l'appel de rendu. Si vous créez une nouvelle mise en page appelée other.hbs, vous pouvez alors faire quelque chose comme:

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

Pour remplacer cela pour toute l'application, vous pouvez utiliser:

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

À partir du fichier readme du guidon:

Il existe deux manières de définir une disposition par défaut: configurer la propriété defaultLayout du moteur de vue ou définir les sections locales express app.locals.layout.

La présentation dans laquelle une vue doit être rendue peut être remplacée par demande en attribuant une valeur différente à la demande de présentation locale. Ce qui suit rendra la vue "maison" sans mise en page:

app.get('/', function (req, res, next) {
   res.render('home', {layout: false});
});

Si vous souhaitez définir la présentation par défaut uniquement pour une sous-route spécifique, vous pouvez utiliser les éléments suivants dans la section supérieure de votre route:

router.all('/*', function (req, res, next) {
    req.app.locals.layout = 'admin'; // set your layout here
    next(); // pass control to the next handler
    });

Vous pouvez également définir la présentation par défaut à l'initialisation:

// 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

Cela devrait fonctionner maintenant ..

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

vues/layouts/main.handlebars:

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

    {{{body}}}

</body>
</html>
2
venkat7668

Si vous utilisez le module 'express-handlebars', les éléments suivants devraient fonctionner:

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

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

// ...

J'y suis arrivé en fouillant dans la source du module, il s'avère que cette ligne ...

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

... est ce qui donne le comportement par défaut de toujours regarder dans '{{tout ce que vous avez spécifié}}/vues/mises en page /'

En résumé, si vous avez peut-être une structure de dir différente ou une autre raison de la remplacer, vous pouvez utiliser la ligne de mon exemple. Assurez-vous simplement que vous faites ceci avant vous instanciez exphbs.

Si vous utilisez un autre module (je ne suis pas sûr de ce qu'il existe), il est probable qu'ils aient un paramètre similaire qui peut être remplacé par un peu de jiggery-pokery (il suffit d'exécuter une 'recherche' sur le contenu du fichier pour 'vues/layouts /'.

notez que je quitte 'app.set ("vues", __dirname);' de la même manière que je garde les modèles n'importe où dans le répertoire de mon serveur et les rende comme suit:

res.render("moduleName/templateName");

Après la mise à jour vers la v2.0.1. Ce qui précède ne fonctionnera pas. Vous pouvez plutôt transmettre le répertoire par défaut en tant qu’argument comme suit:

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