All geek questions in one place

CSS crashes with advanced paths in Compojure / Hiccup

I have converted some Noir sites to Compojure.

I have a function that creates a page layout:

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

And this is the function and routes:

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

When I open localhost: 3000 / article-list, all CSS rules work fine.

However, when I try to expand the URL and change the program, follow these steps:

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

And go to localhost: 3000 / article-list / article-one, I get all the HTML, but the CSS rules no longer work. When I check the page, css paths are included in the <head>, but there are no styles on the page.

I was looking for a solution to this problem, but it seems not written about it. I also tried pulling out the routes so that I had:

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

but i have the same problem. How can I make CSS rules work on pages with advanced paths?

+6
source share
1 answer

Your CSS is included with a relative path, which means that when you go to localhost:3000/article-list/article-one , your browser looks for CSS in localhost:3000/article-list/css/main.css .

The easiest way to fix this is to enable CSS using (include-css "/css/main.css") . / at the beginning ensures that it always searches for localhost:3000/css/main.css .

+5
source

Source: https://habr.com/ru/post/947923/

More articles:


All Articles