Node.js Express + Jade (Active Class on Lined Item)

Question

Как установить активный тег для класса в зависимости от URL-адреса?

В приведенном ниже примере '/' (Home) установлено значение active.

.nav-collapse.collapse 
    ul.nav.top-2 
    li.active 
     a(href='/') Home 
    li 
    li 
     a(href='/about') About 
    li 
    li 
     a(href='/contact') Contact 
    li 

Было бы лучше ввести что-то на страницу, чтобы определить ее как активную страницу?

Answer 1

Взгляните на условные обозначения нефрита, задокументированные на GitHub. Вы хотели бы пройти путь к визуализации Экспресс как так:

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

Тогда в Джейд, вы бы использовать условие следующим образом:

if path == 'home' 
    //active styling 
else 
    //not active 

Answer 2

Вы можете также рассмотреть возможность добавления идентификатора для тела тега , и вам расскажут, на какой странице вы находитесь. И тогда вы можете указать простые правила CSS, зависящие от этого id. Это очень популярная схема, например, предоставленная Wordpress.

Для этого идентификатора вы можете использовать переменную Jade, предоставляемую методом визуализации.

В вашем экспресс-код:

res.render('/', { id : 'home' }); 

В шаблон:

body##{id} 

и позже в ul.nav

li.home 
    a(href='/') Home 
li 
li.about 
    a(href='/about') About 
li 
li.contact 
    a(href='/contact') Contact 

В CSS:

#home ul.nav li.home { 
    background: red; 
} 

#about ul.nav li.about { 
    background: red; 
} 

Answer 3

Вот что я делаю, как пример hexacyanide, в

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

..и в layout.jade:

.nav-collapse.collapse 
    ul.nav.top-2 
    li(class=path=='/'?'active':undefined) 
     a(href='/') Home 
    li(class=path=='/about'?'active':undefined) 
     a(href='/about') About 
    li(class=path=='/contact'?'active':undefined) 
     a(href='/contact') Contact