Erste Schritte mit CSS in Compojure?

Question

Ich habe eine sehr einfache Webseite im Internet gefunden und jetzt möchte ich das Offensichtliche tun und etwas CSS hinzufügen, damit ich schönere Seiten erstellen kann.

1. Wie kann ich jQuery und andere Stylesheets einbeziehen?
2. Wie kann ich Inline-CSS einschließen, so kann ich zum Beispiel eine text-align: center einwerfen, um schnelle Änderungen auszuprobieren?

Regular jQuery sind:

 

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

Grund Hallo Welt-Server ohne Formatierung: (Aktualisiert statisches Routing fix zu schließen, damit andere und läuft schneller sein)

 

(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

Sie umfassen können Stilattribute zum Zuweisen von 'Inline-CSS-Stilen' mit folgender Syntax:

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

Sie können auch ein Stylesheet-Tag und JavaScript mit den Funktionen include-css und include-js einfügen.

(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!"]]]])) 

Um statische Dateien wie CSS und JS-Dateien dienen Sie Ihre Route Aussage leicht und fügen Sie wie etwas ändern müssen:

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

sonst, Ihre lokale CSS-Datei wird nie serviert bekommen.