Question

问题：Enlive片段制作时髦的HTML

问题的视觉参考：http://i.imgur.com/FIOzgZv.png

请参阅代码段底部，了解有问题的奇怪HTML

(ns notebook.handler
  (:require [compojure.core :refer :all]
            [compojure.handler :as handler]
            [compojure.route :as route]
            [net.cgrand.enlive-html :as html]))

(html/defsnippet nav "templates/nav.html" [:*]
      [])

(html/deftemplate home-page "templates/base.html"
  []
   [:body] (html/prepend (nav)))

(defroutes app-routes
  (GET "/" [] (home-page))
  (route/resources "/")
  (route/not-found "Not Found"))

(def app
   (handler/site app-routes))

base.html的内容：

<html>
  <head>
    <link rel=stylesheet href="css/base.css">
  </head>
  <body>
  </body>
</html>

nav.html的内容：

<nav>
  <ul>
    <li>FlatNotes</li>
  </ul>
</nav>

访问localhost：3000时的HTML：

<html>
  <head>
    <link href="css/base.css" rel="stylesheet" />
  </head>
  <body><nav>
  <ul>
    <li>FlatNotes</li>
  </ul>

</nav><ul>
    <li>FlatNotes</li>
  </ul><li>FlatNotes</li>
  </body>

</html>

(reduce str (html/emit* (nav)))显示奇怪的HTML意味着问题发生在defsnippet之前的deftemplate：

"<nav>\n  <ul>\n\t<li>FlatNotes</li>\n  </ul>\n\n</nav><ul>\n\t<li>FlatNotes</li>\n  </ul><li>FlatNotes</li>"

也许我误解了[:*]做了什么，或者有一个根本的误解，或者有一个我不知道的问题。我已经将代码缩减到尽可能小的最低限度。

Answer 1

:*代表通用选择器。它匹配nav.html中的每个元素 - nav，ul和li - 这意味着导航代码段为：

<nav>
  <ul>
    <li>FlatNotes</li>
  </ul>
</nav>

<ul>
  <li>FlatNotes</li>
</ul>

<li>FlatNotes</li>

传递给代码段定义的选择器应指向代码段的单个顶级元素。如果您更改:*以匹配单个元素（即:nav），则应该为您提供您正在寻找的代码段。

Enlive片段给我奇怪的HTML

1 个答案: