¿Cómo comenzar con CSS en Compojure?

Question

Encontré una página web muy básica en Internet y ahora me gustaría hacer lo obvio y agregar algo de CSS para poder crear páginas más bonitas.

1. ¿Cómo puedo incluir jQuery, así como otras hojas de estilo?
2. ¿Cómo puedo incluir un CSS en línea para poder agregar text-align: center, por ejemplo, para probar cambios rápidos?

jQuery regulares incluyen:

 

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

servidor

básico Hola Mundo sin formato: (Actualizado para incluir fijar el enrutamiento estático para que otros puedan estar en funcionamiento más rápido)

 

(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

Puedes incluir atributos de estilo para asignar sus 'estilos CSS en línea' usando la sintaxis como:

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

También puede incluir una etiqueta de hoja de estilo y javascript utilizando las funciones include-css e 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!"]]]])) 

Con el fin de servir archivos estáticos como archivos CSS y JS que se necesitan para cambiar su estado de ruta ligeramente y añadir algo como:

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

de lo contrario, el archivo css local no te sirven.