9

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

  1. 如何包含 jQuery 以及其他样式表？
  2. 如何包含内联 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))
4

1 回答 1

12

您可以包含样式属性以使用以下语法分配您的“内联 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 文件之类的静态文件，您需要稍微更改您的路由语句并添加如下内容：

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

otherwise, your local css file will never get served.

于 2010-01-25T06:06:28.880 回答