Question

如何根据URL设置活动标签？

在下面的示例中，'/'（Home）设置为活动状态。

.nav-collapse.collapse
  ul.nav.top-2
    li.active
      a(href='/') Home
    li
    li
      a(href='/about') About
    li
    li
      a(href='/contact') Contact
    li

在页面中注入一些内容以将其标识为活动页面会更好吗？

Answer 1

这就是我的工作，例如六氰化物的例子，

res.render('/path', {
  path: req.path
});

..并在layout.jade中：

.nav-collapse.collapse
  ul.nav.top-2
    li(class=path=='/'?'active':undefined)
      a(href='/') Home
    li(class=path=='/about'?'active':undefined)
      a(href='/about') About
    li(class=path=='/contact'?'active':undefined)
      a(href='/contact') Contact

Answer 2

您还可以考虑将ID添加到body标签，并告诉您您是哪个页面。然后，您可以指定依赖于该ID的简单CSS规则。这是非常受欢迎的方案，例如由Wordpress提供。

对于此id，您可以使用render方法提供的Jade变量。

在快递代码：

中

res.render('/', { id : 'home' });

在模板：

中

body##{id}

以及稍后的ul.nav

li.home
  a(href='/') Home
li
li.about
  a(href='/about') About
li
li.contact
  a(href='/contact') Contact

在 CSS ：

中

#home ul.nav li.home {
    background: red;
}

#about ul.nav li.about {
    background: red;
}

Answer 3

查看Jade的条件，记录在GitHub上。您可能希望将路径传递给Express中的渲染，如下所示：

res.render('/path', {
  path: req.path
});

然后在Jade中，你会像这样使用条件：

if path == 'home'
  //active styling
else
  //not active

Node.js Express + Jade（内衬物品上的活动类）

3 个答案: