CSS kończy się niepowodzeniem z rozszerzonymi ścieżkami w Compojure/Hiccup

Question

Przekształcałem niektóre strony Noir w Compojure.

Mam tu funkcję, która tworzy układ strony:

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

I to jest funkcja i trasy:

(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)) 

Kiedy otworzyć localhost: 3000/article- lista wszystkich reguł CSS działa dobrze.

Jednak gdy próbuję przedłużyć ścieżkę URL i zmienić program:

(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)) 

i przejść do localhost: 3000/article-list/artykuł jeden, mam wszystkie HTML, ale Reguły CSS już nie działają. Podczas sprawdzania strony ścieżki css są zawarte w elemencie head> <, ale nie ma żadnych stylów na stronie.

Szukałem rozwiązania tego problemu, ale wydaje się, że nie ma na ten temat żadnego zapisu. Próbowałem również wyciągnąć trasy, tak aby:

(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) 

, ale mam ten sam problem. Jak mogę uzyskać reguły CSS do pracy na stronach z rozszerzonymi ścieżkami?

Answer 1

Twój CSS jest dołączany do względnej ścieżki, co oznacza, że ​​gdy przejdziesz do localhost:3000/article-list/article-one Twoja przeglądarka szuka kodu CSS pod numerem localhost:3000/article-list/css/main.css.

Najprostszym sposobem rozwiązania tego problemu jest dodanie kodu CSS z numerem (include-css "/css/main.css"). / na początku zapewni, że zawsze będzie szukał localhost:3000/css/main.css.