CSS không thành công với đường dẫn mở rộng trong Compojure/Hiccup

Question

Tôi đã chuyển đổi một số trang web Noir thành Compojure.

Tôi có một chức năng ở đây là tạo ra cách bố trí của trang:

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

Và đây là chức năng và các tuyến đường:

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

Khi tôi mở lên localhost: 3000/article- liệt kê tất cả các quy tắc CSS hoạt động tốt.

Tuy nhiên, khi tôi cố gắng để mở rộng đường dẫn URL và thay đổi chương trình để:

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

Và đi đến localhost: 3000/Điều-list/bài viết mốt, tôi nhận được tất cả các mã HTML nhưng Các quy tắc CSS không còn hoạt động nữa. Khi tôi kiểm tra trang, các đường dẫn css được bao gồm trong phần tử < head> nhưng không có kiểu trên trang.

Tôi đã tìm kiếm giải pháp cho vấn đề này, nhưng dường như không có bất kỳ văn bản nào về vấn đề này. Tôi cũng đã cố gắng kéo ra các tuyến đường để tôi có:

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

nhưng tôi có cùng một vấn đề. Làm thế nào tôi có thể nhận được các quy tắc CSS để làm việc trên các trang có đường dẫn mở rộng?

Answer 1

CSS của bạn đang được bao gồm với đường dẫn tương đối, có nghĩa là khi bạn truy cập localhost:3000/article-list/article-one trình duyệt của bạn đang tìm kiếm CSS theo số localhost:3000/article-list/css/main.css.

Cách dễ nhất để khắc phục điều này là bao gồm CSS với (include-css "/css/main.css"). Các / lúc đầu sẽ đảm bảo nó luôn tìm kiếm localhost:3000/css/main.css.