Сбой 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 ваш браузер ищет CSS в localhost:3000/article-list/css/main.css,

Самый простой способ исправить это - включить CSS с (include-css "/css/main.css"), / в начале убедитесь, что он всегда ищет localhost:3000/css/main.css,