node.js + jade + express：如果路径匹配，我如何创建一个将类设置为活动的导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10713923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
node.js + jade + express: How can I create a navigation that will set class active if the path matches
提问by Vartan Arabyan
I have come up with the following code but the problem is, there will be duplication of the anchor tag for each menu item.Is there a better way to do this?
我想出了以下代码，但问题是，每个菜单项的锚标记都会重复。有没有更好的方法来做到这一点？
ul.nav
- if(menu="Home")
li.active
a(href="#") Dashboard
else
li
a(href="#") Dashboard
li
a(href="#") About
li
a(href="#") Contact
采纳答案by Peter Lyons
This has a little less duplication.
这有一点重复。
ul.nav
each name in ["Dashboard", "About", "Contact"]
if (menu=="Home")
li.active
a(href="#")= name
else
li
a(href="#")= name
Adding the activeclass might be better just done in javascript or perhaps you can get the presentation you need with the straight CSS a:activeselector.
添加active类可能最好在 javascript 中完成，或者您可以使用直接的 CSSa:active选择器获得所需的演示文稿。
回答by crussell
Found this in another question that was similar:
在另一个类似的问题中发现了这一点：
Use a ternary at each "li"
在每个“li”处使用三元
ul
li(class=(title === 'Home' ? 'active' : ''))
a(href='#') Home
li(class=(title === 'Dashboard' ? 'active' : ''))
a(href='#') Dashboard
You can setup your routes to pass the "menu" value instead of using "title" if you want:
如果需要，您可以设置路由以传递“菜单”值而不是使用“标题”：
exports.index = function(req, res) {
res.render('index', {title: 'Home', menu: 'Home'});
}
回答by scottcheng
Here's an alternative that provides more flexibility in terms of anchor text and hrefthan Peter's solution.
这是一个替代方案，它在锚文本方面提供了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
The caveat is that those lithat are not active will have an undefinedclass, which does no harm in most cases.
需要注意的是，那些li不活跃的人会有一个undefined类，这在大多数情况下没有害处。
回答by Fizer Khan
You can pass the pageName in the data.
您可以在数据中传递 pageName。
each menu in ["Home", "Dashboard", "Contact", "About"]
if (menu == pageName)
li.active
a(href="/#{menu}")= menu
else
li
a(href="/#{menu}")= menu
You can call render
你可以调用渲染
res.render("index", { pageName: 'Home'})
res.render("index", { pageName: 'Dashboard'})
res.render("index", { pageName: 'Contact'})
回答by netAction
Very flexible without duplication:
非常灵活，没有重复：
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}
You need to set the page's current title.
您需要设置页面的当前标题。
回答by Arnaud Rinquin
I think it's better to set a body class to current path like so
我认为最好像这样将身体类设置为当前路径
body(class = currentPath)
So you can then use selectors such as
所以你可以使用选择器，例如
body.home .nav li.home, body.dashboard .nav li.dashboard {
Style when current path
}
These selectors can be reduced to the minimal 'body.path .path' but it may be not isolated enough.
这些选择器可以减少到最小的“body.path .path”，但它可能不够隔离。
This will also be useful in the client side logic as this selectors could be used to determine the path in your JavaScript with something like
这在客户端逻辑中也很有用，因为此选择器可用于确定 JavaScript 中的路径，例如
$("body.home").doSomethingSpecificToHome
This way your template has lot less logic.
这样你的模板就少了很多逻辑。
Now, I don't think there is a way to set "currentPath" automatically depending on the URL. An helpers based on a 'url':'path' may be useful.
现在，我认为没有办法根据 URL 自动设置“currentPath”。基于 'url':'path' 的助手可能会很有用。
回答by Liron
Similar to @netAction's post, but dependent on the URL and not on the title.
类似于@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}
Combined with
结合
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
});
