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

Question

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

31

我在父级Jade模板中有一个导航栏，我希望能够突出显示当前正在查看的项目。因此，如果我在博客页面上，

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

在不将导航栏结构复制到每个子模板中的情况下，有没有一种方法让父模板看到它正在扩展的页面，并相应地应用active类？

- Adam Grant

JavaScript是您最好的选择。 - Ven

我不同意。在使用JS hack之前，我会在子模板中重复这个结构。 - Adam Grant

我只是想展示一下如果你把所有东西都内联的话会是什么效果。代码看起来非常糟糕。 - Ven

请参见 https://dev59.com/AHXYa4cB1Zd3GeqP75V8#18214564 - smonff

4个回答

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

- Costa Michailidis

如果你正在使用Sass，你也可以尝试这样做：http://codepen.io/ajkochanowicz/pen/zGvgxz - Adam Grant

嘿，我也做了同样的事情，但在检查器中它显示“未定义”。我的导航在一个单独的.jade文件中（我是jade的新手）我做错了什么？ - moeses

@moesphemie - 现在有点晚了，但请确保您将“var nav ='home'”定义放在Jade中的正确块内。 - itchyspacesuit

5

使用三元表达式与当前对象。所有内容都在文档中。

您可以使用对象属性生成活动菜单，例如以下方式。如果要在导航菜单（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

- lraboteau

当前的Jade版本似乎无法正常工作： ` 24| #navbar.collapse.navbar-collapse 25| ul.nav.navbar-nav

26| li(class="#{ current.path[0] == 'index' ? 'active' : '' }") 27| a(href='/') Main 28| li(class="#{ current.path[0] == 'sub' ? 'active' : '' }") 29| a(href='#sub') Subscribe

无法读取未定义的属性"path" - JD Allen

0

好的，以上解决方案非常清晰，但如果有人想要更多控制菜单，则可以使用适用于Node.js的模块。使用它，您将完全控制菜单。

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

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

- Irfan Raza

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pickels · Accepted Answer

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