node.js + jade + express:如何创建一个导航，如果路径匹配，该导航将类设置为活动状态

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

在另一个类似的问题中找到了这一点：

在每个"li"处使用三元

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

如果需要，您可以将路由设置为传递"菜单"值，而不是使用"title"：

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

Answer 2

这减少了一些重复。

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

添加active类可能最好在javascript中完成，或者您可以使用直接的CSS a:active选择器获得所需的演示文稿。

Answer 3

这是一个替代方案，它在锚文本和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类，这在大多数情况下没有坏处。

Answer 4

您可以在数据中传递页面名称。

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
}

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

这在客户端逻辑中也很有用，因为这个选择器可以用来确定JavaScript中的路径

，如下所示。

$("body.home").doSomethingSpecificToHome

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

现在，我认为没有办法根据URL自动设置"当前路径"。基于 'url'：'path' 的帮助程序可能很有用。

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的帖子，但取决于 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
});