如何在nodejsexpress应用程序的ejs模板中动态设置活动选项卡？

Question

这是我的标题模板，它将加载到每个页面。

<!-- ======= Header ======= -->
  <header id="header" class="d-flex align-items-center">
    <div class="container d-flex align-items-center justify-content-between">

      <h1 class="logo"><a href="index.html"><%= title %><span>.</span></a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo"><img src="/assets/img/logo.png" alt=""></a>-->

      <nav id="navbar" class="navbar">
        <ul>
          <% 
          const menu = [
    {
        name: 'Home',
        url: '/'
    },
    {
        name: 'About',
        url: '/about'
    },
    {
      name: 'Services',
      url: '/services'
  },
  {
    name: 'Portfolio',
    url: '/portfolio'
},
{
  name: 'Team',
  url: '/team'
},
{
  name: 'RatesCalculator',
  url: '/ratesCalculator'
},
{
  name: 'Contact',
  url: '/contact'
}
]
          
          
          for ( let i in menu ) { %> 
            <% if ( menu[i].name.toLowerCase() == activestate.toLowerCase() ) { %> 
    
              <li><a class="nav-link scrollto active" href="<%= menu[i].url %>" ><%= menu[i].name %></a></li>
    
            <% } else { %>
    
              <li><a class="nav-link scrollto" href="<%= menu[i].url %>" ><%= menu[i].name %></a></li>
    
            <% } %>
        <% } %>
       
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

要动态设置它，活动选项卡，我在模板中使用下面的逻辑，在index.js 中使用中间件。

app.use(function(req, res, next){
    console.log(req)
    res.locals.title = "Marker";//To set website title
    req.active = req.path.split('/')[1] // [0] will be empty since routes start with '/'
    if (req.length === 0) req.active = "Home"
    next();
});

它正在工作，但我觉得它有点复杂并且有重复的代码。

您能提出更好的方法吗？

Answer 1

我找到了一个解决方案，使用全局中间件函数将修改后的、隔离的

requestUrl

附加到 EJS 文件中，可以通过三元运算符在 EJS 文件中进行检查。希望这对您有帮助！

快递文件：

    app.use((req, res, next) => {
        const fileExtensionPattern = /\.[0-9a-z]+$/i;
        const requestUrl = req.url.split('?')[0]; // Ignore query parameters
    
        if (!fileExtensionPattern.test(requestUrl) && req.method === 'GET') {
            res.locals.requestUrl = requestUrl.substring(1);
        }
    
        next();
    });

添加到EJS部分：

<% function isActive(tabName) { return activeTab === tabName ? '!bg-pink !text-black' : ''; } %>
   <!-- Used for toggling active states of tabs, function used in style class -->

使用示例：

<a href="#" class="flex items-center p-2 bg-dark hover:bg-pink group rounded-lg  text-white hover:text-black <%- isActive('songs') %>">
           <img src="/svg/icons/headphones.svg" alt="Songs Icon">
           <span class="flex-1 ms-3 whitespace-nowrap">Songs</span>
        </a>