Jade：更改父模板中的活动菜单项 [英] Jade: Change active menu item in parent template

问题描述

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

I have a navigation bar in my parent jade template and I'd like to highlight the item which is currently in view. So if I'm on the blog page,

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

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

Without copying the navigation bar structure into each child template, is there a way to have the parent template see what page it's extending and apply the active class accordingly?

推荐答案

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

$ b

child.jade

extends parent

block link
  -var selected = 'blog';

这篇关于Jade：更改父模板中的活动菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！