Question

我提出了以下代码,但问题是,每个菜单项的锁定标记将会重复。有更好的方法可以这样做吗?

                ul.nav
                    - if(menu="Home") 
                        li.active
                            a(href="#") Dashboard
                    else
                        li
                            a(href="#") Dashboard
                    li 
                        a(href="#") About
                    li 
                        a(href="#") Contact

Answer 1

这少了一点重复。

ul.nav
  each name in ["Dashboard", "About", "Contact"]
    if (menu=="Home")
      li.active
        a(href="#")= name
    else
      li
        a(href="#")= name

添加 active class 类也许最好用javascript来完成,或者也许您可以用直线 CSS a:active 选择器来获取您需要的演示文稿。

Answer 2

在另一个 < a href=>"中发现了这个 “https://stackoverflow.com/ questions/9488029/how-does-one-add-a-mential- in-in-jade” > 类似的问题:

在每个"li"都用双年制

ul
    li(class=(title ===  Home  ?  active  :   ))
        a(href= # ) Home
    li(class=(title ===  Dashboard  ?  active  :   ))
        a(href= # ) Dashboard

您可以设置您的路径以通过“菜单”值, 而不是使用“标题”, 如果您想要 :

exports.index = function(req, res) {
    res.render( index , {title:  Home , menu:  Home });
}

Answer 3

在此选择一个比 Peter 溶液更灵活的锁定文本和 href 。

nav
  // suppose title local denotes the active nav item
  - var nav = {}; nav[title] =  active 
  ul
    // pass title to li class via nav object
    li(class= #{nav.Home} )
      // different href and anchor text
      a(href= / ) Home
    li(class= #{nav.About} )
      a(href= /about ) About
    li(class= #{nav.Contact} )
      a(href= /contact ) Contact

告诫是,那些不活跃的 li 将有一个未定义的 < /code> 类,在大多数情况下无损。

Answer 4

您可以通过数据中的页面Name。

each menu in ["Home", "Dashboard", "Contact", "About"]
    if (menu == pageName)
      li.active
        a(href="/#{menu}")= menu
    else
      li
        a(href="/#{menu}")= menu

您可以调用

res.render("index", { pageName:  Home })

res.render("index", { pageName:  Dashboard })

res.render("index", { pageName:  Contact })

Answer 5

我觉得最好把身体类设置到现在的路径上这样比较好

body(class = currentPath)

因此,您可以使用选择器,例如

body.home .nav li.home, body.dashboard .nav li.dashboard {
  Style when current path
}

这些选择器可以缩到最小的身体. path. path, 但它可能不够隔离。

这在客户端逻辑中也会有用, 因为可以使用此选择器来决定 JavaScript 的路径, 比如

$("body.home").doSomethingSpecificToHome

这样你的模板的逻辑就少得多了

现在,我不认为有办法根据 URL 自动设置“ 当前 Path ” 。基于 URL 的助手: 路径可能有用。

Answer 6

非常灵活,不重复:

ul
  each menuitem in [{title: Home ,url: / },{title: About ,url: /about },{title: Contact ,url: /contact }]
    if (menuitem.title == title)
      li.active
        a.active(href=menuitem.url) #{menuitem.title}
    else
      li
        a(href=menuitem.url) #{menuitem.title}

您需要设置当前标题的页面。

Answer 7

类似@netAction s 文章, 但取决于 URL 而非标题。

each menuitem in [{title: Home ,url: / },{title: About ,url: /about },{title: Contact ,url: /contact }]
    if (path == menuitem.url)
        li.active
            a.active(href=menuitem.url) #{menuitem.title}
    else
        li
            a(href=menuitem.url) #{menuitem.title}

与

app.use(function(req, res, next) {
    res.locals = {
        isAuthenticated: req.isAuthenticated(),
        path :req.path
    }

    next(); // make sure we go to the next routes and don t stop here
});

友情链接