CSS fallisce con percorsi estesi in Compojure/Hiccup

Question

Ho convertito alcuni siti Web Noir in Compojure.

Ho una funzione qui che crea il layout della pagina:

(defn layout [title & content] 
    (html5 
    [:head 
    [:title "My Site | " title] 
    (include-css "css/main.css") 
    [:body 
    [:header 
    [:h1 (link-to "/" "My Site")]] 
    content])) 

E questa è la funzione e le vie:

(defn home-page [] 
    (layout 
    "Home" 
    [:div [:p "Home Page"]]))) 

(defn article-list [] 
    (layout 
    "Article List" 
    [:div [:p "Article List"]]))) 

(defroutes app-routes 
    (GET "/" [] (home-page)) 
    (GET "/article-list" [] (article-list)) 

Quando apro localhost: 3000/articolo- elenca tutte le regole CSS funzionano bene.

Tuttavia, quando si tenta di estendere il sentiero URL e cambiare il programma per:

(defn article-list [] 
    (layout 
    "Article List" 
    [:div [:p "Article List"]]))) 

(defn article-one [] 
    (layout 
    "Article One" 
    [:div [:p "Article One"]]))) 

(defroutes app-routes 
    (GET "/" [] (home-page)) 
    (GET "/article-list" [] (article-list) 
    (GET "/article-list/article-one" [] (article-one)) 

E andare a localhost: 3000/article-list/article-uno, ho tutto il codice HTML, ma la Le regole CSS non funzionano più. Quando ispeziono la pagina, i percorsi css sono inclusi nell'elemento head> < ma non ci sono stili nella pagina.

Ho cercato una soluzione a questo problema, ma non sembra esserci alcuna scritta su questo. Ho anche provato a tirare fuori i percorsi in modo che io abbia:

(defroutes article-routes 
    (GET "/article-list/article-one" [] (article-one)) 

(defroutes app-routes 
    (GET "/" [] (home-page)) 
    (GET "/article-list" [] (article-list) 
    (context "article-list" [] article-routes) 

ma ho lo stesso problema. Come posso far funzionare le regole CSS su pagine con percorsi estesi?

Answer 1

Il tuo CSS è stato incluso con un percorso relativo, il che significa che quando vai a localhost:3000/article-list/article-one il tuo browser sta cercando il CSS a localhost:3000/article-list/css/main.css.

Il modo più semplice per risolvere questo problema è includere il CSS con (include-css "/css/main.css"). Lo / all'inizio assicurerà sempre la ricerca di localhost:3000/css/main.css.