Доступ к текущему запросу в режиме Express/Jade

У меня есть представление Jade, которое имеет меню через неупорядоченный список, и я хочу установить <li> как <li class="active">...</li>, когда текущая страница отображается в браузере.

Я предполагаю, что мне нужно будет получить доступ к текущему запросу, чтобы определить, когда устанавливать атрибут на <li>

Я не могу найти примеров того, как это сделать, поэтому надеемся, что кто-то сможет помочь

Спасибо

Ответ 1

Попробуйте это до вашего вызова res.render() на вашем маршруте:

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

или

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

Тогда вам нужно будет сделать кучу утверждений if/else в вашем представлении (как предлагает вышеприведенное решение).

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

Однако я предпочитаю делать это на стороне клиента, чтобы файлы моих шаблонов были свободны от максимально возможной логики:

В файле шаблона страницы (это ejs, не уверен, как эхо в нефрите):

<body data-path="<%= path %>">

Затем с помощью jQuery вы можете захватить путь из тела и присоединить активный класс:

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

Обновление: Вы также можете просто использовать var path = window.location.pathname вместо сохранения его в атрибуте body

//no need to save path to <body> tag first:

$(function(){
    var path = window.location.pathname;
    $('nav li a[href='+path+']').parents('li').addClass('active');
});

Ответ 2

Здесь гораздо более простой способ сделать это, серверная сторона:

В вашем routes.js (или везде) определите массив объектов, представляющих ваш навигатор, например:

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

Передайте переменную navLinks в свой вид, а также ключ элемента, который вы хотели бы высветить:

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

Вы также можете добавить переменную navLinks в app.locals и сохранить ее, всегда предоставляя ее явно представлениям.

Затем в вашем шаблоне шаблона jade через массив ссылок и установите активный класс на том, чей ключ соответствует предоставленному разделу:

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

Ответ 3

Передайте req.originalUrl в файле маршрутов. пример: в вашем /routes/about.js

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

Затем напишите, если условие else на вашем шаблоне нефрита

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

Ответ 4

Я придумал то, что работает, но я не уверен, что его лучшая практика. Пожалуйста, дайте мне знать в любом случае:

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