31

親の jade テンプレートにナビゲーション バーがあり、現在表示されているアイテムを強調表示したいと考えています。ブログページにいる場合は

ul
  li Home
  li.active Blog
  li Contact Us
  li About

ナビゲーション バーの構造を各子テンプレートにコピーせずに、親テンプレートが拡張しているページを認識し、activeそれに応じてクラスを適用する方法はありますか?

4

4 に答える 4

8

より簡単な方法は次のとおりです。

これをlayout.jadeで使用します（navはアクティブなページの名前です.nav = 'about'など）

ul(class="#{nav}")
  li.home Home
  li.blog Blog
  li.contact Contact Us
  li.about About

次に、これをあなたのCSSに入れます：

ul.home li.home,
ul.blog li.blog,
ul.contact li.contact,
ul.about li.about {
    color: red;
}

適用される唯一の css ルールは、ulクラスが存在するものです。nav現在のページに応じて、「about」、「home」、「contact」、または「blog」に等しい変数を渡す必要があります。

于 2014-12-16T21:55:38.823 に答える
5

三項式でCurrent オブジェクトを使用し ます。すべてはドキュメントにあります。

オブジェクトのプロパティを使用して、アクティブなメニューを生成できます。ナビゲーション メニュー (Jade バージョン) でフォルダを使用する場合:

ul(class="nav-menu")
            li: a(class="#{ current.path[0] === 'index' ? 'active' : '' }", href="/") home
            li: a(class="#{ current.path[0] === 'about' ? 'active' : '' }", href="/about/") about

于 2016-03-07T06:03:50.033 に答える
0

上記の解決策は非常に明確ですが、誰かがメニューをさらにコントロールしたい場合は、node.js で利用できるモジュールがあります。これを使用すると、メニューを完全に制御できます。

ユースケース: ロールに基づいてメニューが表示される場合

https://www.npmjs.com/package/active-menu

于 2016-03-22T00:07:41.813 に答える