node.js + jade + express: ¿Cómo puedo crear una navegación que establecerá la clase activa si la ruta coincide con

Question

He encontrado el siguiente código pero el problema es que habrá una duplicación de la etiqueta de anclaje para cada menú item.Is hay una mejor manera de hacer esto?

   ul.nav 
        - if(menu="Home") 
         li.active 
          a(href="#") Dashboard 
        else 
         li 
          a(href="#") Dashboard 
        li 
         a(href="#") About 
        li 
         a(href="#") Contact 

Answer 1

Esto tiene un poco menos de duplicación.

ul.nav 
    each name in ["Dashboard", "About", "Contact"] 
    if (menu=="Home") 
     li.active 
     a(href="#")= name 
    else 
     li 
     a(href="#")= name 

adquirir esta clase de active podría ser mejor simplemente hacer en javascript o tal vez usted puede conseguir la presentación que necesita con el selector CSS recta a:active.

Answer 2

creo que es mejor establecer una clase cuerpo a la trayectoria de la corriente al igual que

body(class = currentPath) 

Así que luego se puede utilizar selectores como

body.home .nav li.home, body.dashboard .nav li.dashboard { 
    Style when current path 
} 

Estos selectores se pueden reducir al mínimo del cuerpo ' .path .path 'pero puede no ser lo suficientemente aislado.

Esto también será útil en la lógica del lado del cliente como este selectores podrían utilizarse para determinar la ruta en su JavaScript con algo como

$("body.home").doSomethingSpecificToHome 

De esta manera su plantilla tiene mucho menos lógica.

Ahora, no creo que haya una forma de establecer "currentPath" automáticamente dependiendo de la URL. Un ayudante basado en un 'url': 'ruta' puede ser útil.

Answer 3

encontrado esto en otra question that was similar:

Utilice un ternario en cada "li"

ul 
    li(class=(title === 'Home' ? 'active' : '')) 
     a(href='#') Home 
    li(class=(title === 'Dashboard' ? 'active' : '')) 
     a(href='#') Dashboard 

Puede configurar sus rutas para pasar el valor "menú" en lugar de utilizar "título" si quieres :

exports.index = function(req, res) { 
    res.render('index', {title: 'Home', menu: 'Home'}); 
} 

Answer 4

Aquí hay una alternativa que proporciona una mayor flexibilidad en términos de texto de anclaje y href que la solución de Pedro.

nav 
    // suppose title local denotes the active nav item 
    - var nav = {}; nav[title] = 'active' 
    ul 
    // pass title to li class via nav object 
    li(class='#{nav.Home}') 
     // different href and anchor text 
     a(href='/') Home 
    li(class='#{nav.About}') 
     a(href='/about') About 
    li(class='#{nav.Contact}') 
     a(href='/contact') Contact 

La advertencia es que los li que no están activas tendrán una clase undefined, que no hace daño en la mayoría de los casos.

Answer 5

Muy flexible sin duplicación:

ul 
    each menuitem in [{title:'Home',url:'/'},{title:'About',url:'/about'},{title:'Contact',url:'/contact'}] 
    if (menuitem.title == title) 
     li.active 
     a.active(href=menuitem.url) #{menuitem.title} 
    else 
     li 
     a(href=menuitem.url) #{menuitem.title} 

Es necesario que ajuste de la página actual título.

Answer 6

Puede pasar el pageName en los datos.

each menu in ["Home", "Dashboard", "Contact", "About"] 
    if (menu == pageName) 
     li.active 
     a(href="/#{menu}")= menu 
    else 
     li 
     a(href="/#{menu}")= menu 

Puede llamar render

res.render("index", { pageName: 'Home'}) 

res.render("index", { pageName: 'Dashboard'}) 

res.render("index", { pageName: 'Contact'}) 

Answer 7

Al igual que en el post de @ NetAction, pero depende de la dirección URL y no en el título.

each menuitem in [{title:'Home',url:'/'},{title:'About',url:'/about'},{title:'Contact',url:'/contact'}] 
    if (path == menuitem.url) 
     li.active 
      a.active(href=menuitem.url) #{menuitem.title} 
    else 
     li 
      a(href=menuitem.url) #{menuitem.title} 

Combinado con

app.use(function(req, res, next) { 
    res.locals = { 
     isAuthenticated: req.isAuthenticated(), 
     path :req.path 
    } 

    next(); // make sure we go to the next routes and don't stop here 
});