19

我有一个布局 Jade 视图，它有一个通过无序列表提供的菜单，我想将其设置为<li>在<li class="active">...</li>浏览器中呈现当前页面时。

我假设我必须访问当前请求以确定何时在<li>

我找不到任何有关如何执行此操作的示例，因此希望有人可以提供帮助

谢谢

4

5 回答 5

37

在您的路线中调用 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，不知道如何在jade中回显）：

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

然后使用 jQuery，您可以从 body 中获取路径并附加一个活动类：

$(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');
});
于 2012-10-04T20:26:38.577 回答
8

这是一种更简洁的方法，服务器端：

在您的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并节省您自己始终必须将其显式提供给视图。

然后在您的翡翠模板中循环链接数组并将活动类设置在其键与提供的部分匹配的类上：

ul(class='nav nav-list')
  - navLinks.forEach(function(link){
    - var isActive = (link.key == section ? 'active' : '')
    li(class=isActive)
      a(href=link.path)= link.label
  - })
于 2012-10-18T15:47:20.897 回答
2

在你的路由文件中传递 req.originalUrl。例如：在你的 /routes/about.js

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

然后，在你的玉模板上写下 if else 条件

    if(url==='/about-us')
     li(class='active')
      a(href='about-us') About Us
    else
     li
      a(href='about-us') About Us
于 2014-08-10T10:09:16.183 回答
1

您可以在 app.js 中使用全局变量，例如：

// 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

像这样，您可以在您的视图文件中全局使用“current_url”

于 2018-04-07T15:21:56.520 回答
0

我想出了这个可行的方法，但是我不确定它是否是最佳实践。请让我知道任何一种方式：

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
于 2012-10-04T20:12:17.337 回答