如何正确配置EJS Partials？实现多页面侧边栏标题差异化

这问题我之前也碰到过，EJS的partial传参其实有几种简单灵活的方式，完全能满足你这种不同页面复用partial但需要自定义标题的需求，我给你整理两种最常用的方案：

方法1：Include时直接传递局部变量 #

这是最直观的方式，在每个页面引入侧边栏partial的时候，直接把标题作为参数传进去就行。

首先，你的侧边栏partial（比如命名为sidebar.ejs）需要接收这个标题变量：

<!-- sidebar.ejs -->
<div class="sidebar">
  <h2><%= sidebarTitle %></h2>
  <!-- 侧边栏其他固定内容 -->
</div>

然后在notification.ejs里引入时传入对应标题：

<!-- notification.ejs -->
<%- include('sidebar', { sidebarTitle: 'notification' }) %>
<!-- 页面其他业务内容 -->

到了promotions.ejs里，只需要换个标题传值：

<!-- promotions.ejs -->
<%- include('sidebar', { sidebarTitle: 'promotions' }) %>
<!-- 页面其他业务内容 -->

这种方式的好处是每个页面完全独立控制标题，不依赖全局变量，逻辑清晰，适合页面之间标题关联性不强的场景。

方法2：通过后端渲染时传递页面变量 #

如果你的页面是通过Express这类后端框架渲染的，也可以在路由层把侧边栏标题作为渲染数据的一部分传进去，侧边栏partial直接读取这个变量即可。

比如Express路由示例：

// 渲染notification页面
app.get('/notification', (req, res) => {
  res.render('notification', { 
    pageTitle: '通知中心',
    sidebarTitle: 'notification' // 传递侧边栏标题
  });
});

// 渲染promotions页面
app.get('/promotions', (req, res) => {
  res.render('promotions', { 
    pageTitle: '优惠活动',
    sidebarTitle: 'promotions'
  });
});

这时候侧边栏partial依然用<%= sidebarTitle %>，每个页面引入时就不用额外传参了：

<!-- notification.ejs / promotions.ejs -->
<%- include('sidebar') %>

这种方式适合页面标题、侧边栏标题需要联动，或者需要在页面多个地方复用同一变量的场景。

小补充：加个默认值防空白 #

如果担心某个页面忘记传标题导致显示空白，可以在侧边栏partial里设置一个默认值：

<!-- sidebar.ejs -->
<h2><%= sidebarTitle || '默认侧边栏标题' %></h2>

这样就算没传参数，也会显示默认标题，避免页面出现异常。

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