2012-04-12 21 views
12

Estoy tratando de entender cómo funciona Express y Jade.Vinculación a otros archivos de jade

Antes que nada, ¿lo estoy haciendo bien cuando estoy usando layout.jade como un archivo de plantilla (encabezado, cuerpo, pie de página) y usando diferentes archivos para mostrar información en el cuerpo (ver ejemplos a continuación)?

El código funciona bien, pero no estoy seguro de si esta es la manera correcta de hacer cosas en Express. Si sigo con esta estructura, ¿cómo puedo vincular internamente otros archivos (p. Ej., About.jade) de, por ejemplo, index.jade, para mostrar ese archivo en lugar de index.jade?

¡Gracias de antemano!

layout.jade:

!!! 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js') 
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js') 
    script(type='text/javascript', src='/javascripts/external.js') 

    // Header 
    header#header 

    // Navigation 
    nav#nav 
    // Navigation code (ul, li etc)... 

    // Sidebar 
    aside#sidebar 
    // Sidebar code... 

    // Body 
    body!= body 

index.jade:

!!! 5 
html 
    head 
    title= title 

    section#wrapper 
     img.imageStyle(src = '/images/test1.png') 
     // And so on... 

About.jade:

// You get it... 

Respuesta

13

Creo que lo que se está buscando la representación de vista de rutas express: http://expressjs.com/en/guide/using-template-engines.html

para que pueda establecer algo como esto:

app.get('/', function(req, res){ 
    res.render('index.jade', { title: 'index' }); 
}); 

app.get('/about', function(req, res){ 
    res.render('about.jade', { title: 'about' }); 
}); 

Para vincular de una a la otra, una vez que tenga las rutas adecuadas configurados, sólo puede hacer algo como:

a(href='/') index 

a(href='/about') about 

actualización Además, no necesita repetir esto nuevamente en el índice.

!!! 5 
html 
    head 
    title= title 
+0

¡Gran respuesta, gracias! – holyredbeard

4

Además de lo que escribió Wes Freeman, también puede incluir otras plantillas de jade en su archivo de jade.

de esa manera podría tener su header.jade, footer.jade e incluirlos en su archivo about.jade. aquí está la documentación de inclusión de jade: https://github.com/visionmedia/jade#a13

de esa manera solo tiene que cambiar el archivo header.jade si agrega, por ejemplo, secuencias de comandos o etiquetas de hojas de estilo que deben estar en cada página.

+0

+1, también información útil. –

Cuestiones relacionadas