將課程添加到當前的導航項

Question

我有一個簡單的問題，就是向當前的菜單項添加一個類。

我有以下頁面結構：

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

現在，我創建了一個叫做類：.active，它僅適用於根頁面（指數，約和接觸），但是當我點擊/articles活動類未被添加到文章li在菜單中。

我使用此代碼段從豎琴網站：

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等等。

同樣在豎琴現場我看到，您可以添加：

{ 
    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 

這仍然應該對文章的索引頁以及工作，在豎琴的current object將看起來像：

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