Ereditarietà layout in giada

Question

Se non si sa cosa sia jade.
Sto avendo problemi con la struttura di modello di file system.My eredità è in questo modo

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

problemi è che quando si carica la pagina del prodotto che riceve un id come param (localhost: 3000/prodotto /: id se non per il/id verrebbe caricato bene), anche se il layout si estende ancora correttamente non carica correttamente il foglio di stile (il percorso è interrotto). Ne sto facendo metà, però, nella pagina indice dei prodotti il ​​foglio di stile si carica bene.

Layout.jade

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

Answer 1

E 'probabilmente il percorso relativo nel vostro href. Scavando attorno alla documentazione espresso, ho constatato che l'approccio più popolare è quello di fare riferimento al foglio di stile dalla base del sito come questo (notare i fogli di stile/precedente):

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

Questo ha il vantaggio di essere facile e lavorando su percorsi di più profondità (/ about,/about/me, ecc.). Tuttavia, ha il negativo di non supportare la profondità della directory app. Ad esempio, se volessi ospitare la tua app al numero: http://yourserver/yourapps/yourapp, questo sarebbe un problema. Non so se ti importa di questo o no, la maggior parte degli esempi per esprimere certamente non lo fanno :-)

Tuttavia, se si vuole fare questo nel modo giusto, c'è un esempio sul github espresso sito: blog. https://github.com/visionmedia/express/tree/master/examples/blog

L'approccio qui è quello di utilizzare un componente middleware per prendere l'url di base e inserirlo nei locali passati alla vista di layout. Ecco quello che il codice HTML sarà simile:

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

Le parti importanti da verificare se avete bisogno di questo approccio sono middleware/locals.js, app.js dove la componente middleware è cablato, e dove la layout.jade viene usato href di base.

Happy Coding!