Node.js + jade + express: как создать навигацию, которая будет устанавливать класс активным, если путь соответствует

Ответ 1

Это немного меньше дублирования.

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

Добавление класса active может быть лучше всего сделано в javascript или, возможно, вы сможете получить представление, которое вам нужно, с помощью прямого селектора CSS a:active.

Ответ 2

Нашел это в другом вопросе который был похож:

Использовать тройку на каждом "ли"

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

Вы можете настроить маршруты для передачи значения "меню", а не "title", если хотите:

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

Ответ 3

Здесь альтернатива, которая обеспечивает большую гибкость с точки зрения текста привязки и href, чем решение Peter.

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

Предостережение состоит в том, что те li, которые неактивны, будут иметь класс undefined, который не повредит в большинстве случаев.

Ответ 4

Вы можете передать имя страницы в данных.

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

Вы можете вызвать рендер

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

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

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

Ответ 5

Я думаю, что лучше установить класс body на текущий путь, например

body(class = currentPath)

Таким образом, вы можете использовать селектор, например

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

Эти селекторы могут быть сведены к минимальному 'body.path.path', но это может быть недостаточно изолировано.

Это также будет полезно в логике на стороне клиента, поскольку эти селекторы могут использоваться для определения пути в вашем JavaScript с чем-то вроде

$("body.home").doSomethingSpecificToHome

Таким образом, ваш шаблон имеет намного меньше логики.

Теперь я не думаю, что есть способ установить "currentPath" автоматически в зависимости от URL-адреса. Помощники, основанные на "url": "путь", могут быть полезны.

Ответ 6

Очень гибкий без дублирования:

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}

Вам нужно установить текущий заголовок страницы.

Ответ 7

Аналогично сообщению @netAction, но зависит от URL-адреса, а не от названия.

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}

В сочетании с

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
});