motor de plantillas de jade, cómo usar layout.jade?

Tengo un sitio web en node.js; para crear una página, digamos mypage Me di cuenta de que necesito crear un archivo layout.jade y mypage.jade. Si coloco el código en mypage.jade, no se muestra, así que primero tengo que completar layout.jade con el diseño de la página.motor de plantillas de jade, cómo usar layout.jade?

Mi pregunta es, ¿cómo hago referencia dentro de layout.jade que me gustaría cargar el contenido de mypage.jade en un contenedor determinado, por ejemplo? ¿Puedo tener diferentes páginas con el mismo diseño? ¿Cómo puedo hacer esto?

Gracias

Fuente

2011-12-06 Masiar

Estás utilizando Express, ¿verdad? – alessioalex

Sí, lo siento por no mencionarlo. Estoy usando Express. – Masiar

http://expressjs.com/guide.html#view-rendering

Si no desea utilizar los diseños que puede deshabilitar globalmente:

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

Si usted no hace que los diseños están activadas por defecto y expreso busca el diseño estándar en su_carpeta_vista/layout.jade

Puede especificar un diseño separado para cada ruta, aunque:

res.render('page', { layout: 'mylayout.jade' }); 
// you can omit .jade if you set the view engine to jade

Así es como podría ser su archivo de diseño:

doctype html 
html(lang="en") 
    head 
    title Testing 123 
    body 
    div!= body

Tenga en cuenta que el cuerpo será tomado de "mypage.jade".

Editar:

Aquí está un ejemplo real en una aplicación:

El archivo de aplicación (que contiene rutas y configuraciones):
https://github.com/alexyoung/nodepad/blob/master/app.js

El archivo de diseño:
https://github.com/alexyoung/nodepad/blob/master/views/layout.jade

Fuente

2011-12-06 15:55:43 alessioalex

Ahora mismo lo que estoy haciendo es 'res.render (__ dirname + '/ pages/index.jade', {user: usr});', entonces lo que estás diciendo es dar al objeto que envuelve a mi usuario también agregar un campo llamado diseño: y dar mi diseño? Porque en este momento ya usa el diseño aunque no lo especifique (no carga 'index.jade' sino el diseño. Además, div = body ¿qué tomará? El cuerpo del archivo' .jade' dado? – Masiar

Como dije en mi mensaje, los diseños están habilitados por defecto. Lo mismo ocurre con res.render ('index.jade', {user: usr, layout: false}) si no desea el diseño de una página específica, de lo contrario proporcionar un valor para el diseño. Cuerpo = el contenido del archivo .jade sí – alessioalex

Muchas gracias, ¿dónde exactamente leíste esto? Busqué en el sitio web de jade, pero realmente no pude encontrar algo útil. – Masiar

Un poco tarde para el pa rty pero me costó encontrar la respuesta inicialmente ... En layout.jade

doctype html 
html(lang="en") 
    head 
    body 
     h1 Hello World 
     block myblock

Luego, en index.jade

extends layout 
    block myblock 
     p Jade is cool

rendirá

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<body> 
    <h1>Hello World</h1> 
    <p>Jade is cool</p> 
</body> 
</html>

Fuente

2012-05-23 08:20:33

¿Qué hace! = Body do? Necesita más detalles aquí. – qodeninja

@qodeninja - From the docs: "El código de Unescaped buffer comienza con! = Y arroja el resultado de evaluar la expresión de JavaScript en la plantilla. Esto no escapa, por lo que no es seguro para la entrada del usuario" –

En expreso 3.x

Uso Jade bloques, no layouts

http://www.devthought.com/code/use-jade-blocks-not-layouts/

Fuente

2013-10-22 10:46:44

Sé un enfoque que me ha dado los mejores resultados, incluso con angular (para sustituir ruta angular/ng-view)

en primer lugar será necesario instalar express-diseño:

npm install --save express-layout

Después de eso, se expresa y buscar archivos dentro de ti layout.jade r vistas/ carpeta. Por lo tanto, en el interior de la que se puede utilizar:

vistas/layout.jade

html 
    head 
    meta(charset='utf-8') 
    title= title 
    body 
    div!= body

vistas/home.jade

h1 Welcome aboard, matey!

server.js

var express = require('express'), 
    layout = require('express-layout'); 

var app = express(); 

app.get('/', function(req, res) { 
    res.render('home', { 
    title: 'Welcome!' 
});

Por defecto Express buscar layout.jade en sus puntos de vista /carpeta, pero se puede cambiar el valor predeterminado, mediante el uso de (sí, no es necesario escribir .jade extensión):

app.set('layout', 'default');

Después de eso express usará views/default.jade como el diseño predeterminado.

Además, si desea utilizar un diseño diferente en una página en particular, puede utilizar:

app.get('/', function(req, res) { 
    res.render('home', { 
    layout: 'login', 
    title: 'Welcome!' 
});

Aquí expresan hará que login.jade como el diseño.

Supongo que está utilizando Jade como el motor de vista predeterminado, y no cambia la carpeta predeterminada para las vistas.

Aquí está el express-layout doc.

Fuente

2016-01-24 18:08:06

Nice approach..It trabajó para mi –

motor de plantillas de jade, cómo usar layout.jade?

Respuesta

Cuestiones relacionadas