將類別添加到當前導航項

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 ，未將活動類添加到菜單中的article 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

這同樣也適用於Articles索引頁面，Harp的current對象如下所示：

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