web-dev-qa-db-fra.com

Jade: Modifier l'élément de menu actif dans le modèle parent

J'ai une barre de navigation dans mon modèle de jade parent et j'aimerais mettre en surbrillance l'élément actuellement affiché. Donc, si je suis sur la page du blog, 

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

Sans copier la structure de la barre de navigation dans chaque modèle enfant, existe-t-il un moyen de permettre au modèle parent de voir quelle page il est en train d'étendre et d'appliquer la classe active en conséquence?

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';
68
Pickels

Voici un moyen plus simple:

Utilisez ceci dans votre layout.jade (où nav est le nom de la page active. Nav = 'about' par exemple)

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

Alors mettez ceci est votre CSS:

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

La seule règle css applicable est celle dont la classe ul existe. Vous devrez transmettre une variable nav égale à "environ", "à la maison", "contact" ou "blog", selon la page sur laquelle vous vous trouvez.

8
Costa

Utilisez l'objet Objet actuel avec une expression ternaire. Tout est dans la documentation.

Vous pouvez utiliser les propriétés de l'objet pour générer votre menu actif comme suit. Si vous souhaitez utiliser des dossiers dans votre menu de navigation (version 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

3
lraboteau

Eh bien, la solution ci-dessus est très claire, mais si quelqu'un cherche plus de contrôles sur les menus, un module est disponible pour node.js. Utilisez ceci et vous auriez un contrôle complet sur les menus.

Cas d'utilisation: lorsque les menus sont visibles en fonction des rôles

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

0
Irfan Raza