12

我想出了以下代码，但问题是，每个菜单项都会有重复的锚标记。有没有更好的方法来做到这一点？

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

7 回答 7

23

在另一个类似的问题中发现了这一点：

在每个“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'});
}
于 2012-07-06T22:47:10.873 回答
7

这有更少的重复。

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

使用 javascript添加active类可能会更好，或者您可以使用直接的 CSSa:active选择器获得所需的演示文稿。

于 2012-05-23T05:59:20.337 回答
6

href这是一个替代方案，它在锚文本方面提供了比 Peter 的解决方案更大的灵活性。

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不活跃的会有一个undefined类，这在大多数情况下没有害处。

于 2012-08-14T08:36:25.970 回答
2

您可以在数据中传递 pageName。

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'})
于 2013-09-02T07:38:31.190 回答
1

非常灵活，没有重复：

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}

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

于 2013-07-16T15:21:00.333 回答
1

我认为最好像这样将一个body类设置为当前路径

body(class = currentPath)

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

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

这些选择器可以简化为最小的“body.path.path”，但它可能不够隔离。

这在客户端逻辑中也很有用，因为此选择器可用于确定 JavaScript 中的路径，例如

$("body.home").doSomethingSpecificToHome

这样，您的模板的逻辑就少了很多。

现在，我认为没有办法根据 URL 自动设置“currentPath”。基于 'url':'path' 的助手可能很有用。

于 2012-05-23T07:05:21.453 回答
0

类似于@netAction 的帖子，但依赖于 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
});
于 2015-10-21T08:30:00.757 回答