javascript - 将类添加到当前导航项

Question

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

我有以下页面结构:

- 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 文件，但没有用。

Answer 1

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

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

假设您在第一个博客文章页面上，您会看到类似以下内容:

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

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

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

这对于文章索引页应该仍然有效，Harp 的 current object看起来像:

{
  source: "index"
  path: [
    "articles",
    "index"
  ]
}