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

当我打开 localhost:3000/article-list 时，所有 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))

然后转到 localhost:3000/article-list/article-one，我得到了所有的 HTML，但 CSS 规则不再起作用。当我检查页面时，css 路径包含在

元素中，但页面上没有样式。

我已经寻找解决此问题的方法，但似乎没有任何关于此的文章。我也试过拉出路线，这样我就有了：

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

解决此问题的最简单方法是将 CSS 包含在 (include-css "/css/main.css") 中。开头的/ 将确保它始终搜索localhost:3000/css/main.css。