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

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 ='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' 的变量,具体取决于您所在的页面.

Answer 3

将 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