Может ли кто-нибудь привести пример выделения «активной» ссылки в меню на сайте с помощью Snap? Или, по крайней мере, скажите мне, как бы вы это сделали — я понятия не имею.
В других веб-фреймворках я обычно устанавливаю переменную контекста с именем active
на то, какой должна быть активная страница, а затем мой html просто проверяет это:
<ul>
{% ifequal active "home" %}
<li class="active">
{% else %}
<li>
{% endifqual %}
<a href="/">Home</a>
</li>
{% ifequal active "about" %}
<li class="active">
{% else %}
<li>
{% endifequal %}
<a href="/about">About Us</a>
</li>
</ul>
В ограблении есть сплайсы, но я не уверен, как бы вы использовали их, чтобы выяснить, что такое текущий URL-адрес, или установить переменную контекста.
Мое решение
Благодаря @mightybyte и @Adam Bergmark я остановился на следующем:
Хаскель-код:
menuenuEntrySplice :: MonadSnap m => HeistT m Template
menuEntrySplice = do
requestPath <- lift $ withRequest (return . rqURI)
node <- getParamNode
let setActive n = if getAttribute "href" node == Just (decodeUtf8 requestPath)
then setAttribute "class" "active" n
else n
let aNode = Element "a" [("href", fromMaybe "/" $ getAttribute "href" node)] $ [TextNode (nodeText node)]
let liNode = setActive $ Element "li" [] [aNode]
return [liNode]
app :: SnapletInit App App
app = makeSnaplet "app" "An snaplet example application." Nothing $ do
....
addSplices [ ("menuEntry", liftHeist menuEntrySplice) ]
return $ App h s a
И вот теперь это используется в HTML:
<ul class="nav">
<menuEntry href="/">Home</menuEntry>
<menuEntry href="/contact">Contact</menuEntry>
</ul>
который производит:
<ul class="nav">
<li class="active"> <a href="/">Home</a> </li>
<li> <a href="/contact">Contact</a> </li>
</ul>
body
и вашимli
id
, а затем сделать#page-home #nav-home, #page-about #nav-about
? - person   schedule 30.07.2012