Démarrer avec CSS dans Compojure?

Question

J'ai trouvé une page web très basique sur Internet et maintenant je voudrais faire une chose évidente et ajouter du CSS pour pouvoir créer de plus belles pages.

1. Comment puis-je inclure jQuery, ainsi que d'autres feuilles de style?
2. Comment est-ce que je peux inclure le CSS en ligne afin que je puisse lancer text-align: center, par exemple, pour essayer des changements rapides?

jQuery régulier comprennent:

 

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

base Bonjour serveur du monde sans mise en forme: (Mise à jour pour inclure solution de routage statique pour que les autres seront en marche plus rapide)

 

(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

Vous pouvez inclure attributs de style pour assigner vos 'styles de style CSS en ligne' en utilisant la syntaxe suivante:

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

Vous pouvez également inclure une balise feuille de style et un javascript à l'aide des fonctions include-css et 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!"]]]])) 

Afin de mieux servir les fichiers statiques comme les fichiers CSS et js, vous devrez changer votre déclaration d'itinéraire légèrement et ajouter quelque chose comme:

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

sinon, votre fichier css locale rien ne sera jamais servi.