node.js + jade + express：如何创build一个导航，如果path匹配将设置类活动
我已经拿出了下面的代码，但问题是，将有重复的每个菜单项的锚标记。是否有更好的方法来做到这一点？
ul.nav - if(menu="Home") li.active a(href="#") Dashboard else li a(href="#") Dashboard li a(href="#") About li a(href="#") Contact 这有一点重复。
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:activeselect器的演示文稿。
在另一个类似的问题中发现了这个问题 ：
每个“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'}); }
这里有一个替代scheme，比起Peter的解决scheme，在锚文本和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
需要注意的是那些不活跃的李将会有一个undefined阶级，这在大多数情况下是无害的。
您可以传递数据中的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'})
我认为最好将body类设置为当前path
body(class = currentPath)
所以你可以使用select器如
body.home .nav li.home, body.dashboard .nav li.dashboard { Style when current path }
这些select器可以简化为最小的“body.path.path”，但它可能不够孤立。
这在客户端逻辑中也是有用的，因为这个select器可以用来确定JavaScript中的path
$("body.home").doSomethingSpecificToHome
这样你的模板有很less的逻辑。
现在，我不认为有一种方法来自动设置“currentPath”根据URL。 基于'url'的'helpers'：'path'可能是有用的。
非常灵活不重复：
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}
您需要设置页面的当前标题 。
类似@ netAction的post，但依赖于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 });