Herencia de diseño en jade

Question

Si no sabe qué es jade.
estoy teniendo problema con la estructura de la plantilla de archivos system.My herencia es como tan

/views/ 
    |-- layout.jade 
    /products/ 
     |-- index.jade 
     |-- product.jade 
/static/ 
    /stylesheets/ 
     |-- style.css 

los problemas es que al cargar la página de producto que recibe un identificador como parámetro (localhost: 3000/producto /: id si no para/id, se cargaría muy bien), aunque el diseño aún se extiende correctamente, no carga la hoja de estilo correctamente (la ruta está rota). Aunque estoy haciendo la mitad, en la página de índice de los productos, la hoja de estilos se carga muy bien.

Layout.jade

head 
    link(rel='stylesheet', href='stylesheets/style.css') 

Answer 1

Es probablemente la ruta relativa en su href. Escarbar la documentación expresa, estoy encontrando que el enfoque más popular es hacer referencia a la hoja de estilo desde la base del sitio como este (nótese las hojas de estilo/anteriores):

link(rel='stylesheet','/stylesheets/style.css') 

Esto tiene la ventaja de ser fácil y trabajando en rutas de múltiples profundidades (/ about,/about/me, etc.). Sin embargo, tiene el negativo de no apoyar la profundidad del directorio de la aplicación. Por ejemplo, si desea alojar su aplicación en: http://yourserver/yourapps/yourapp, esto sería un problema. No sé si te importa esto o no, la mayoría de los ejemplos para express ciertamente no :-)

Sin embargo, si quieres hacer esto de la manera correcta, hay un ejemplo en el express github sitio: blog. https://github.com/visionmedia/express/tree/master/examples/blog

El enfoque aquí es utilizar un componente de middleware para captar la url base y rellenarla en las ubicaciones locales pasadas a la vista de diseño. Esto es lo que el código HTML se vería así:

!!! 5 
html 
    head 
    title Blog 
    link(rel='stylesheet', href=base + '/style.css') 
    body 
    #container!= body 

Las partes importantes para comprobar si usted requiere de este enfoque son de middleware/locals.js, app.js donde el componente middleware está conectado, y donde el layout.jade se usa href base.

Happy Coding!