31

我的父玉模板中有一个导航栏，我想突出显示当前正在查看的项目。所以如果我在博客页面上，

ul
  li Home
  li.active Blog
  li Contact Us
  li About

如果不将导航栏结构复制到每个子模板中，有没有办法让父模板查看它正在扩展的页面并active相应地应用类？

4

4 回答 4

70

父级玉

doctype 5

html
  block link
    -var selected = 'home'; //default

  -var menu = { 'home': '/home', 'blog': '/blog', 'contact': '/contact' };

  body
    nav
      ul
        each val, key in menu
          li
            if selected === key
              a.selected(href=val, title=key)= key
            else
              a(href=val, title=key)= key

子玉

extends parent

block link
  -var selected = 'blog';
于 2013-03-31T16:46:11.347 回答
8

这是一个更简单的方法：

在你的 layout.jade 中使用它（nav例如，活动页面的名称在哪里。nav = 'about'）

ul(class="#{nav}")
  li.home Home
  li.blog Blog
  li.contact Contact Us
  li.about About

然后把这是你的CSS：

ul.home li.home,
ul.blog li.blog,
ul.contact li.contact,
ul.about li.about {
    color: red;
}

唯一适用的 CSS 规则是其ul类存在的规则。您需要传入一个nav等于“about”、“home”、“contact”或“blog”的变量，具体取决于您所在的页面。

于 2014-12-16T21:55:38.823 回答
5

将 Current 对象与三元表达式一起使用。一切都在文档中。

您可以像这样使用对象属性来生成活动菜单。如果您想在导航菜单中使用文件夹（Jade 版本）：

ul(class="nav-menu")
            li: a(class="#{ current.path[0] === 'index' ? 'active' : '' }", href="/") home
            li: a(class="#{ current.path[0] === 'about' ? 'active' : '' }", href="/about/") about

于 2016-03-07T06:03:50.033 回答
0

好吧，上面的解决方案非常清楚，但是如果有人正在寻找更多对菜单的控制，那么有一个可用于 node.js 的模块。使用它，您将完全控制菜单。

用例：当菜单基于角色可见时

https://www.npmjs.com/package/active-menu

于 2016-03-22T00:07:41.813 回答