web-dev-qa-db-ja.com

Jade：親テンプレートのアクティブメニュー項目を変更

親のヒスイのテンプレートにナビゲーションバーがあり、現在表示されているアイテムを強調表示したい。だから私がブログページにいるなら、

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

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

htmlpug
31
Adam Grant

parent.jade

doctype 5

html
  block link
    -var selected = 'home'; //default

  -var menu = { 'home': '/home', 'blog': '/blog', 'contact': '/contact' };

  body
    nav
      ul
        each val, key in menu
          li
            if selected === key
              a.selected(href=val, title=key)= key
            else
              a(href=val, title=key)= key

child.jade

extends parent

block link
  -var selected = 'blog';
69
Pickels

ここに簡単な方法があります：

これを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クラスが存在するものです。使用しているページに応じて、「about」、「home」、「contact」、または「blog」に等しい変数navを渡す必要があります。

8
Costa

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

オブジェクトのプロパティを使用して、アクティブメニューを生成できます。ナビゲーションメニューでフォルダを使用する場合（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
4
lraboteau

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

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

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

0
Irfan Raza