logo标签列表

使用Hiccup和Compojure构建模板

clojurecompojurehiccup
7

我是相对新手的Clojure和Compojure网络开发者。 我在构建玩具示例时首先注意到的问题是HTML模板。 我想要像Rails中的partials或Django使用的模板框架一样支持某些内容。

目前我有：

(defn index-page []
(html5
    [:head
        [:title "Home | Compojure Docs"]
        (include-css "/css/bootstrap.min.css")
        (include-css "/css/bootstrap-responsive.min.css")]
    [:body
        [:div {:class "container-fluid"}
            [:div {:class "row-fluid"}
                [:div {:class "span2 menu"}]
                [:div {:class "span10 content"}
                    [:h1 "Compojure Docs"]
                    [:ul
                        [:li
                            [:a {:href "/getting-started"} "Getting Started"]]
                        [:li
                            [:a {:href "/routes-in-detail"} "Routes in Detail"]]
                        [:li
                            [:a {:href "/destructuring-syntax"} "Destructuring Syntax"]]
                        [:li
                            [:a {:href "/nesting-routes"} "Nesting Routes"]]
                        [:li
                            [:a {:href "/api-documentation"} "API Documentation"]]
                        [:li
                            [:a {:href "/paas-platforms"} "PaaS Platforms"]]
                        [:li
                            [:a {:href "/example-project"} "Example Project"]]
                        [:li
                            [:a {:href "/example-project-on-cloudbees"} "Example Project on CloudBees"]]
                        [:li
                            [:a {:href "/interactive-development-with-ring"} "Interactive Development with Ring"]]
                        [:li
                            [:a {:href "/emacs-indentation"} "Emacs Indentation"]]
                        [:li
                            [:a {:href "/sessions"} "Sessions"]]
                        [:li
                            [:a {:href "/common-problems"} "Common Problems"]]]
                    (include-js "/js/jquery-1.9.1.min.js")
                    (include-js "/js/bootstrap.min.js")]]]]))

(defn routes-in-detail []
(html5
    [:head
        [:title "Routes in Detail | Compojure Docs"]
        (include-css "/css/style.css")]
    [:body
        [:h1 "Routes in Detail"]]))

有没有好的方法可以避免我重复编写代码？我想把HEAD标签中的内容放在自己的模板文件或函数中，然后在需要的时候引用它。例如，我想在“routes-in-detail”函数中引用它。我尝试过Enlive，但不确定如何将其与Hiccup一起使用。欢迎分享关于最佳实践的想法。

2个回答
11

您可以将标记的部分提取到单独的变量中：

(def head
  [:head
    [:title "Home | Compojure Docs"]
    (include-css "/css/bootstrap.min.css")
     ... ])

(defn routes-in-detail []
  (html5
    head
    [:body
      ... ]))

如果你需要给你的片段/局部添加参数，你可以将其改写成一个函数，例如：

(defn head [title]
  [:head
    [:title title]
    (include-css "/css/bootstrap.min.css")
     ... ])

(defn routes-in-detail []
  (html5
    (head "Routes in detail")
    ... ))
有时候您会希望您的“片段”由多个顶级元素组成，而不是单个元素。在这种情况下，您可以将它们包装在列表中 - hiccup将会将其内联展开:

有时您可能希望您的“片段”由多个顶级元素组成，而不是单个元素。在这种情况下，您可以将它们包装在列表中 - hiccup将会将其内联展开:

(defn head-contents [title]
  (list [:title title]
        (include-css "/css/bootstrap.min.css")
        ... )))

(defn routes-in-detail []
  (html5
    [:head (head-contents "Routes in detail")]
    [:body ... ]))

一旦你意识到打嗝标记是由普通的Clojure数据结构组成的事实，你会发现使用函数进行操作和构建变得容易且灵活。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接