2

我有一个关于向当前菜单项添加类的简单问题。

我有以下页面结构：

- index.jade
- about.jade
- articles/
  - _data.json
  - index.jade
  - blog-post-1.jade
  - blog-post-2.jade
- contact.jade

现在我创建了一个名为: 的类.active，它仅适用于根页面（index、about和contact），但是当我单击/articles活动类时，它不会被添加到li菜单中的文章中。

我正在使用 Harp 网站上的这段代码片段：

ul
  li(class="#{ current.source == 'index' ? 'active' : '' }")
    a(href="/") Home
  li(class="#{ current.source == 'about' ? 'active' : '' }")
    a(href="/about") About
  li(class="#{ current.source == 'articles' ? 'active' : '' }")
    a(href="/articles") Articles
  li(class="#{ current.source == 'contact' ? 'active' : '' }")
    a(href="/contact") Contact

无论我尝试什么，我似乎都无法让.active菜单类在/articles任何文章页面上工作：articles/blog-post-1等等articles/blog-post-2。

同样在我看到的 Harp 网站上，您可以添加：

{
  path: ["articles", "hello-world"],
  source: "hello-world"
}

但我不确定在哪里添加它。我将它添加到articles/_data.json文件中但没有用。

4

1 回答 1

3

因此，您实际上不必添加当前源和当前路径，这是 Harp 在您的模板中提供的功能之一。您可以随时在页面上显示它，如下所示：

pre: code= JSON.stringify(current, 0, 2)

假设你在第一个博客文章页面上，你会得到类似的东西：

{
  source: "blog-post-1"
  path: [
    "articles",
    "blog-post-1"
  ]
}

所以在这种情况下，你的导航没有被激活，因为current.sourceis 实际上不是articles，它是blog-post-1or blog-post-2。解决问题的最快方法是：

li(class="#{ current.path[0] === 'articles' ? 'active' : '' }")
  a(href="/articles") Articles

这对于文章索引页面应该仍然有效，其中 Harp 的current对象将如下所示：

{
  source: "index"
  path: [
    "articles",
    "index"
  ]
}
于 2016-03-02T21:23:10.503 回答