Jade模板条件类Node.js Express.js

Question

我有一个使用Bootstrap标记的Jade模板文件来显示网站的头部。根据用户所在的页面，导航栏需要添加类.active到相应的导航项中。如何避免编写冗长的代码来实现此目的是最好的方式。

header.jade

if nav=='home'
   li.active
      a(href="/") Home
else
   li
      a(href='/') Home
if nav=='about'
   li.active
      a(href='/about') About
else
   li
      a(href='/about') About

路由

router.get('/about', function(req, res) {
   res.render('about', { nav:'about' });
});

请注意，如果头部有更多链接，它将变得更长。有没有更好的方法来添加类“active”到正在浏览的页面？

谢谢 Tyler

- Tyler Evans

---

这个导航栏是全部硬编码的吗？你能重构一下，使用循环吗？有一些朝着那个方向的选项... - Matthew Bakaitis

嗨，通常情况下它是硬编码的...但一旦用户登录后就会改变...不知道这是否有帮助。 - Tyler Evans

Answer 1

您可以创建一个 mixin 来处理列表项的渲染。这样您的逻辑代码就不必重复了：

mixin header-item(name, url)
  if name.toLowerCase() == nav
    li.active
      a(href=url)= name
  else
    li
      a(href=url)= name

+header-item('Home', '/')
+header-item('About', '/about')

- user142162