9

インターネットで非常に基本的な Web ページを見つけたので、より良いページを作成できるように、当たり前のことを行い、CSS を追加したいと考えています。

  1. jQuery や他のスタイル シートを含めるにはどうすればよいですか?
  2. たとえば、迅速な変更を試すためにtext-align: centerを挿入できるように、インライン CSS を含めるにはどうすればよいですか?

通常の 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 ファイルなどの静的ファイルを提供するには、route ステートメントを少し変更して、次のようなものを追加する必要があります。

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

そうしないと、ローカルの css ファイルが提供されません。

于 2010-01-25T06:06:28.880 に答える