clojure - 在Compojure中使用CSS入门？

Question

我在Internet上找到了一个非常基本的网页，现在我想做一些显而易见的事情并添加一些CSS，以便可以构建更好的页面。

如何包含jQuery以及其他样式表？

如何包含内联CSS，以便可以放入 text-align:center 来尝试快速更改？

常规jQuery包括:

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

基本的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"]

您还可以使用include-css和include-js函数添加样式表标签和javascript。

(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文件之类的静态文件，您将需要稍微更改route语句并添加以下内容:

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

否则，您的本地CSS文件将永远无法获得服务。