Compojure 中的 CSS 入门？

Posted 2023-03-04

【中文标题】Compojure 中的 CSS 入门？

【英文标题】：Getting started with CSS in Compojure?

【发布时间】：2011-01-08 23:34:53

【问题描述】：

我在 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))

【问题讨论】：

这已经过时了。

【参考方案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 文件之类的静态文件，您需要稍微更改路由语句并添加如下内容：

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

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

【讨论】：

我已经尝试过 (include-css "style.css") 和 (include-css "/style.css") 但我得到了 404。style.css 与我的 hello.clj。

是的，我需要使用 GET "/*" 来处理静态文件 ...en.wikibooks.org/wiki/Compojure/Tutorials_and_Tips

这已经过时了。我们需要更好的东西。