CSS在Compojure/Hiccup中延遲路徑失敗

Question

我一直在將一些Noir網站轉換爲Compojure。

我這裏有一個功能，創建頁面的佈局：

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

這是功能和路由：

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

當我打開本地主機：3000 /物品─列出所有的CSS規則工作正常。

然而，當我試圖延長URL路徑和程序改變爲：

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

，並轉到本地主機：3000 /文章列表/物品之一，我得到的所有的HTML，但CSS規則不再有效。當我檢查頁面時，css路徑包含在< head>元素中，但頁面上沒有樣式。

我已經搜索瞭解決這個問題的方法，但似乎沒有任何關於此的文章。我也嘗試拉出路線，讓我有：

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

但我有同樣的問題。我怎樣才能讓CSS規則在具有擴展路徑的頁面上工作？

Answer 1

您的CSS包含在一個相對路徑中，這意味着當您轉到localhost:3000/article-list/article-one時，您的瀏覽器正在尋找位於localhost:3000/article-list/css/main.css的CSS。

解決這個問題的最簡單方法是將(include-css "/css/main.css")包括在CSS中。開頭的/將確保它始終搜索localhost:3000/css/main.css。