Question

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

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

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

Answer 1

<强> parent.jade

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

<强> child.jade

extends parent

block link
  -var selected = 'blog';

Answer 2

这是一种更简单的方法：

在layout.jade中使用此功能（其中nav是活动页面的名称.nav =＆＃39; about＆＃39;例如）

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，该变量等于＆＃39;，＆＃39; home＆＃39;，＆＃39; contact＆＃39;或者＆＃39;博客＆＃39;取决于您所在的页面。

Answer 3

使用带有三元表达式的Current object。一切都在文档中。

您可以使用对象属性来生成活动菜单。如果要在导航菜单中使用文件夹（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

Answer 4

嗯，上面的解决方案很清楚，但是如果有人正在查看菜单上的更多控件，那么node.js就有一个模块可用。使用此功能即可完全控制菜单。

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

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

Jade：更改父模板中的活动菜单项

4 个答案: