Начало работы с CSS в Compojure?

Question

Я нашел очень основную веб-страницу в Интернете, и теперь я хотел бы сделать очевидную вещь и добавить CSS, чтобы я мог создавать более приятные страницы.

1. Как включить jQuery, а также другие таблицы стилей?
2. Как включить встроенный CSS, чтобы я мог нарисовать text-align: center, например, чтобы попробовать быстрые изменения?

Regular JQuery включает:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"/> 
 

Basic Hello World сервер без форматирования: (ОБНОВЛЕНО включить статическую затруднительную маршрутизацию, так что другие будут и работают быстрее)

 

(ns hello-world 
    (:use compojure)) 

(defn index 
    [request] 
    (html 
    [:h1 "Hello World"] 
    [:p "This is ugly with CSS!"]) 
    ) 

(defn hello 
    [request] 
    (html "" 
    [:title "A very long title"] 
    [:div.comment 
    [:h1 "Hello's Page"] 
    [:p "This would look better with some CSS formatting!"]] 
)) 

(defroutes greeter 
    (GET "/" index) 
    (GET "/h" hello) 
    (GET "/*" 
     (or (serve-file "/opt/compojure/www/public" (params :*)) ;; This is needed to find CSS and js files 
     :next)) 
    (ANY "*" 
     (page-not-found) ;; 404.html is in /opt/compojure/www/public/404.html 
)) 


(run-server {:port 9090} 
    "/*" (servlet greeter)) 
 

Answer 1

Вы можете включить атрибуты стиля для назначения ваших «встроенных стилей CSS» с использованием синтаксиса типа:

[:h1 {:style "background-color: black"} "Hello's Page"] 

Вы также можете включить тег стилей и javascript, используя функции include-css и include-js.

(defn hello 
    [request] 
    (html "" 
    [:html 
    [:head 
     [:title "A very long title"] 
     (include-css "my css file") 
     (include-js "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js")] 
    [:body 
     [:div.comment 
      [:h1 "Hello's Page"] 
      [:p "This would look better with some CSS formatting!"]]]])) 

Для того, чтобы обслуживать статические файлы, такие как CSS и JS файлов, которые нужно будет немного изменить свое заявление о маршруте и добавить что-то вроде:

(GET "/*" 
    (or (serve-file "PATH_TO_FILES" (params :*)) :next)) 

в противном случае, ваш локальный файл CSS никогда не будет обслужен.