Motor de plantilla de jade, ¿cómo usar LEYOUT.JADE?

StackOverflow https://stackoverflow.com/questions/8402568

  •  28-10-2019
  •  | 
  •  

Pregunta

Tengo un sitio web en Node.js; Para crear una página, digamos mypage Noté que necesito crear ambos layout.jade y mypage.jade archivos. Si pongo código en mypage.jade no se muestra, así que primero tengo que llenar layout.jade con el diseño de la página.

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

Gracias

¿Fue útil?

Solución

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

Si no desea usar diseños, puede deshabilitarlos a nivel mundial:

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

Si no hace que los diseños estén habilitados de forma predeterminada y exprese búsquedas para el diseño estándar en su_view_folder/diseño.jade

Sin embargo, puede especificar un diseño separado para cada ruta:

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 se tomará de "mypage.jade".

Editar:

Aquí hay 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

Otros consejos

Un poco tarde a la fiesta, pero luché por encontrar la respuesta inicialmente ... en el diseño. 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

Volverá

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

En express 3.x

Use bloques de jade, no diseños

http://www.devtheught.com/code/use-jade-blocks-not-laayouts/

Conozco un enfoque que me ha dado los mejores resultados, incluso con Angular (para sustituir a Angular-Rutee/Ng-View)

En primer lugar, será necesario para instalar Express-Layout:

npm install --save express-layout

Después de eso, Express buscará el archivo LEYOUT.JADE dentro de su puntos de vista/ carpeta. Entonces, dentro de eso puedes usar:

vistas/diseño.jade

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

vistas/hogar.jade

h1 Welcome aboard, matey!

servidor.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á diseño. Jade en su puntos de vista/ carpeta, pero puede cambiar el valor predeterminado, utilizando (sí, no es necesario escribir. Jade Extension):

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

Después de eso, Express usará vistas/default.jade como el diseño predeterminado.

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

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

Aquí Express renderizará login.jade como el diseño.

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

Aquí está el Doc de la capa expresa.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top