node.js - ¿Cómo cambiar el diseño predeterminado en Express usando manubrios?
handlebars.js (4)
Del readme del manillar:
Hay dos formas de establecer un diseño predeterminado: configurar la propiedad defaultLayout del motor de visualización o configurar Express locals app.locals.layout.
El diseño en el que se debe representar una vista puede anularse por solicitud asignando un valor diferente a la solicitud de disposición local. Lo siguiente representará la vista "principal" sin diseño:
app.get(''/'', function (req, res, next) { res.render(''home'', {layout: false}); });
En caso de que quiera establecer el diseño predeterminado solo para una subroute específica, puede usar lo siguiente en la sección superior de su ruta:
router.all(''/*'', function (req, res, next) {
req.app.locals.layout = ''admin''; // set your layout here
next(); // pass control to the next handler
});
También puede establecer el diseño predeterminado en la inicialización:
// 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'');
Estoy usando Express 4.9.0 y express-generator.
Platillo creado con un siguiente comando:
express --hbs projectname
El manubrio views/layout.hbs está utilizando views/layout.hbs de forma predeterminada como página maestra. Pero no puedo ver ninguna configuración en mi app.js para cambiar ese comportamiento.
pieza de código de mi app.js:
// view engine setup app.set(''views'', path.join(__dirname, ''views'')); app.set(''view engine'', ''hbs'');
- ¿Cómo puedo cambiar mi diseño predeterminado globalmente?
- ¿Qué sucede si quiero tener 2 o 3 diseños globales diferentes?
Esto debería funcionar ahora ...
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>
Puede especificar qué diseño desea usar como parte de la llamada de renderizado. Si crea un nuevo diseño llamado other.hbs , puede hacer algo como:
res.render(''view'', { title: ''my other page'', layout: ''other'' });
Para anular esto para toda la aplicación, puede usar:
app.set(''view options'', { layout: ''other'' });
Si está utilizando el módulo ''express-handlebars'', entonces lo siguiente debería funcionar:
// ...
app.set("views", __dirname );
exphbs.ExpressHandlebars.prototype.layoutsDir = ''path/to/directory/'';
app.engine(''handlebars'', exphbs({defaultView: ''name-of-template''}));
// ...
Llegué a esto buscando en la fuente del módulo, resulta que esta línea ...
// express-handlebars/lib/express-handlebars.js (line 55 in v1.2.2)
ExpressHandlebars.prototype.layoutsDir = ''views/layouts/'';
... es lo que le da el comportamiento predeterminado de buscar siempre en ''{{lo que haya especificado}} / views / layouts /''
Entonces, esencialmente, si, tal vez, tiene una estructura de directorio diferente en mente o tiene alguna otra razón para anularla, puede usar la línea en mi ejemplo. Solo asegúrate de hacer esto antes de crear instancias de exphbs .
Si está utilizando algún otro módulo (no estoy seguro de cuáles son los que están disponibles), es probable que tengan una configuración similar que pueda anularse con un poco de jiggery-pokery (simplemente ejecute ''find'' en el contenido del archivo para ''vistas / diseños /''.
tenga en cuenta que estoy dejando ''app.set ("views", __dirname);'' como es para que guarde las plantillas en cualquier lugar en mi directorio de servidor y las renderice así:
res.render("moduleName/templateName");
Después de actualizar a v2.0.1, lo anterior no funcionará, en su lugar puede pasar el directorio predeterminado como un argumento como el siguiente:
var hbs = exphbs.create({
layoutsDir: ''app/server/'',
...