4

有人可以举个例子,用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>
4

2 回答 2

4

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

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

如果您想使用 Heist 执行此操作,那么您需要使用与上面的模板使用的范例稍有不同的范例。Heist 的全部意义(借助 Haskell 强大的静态类型系统)是在视图和业务逻辑之间提供尽可能强的分离,因此您不能直接在模板中使用循环或条件等 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" })]

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

addSplices [ ("menuLink", liftHeist menuLinkSplice) ]

您还可能会发现我的博客文章“抢劫”中的循环和控制流很有帮助(以及我的其他一些带有“抢劫”标签的文章)。

于 2012-07-30T15:35:57.640 回答
0

据我所知,Heist 甚至要求您将这种逻辑放入 Haskell 而不是 Heist。例如,请参阅Text.Templating.Heist 文档中的此示例:

link :: Text -> Text -> X.Node
link target text = X.Element "a" [("href", target)] [X.TextNode text]

loginLink :: X.Node
loginLink = link "/login" "Login"

logoutLink :: Text -> X.Node
logoutLink user = link "/logout" (T.append "Logout " user)

loginLogoutSplice :: Splice MyAppMonad
loginLogoutSplice = do
    user <- lift getUser
    return [maybe loginLink logoutLink user]

这里不是将 Bool 传递给模板,并让模板执行 if/then 逻辑,而是在 Haskell 级别执行所有逻辑。这是我能给出的最好答案。我不熟悉抢劫;我知道您可以提供拼接参数,但我不清楚如何完成您的特定任务。

于 2012-07-30T02:41:10.197 回答