Acceda a la solicitud actual en vista Express / Jade

Tengo una vista de diseño de Jade que tiene un menú a través de una lista desordenada, y quiero configurar

  • para que sea
  • ...
  • cuando la página actual se muestre en el navegador.

    Supongo que tendré que acceder a la solicitud actual para determinar cuándo establecer el atributo en

  • No puedo encontrar ningún ejemplo de cómo hacer esto, así que espero que alguien pueda ayudar

    Gracias

    Intente esto antes de su llamada res.render () en su ruta:

     res.locals.path = req.path; res.render('/page'); 

    o

     res.render('/page', { path: req.path }); 

    Entonces tendría que hacer un montón de declaraciones if / else en su vista (como sugiere la solución anterior).

     - if(currentUrl === '/') li(class='active') a(href='/') Current Driver Standings - else li a(href='/') Current Driver Standings 

    Sin embargo, prefiero hacer esto en el lado del cliente, para mantener mis archivos de plantilla libres de tanta lógica como sea posible:

    En el archivo de plantilla de página (esto es ejs, no estoy seguro de cómo hacer eco en jade):

      

    Luego, con jQuery puedes tomar el camino del cuerpo y adjuntar una clase activa:

     $(function(){ var path = $('body').attr('data-path'); $('nav li a[href='+path+']').parents('li').addClass('active'); }); 

    Actualización: también puede usar var path = window.location.pathname lugar de guardarlo en un atributo en el body

     //no need to save path to  tag first: $(function(){ var path = window.location.pathname; $('nav li a[href='+path+']').parents('li').addClass('active'); }); 
  • Aquí hay una manera mucho mejor de hacerlo, del lado del servidor:

    En su routes.js (o donde sea) defina una matriz de objetos que representan su navegación como:

     var navLinks = [ { label: 'Home', key: 'home', path: '' }, { label: 'About', key: 'about', path: '/about' }, { label: 'Contact', key: 'contact', path: '/contact' } ] 

    Pase la variable navLinks a su vista, así como la clave del elemento que desea resaltar:

     res.render('home', { title: 'Welcome!', section: 'home', navLinks: navLinks }); 

    También puede agregar la variable navLinks a app.locals y ahorrarse siempre teniendo que proporcionarla explícitamente a las vistas.

    Luego, en su plantilla de jade, recorra el conjunto de enlaces y establezca la clase activa en aquella cuya clave coincida con la sección provista:

     ul(class='nav nav-list') - navLinks.forEach(function(link){ - var isActive = (link.key == section ? 'active' : '') li(class=isActive) a(href=link.path)= link.label - }) 

    Pase el req.originalUrl en su archivo de rutas. Ejemplo: en su /routes/about.js

     router.get('/', function(req, res) { res.render('about', { url: req.originalUrl }); }); 

    A continuación, escriba si otra condición en su plantilla de jade

      if(url==='/about-us') li(class='active') a(href='about-us') About Us else li a(href='about-us') About Us 

    Se me ocurrió algo que funciona, sin embargo, no estoy seguro de si es la mejor práctica. Por favor, hágamelo saber de cualquier manera:

     response.render("current/currentSchedule", { title: "Current Race Schedule", currentUrl: req.path, }); ul(class='nav nav-list') li(class='nav-header') Current Season - if(currentUrl === '/') li(class='active') a(href='/') Current Driver Standings - else li a(href='/') Current Driver Standings - if(currentUrl === '/constructor-standings') li(class='active') a(href='/constructor-standings') Current Constructor Standings - else li a(href='/constructor-standings') Current Constructor Standings - if(currentUrl === '/current-schedule') li(class='active') a(href='/current-schedule') Current Race Schedule - else li a(href='/current-schedule') Current Race Schedule 

    Puedes usar variables globales en app.js como:

     // Global vars app.use( function ( req, res, next ) { // rest of your code ... res.locals.current_url = req.path; // rest of your code ... next(); } ); // then in your .jade file: 
     ul.navbar-nav.mr-auto li(class="nav-item #{ current_url === '/page1' ? 'active' : ''}") a.nav-link(href='/page1') Page1