Question

我有一个Jade视图布局，其中包含一个无序列表菜单，我希望在浏览器中呈现当前页面时将<li>设置为<li class="active">...</li>。

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

我找不到任何关于如何做到这一点的例子，希望有人可以提供帮助

由于

Answer 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，不知道如何在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');
});

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

Answer 3

在路线文件中传递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

Answer 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

Answer 5

你可以在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”

在Express / Jade视图中访问当前请求

5 个答案: