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です。

また、私が見たハープのサイトでは、次を追加できます。

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

しかし、どこに追加すればよいかわかりません。ファイルに追加しましたが、articles/_data.json機能しませんでした。

4

1 に答える 1

3

そのため、現在のソースと現在のパスを実際に追加する必要はありません。これは、Harp がテンプレートで使用できるようにするものの 1 つです。次のように、いつでもページに表示できます。

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これは、Harp のオブジェクトが次のように表示される記事のインデックス ページでも機能するはずです。

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