Сбой CSS с расширенными путями в Compojure/Hiccup

Я конвертировал некоторые веб-сайты 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 включены в элемент ‹ 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 работать на страницах с расширенными путями?


clojure compojure hiccup
person dizzystar    schedule 23.06.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Ваш 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.

person mange    schedule 23.06.2013
comment
О чувак. Я только что попробовал это и все еще имею ту же проблему. Ради смеха я закомментировал (маршрут/ресурсы/) в дефрутах и ​​перезагрузил кольцо безрезультатно. Я также пробовал обе версии дефрутов, опубликованных выше, и они все еще не улавливают CSS. - person dizzystar; 23.06.2013
comment
Это решение сработало после некоторых попыток. Только не забудьте очистить кеш. Спасибо - person dizzystar; 23.06.2013