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

【问题标题】：Jade: Change active menu item in parent templateJade：更改父模板中的活动菜单项
【发布时间】：2013-03-21 02:57:54
【问题描述】：

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

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

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

【问题讨论】：

javascript 是你最好的选择
我不同意。在我使用 JS hack 之前，我会在子模板中重复这个结构。
我只是想展示如果你要内联所有内容会是什么样子。代码看起来很糟糕
另见stackoverflow.com/a/18214564/954777

标签： html pug

【解决方案1】：

这里有一个更简单的方法：

在您的 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”，具体取决于您所在的页面。

【讨论】：

如果你使用 Sass，你也可以这样做：codepen.io/ajkochanowicz/pen/zGvgxz
嘿，我也做了同样的事情，但在检查器中显示“未定义”。我在一个单独的 .jade 文件中有我的导航（我是翡翠新手?）我做错了什么？
@moesphemie - 现在有点晚了，但请确保您将“var nav= 'home'” 定义放在翡翠中的正确块内。

【解决方案2】：

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

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

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

【讨论】：

【解决方案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

【讨论】：

似乎不适用于当前 Jade：` 24| #navbar.collapse.navbar-折叠 25| ul.nav.navbar-nav > 26| li(class="#{ current.path[0] == 'index' ? 'active' : '' }") 27| a(href='/') 主 28| li(class="#{ current.path[0] == 'sub' ? 'active' : '' }") 29| a(href='#sub') 订阅无法读取未定义` 的属性“路径”

【解决方案4】：

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';

【讨论】：

是的。这就是我一直在寻找的。谢谢。
真的吗？没有更简单的方法可以做到这一点？ -悲伤的脸-
我正在使用 PyJade，为了让它工作，我必须执行“每个 val，键入 menu.iteritems()”+1 肯定。谢谢
@Costa 解决方案更简单，性能更高，因为它是用 css 完成的，没有迭代，没有 if 语句，没有标签的重复
此解决方案不易维护，因为如果您更改路线名称，您还有也可以在模板中编辑它们的定义。 @Costa 这样的解决方案带来了更强大的解决方案。