haskell - 如何使用 Snap 突出显示事件链接？

Question

有人可以举个例子，用 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，我已经解决了以下问题:

haskell 代码:

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>

Answer 1

在 snapframework.com 站点中，我们使用 javascript 来完成。在 site.js 结尾您会发现这段代码将适当的类添加到适当的链接。

if ($.url.segment(0)) {
  $('.nav li.'+$.url.segment(0)).addClass('active');
} else {
  $('.nav .home').addClass('active');
}

如果您想使用 Heist 执行此操作，那么您需要使用与上面的模板使用的有点不同的范例。 Heist 的全部意义(借助 Haskell 强大的静态类型系统)是在 View 和业务逻辑之间提供尽可能强的分离，因此您不能直接在模板中使用循环或条件等 Haskell 构造。答案是创建完全符合您要求的新标签(通过拼接实现)。在您的模板中，您将像这样使用它:

<ul>
  <menuLink href="/">Home</menuLink>
  <menuLink href="/about">About Us</menuLink>
</ul>

首先，请注意这是多么清洁。在您的方法中，您必须为每个链接重复相同的代码。在这里，我们能够保持模板 DRY 并且它读起来非常好。

要实现 menuLink 标记，您需要一个如下所示的拼接拼接:

import Control.Monad.Trans.Class (lift) -- transformers 
import Data.Text.Encoding (decodeUtf8)
import Text.XmlHtml (getAttribute, setAttribute, elementTag)

menuLinkSplice :: MonadSnap m => HeistT m Template
menuLinkSplice = do
    requestPath <- lift $ withRequest (return . rqURI)
    node <- getParamNode
    let addActive n = if getAttribute "href" n == Just (decodeUtf8 requestPath)
                           then setAttribute "class" "active" n
                           else n
    return [addActive (node { elementTag = "a" })]

然后，要将它们放在一起，您需要将该拼接绑定(bind)到 menuLink 标记。在 Snap 应用程序中，您将使用:

addSplices [ ("menuLink", liftHeist menuLinkSplice) ]

您还可以找到我的博文 Looping and Control Flow in Heist有帮助(以及我的其他一些带有“抢劫”标签的帖子)。