2011-11-24 13 views
5

Jeśli nie wiesz, co to jest jade.
mam problemu ze strukturą szablonu dziedziczenie plików system.My jest podobnie jakDziedziczenie układu w jaderze

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

problemów jest to, że podczas ładowania na stronę produktu, który odbiera identyfikator jako param (localhost: 3000/product/id jeśli nie dla/id, który ładowałby się dobrze), chociaż układ nadal się rozciąga poprawnie, to nie ładuje poprawnie arkusza stylów (ścieżka jest zepsuta). Robię połowę tego, ale na stronie indeksu produktów arkusz stylów ładuje się dobrze.

Layout.jade

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

Odpowiedz

9

To chyba względna ścieżka w href. Kopanie wokół wyraźnej dokumentacji, jestem stwierdzenia, że ​​najbardziej popularnym rozwiązaniem jest odniesienie stylów od podstawy miejscu tak (zauważyć/poprzednich stylów):

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

Ma to tę zaletę, że łatwo i działa na trasach o wielu głębokościach (/ about,/about/me, etc). Ma jednak negatywny wpływ na brak obsługi głębokości katalogu aplikacji. Na przykład, jeśli chcesz hostować swoją aplikację pod adresem: http://yourserver/yourapps/yourapp, będzie to stanowić problem. Nie wiem, czy ci na tym zależy czy nie, większość przykładów ekspresowych z pewnością nie :-)

Jednak jeśli chcesz to zrobić we właściwy sposób, jest jeden przykład na ekspresowym githubie strona: blog. https://github.com/visionmedia/express/tree/master/examples/blog

Podejściem tutaj jest użycie komponentu oprogramowania pośredniego do pobrania podstawowego adresu URL i umieszczenie go w lokalizacji lokalnej przekazywanej do widoku układu. Oto co Twój HTML wyglądałby następująco:

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

ważnych części, aby sprawdzić, jeśli wymagają tego podejścia są pośredniej/locals.js, app.js gdzie składnik middleware jest okablowany i layout.jade gdzie używana jest baza href.

Happy Coding!

+0

zwróć uwagę na/wcześniejsze arkusze stylów! To był klucz! Jestem szczęśliwy dzięki: D – andrei