Node.js Express应用EJS模板如何动态设置激活tab标签？

你现有代码的核心问题是菜单配置耦合在模板中、存在无效逻辑bug、模板存在重复冗余代码，可通过以下步骤优化：

1. 抽离公共菜单配置 #

将硬编码在模板中的菜单数组单独抽为全局配置文件，避免每次渲染模板重复声明，后续修改菜单仅需改这一处：
创建config/menu.js文件，代码如下：

module.exports = [
  { 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' }
]

2. 优化中间件逻辑 #

修复原有中间件的无效判断bug，将菜单配置和激活状态直接挂载到res.locals（符合Express模板变量传递的最佳实践），修改后的中间件代码：

// 顶部引入公共菜单配置
const siteMenu = require('./config/menu')

app.use(function(req, res, next){
  res.locals.title = "Marker"
  // 直接将菜单配置传递给所有模板
  res.locals.menu = siteMenu
  // 计算当前激活路径段，首页为空时默认设为home
  const pathSegment = req.path.split('/')[1] || 'home'
  res.locals.activeState = pathSegment.toLowerCase()
  next()
})

3. 简化模板渲染逻辑 #

删除模板中硬编码的菜单数组，用三元表达式动态添加激活类，去掉重复的li标签代码，优化后的模板代码：

<!-- ======= 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>
        <% for (let item of menu) { 
          const itemSegment = item.url.split('/')[1] || 'home'
          const isActive = itemSegment.toLowerCase() === activeState
        %> 
          <li>
            <a 
              class="nav-link scrollto <%= isActive ? 'active' : '' %>" 
              href="<%= item.url %>"
            >
              <%= item.name %>
            </a>
          </li>
        <% } %>
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i>
    </nav><!-- .navbar -->
  </div>
</header><!-- End Header -->

优化收益 #

• 代码复用性提升：菜单配置全局统一，修改无需调整模板
• 逻辑可靠性提升：修复了原有req.length的无效判断bug，首页激活状态不会失效
• 代码精简：模板冗余代码减少50%以上，可读性更高
• 耦合度降低：激活匹配逻辑和菜单名称解耦，后续修改菜单显示名无需调整匹配规则

内容的提问来源于stack exchange，提问作者uday