EJS中If语句使用及layout.ejs布局自定义技术问询

首先，咱们先梳理下你当前的布局结构：它包含了顶部导航、左侧导航、内容区、页脚和侧边栏这几个固定部分。要实现不同的布局渲染逻辑，核心思路就是通过给EJS模板传递自定义变量，用if/else条件判断来控制这些部分的显示、隐藏，甚至切换不同的布局片段。

下面给你几种常见场景的具体实现：

场景1：控制单个组件的显示/隐藏 #

比如有些页面（比如登录页、404页）不需要左侧导航或页脚，我们可以在渲染页面时传一个开关变量，在布局里判断是否渲染对应组件。

修改后的layout.ejs代码：

<!-- begin:: Page -->
<div class="m-page">
  <!-- 控制顶部导航是否显示 -->
  <% if (typeof showTopNav !== 'undefined' && showTopNav) { %>
    <%- partial('./partials/topnav.ejs') %>
  <% } %>

  <!-- begin::Body -->
  <div class="m-body">
    <!-- 控制左侧导航是否显示 -->
    <% if (typeof showLeftNav !== 'undefined' && showLeftNav) { %>
      <%- partial('./partials/leftnav.ejs') %>
    <% } %>

    <div class="m-wrapper">
      <%- body %>
    </div>
  </div>
  <!-- end:: Body -->

  <!-- 控制页脚是否显示 -->
  <% if (typeof showFooter !== 'undefined' && showFooter) { %>
    <%- partial('./partials/footer.ejs') %>
  <% } %>
</div>
<!-- end:: Page -->

<!-- 控制侧边栏是否显示 -->
<% if (typeof showSide !== 'undefined' && showSide) { %>
  <%- partial('./partials/side.ejs') %>
<% } %>

然后在你的Express路由里，渲染不同页面时传递对应的变量：

// 渲染需要完整布局的页面（比如首页）
app.get('/', (req, res) => {
  res.render('index', {
    showTopNav: true,
    showLeftNav: true,
    showFooter: true,
    showSide: true
  });
});

// 渲染不需要左侧导航和页脚的页面（比如登录页）
app.get('/login', (req, res) => {
  res.render('login', {
    showTopNav: false,
    showLeftNav: false,
    showFooter: false,
    showSide: false
  });
});

场景2：切换完全不同的布局结构 #

如果需要区分“完整布局”和“极简布局”两种完全不同的结构，可以定义一个layoutType变量，用if-else来切换整个布局框架：

修改后的layout.ejs代码：

<% if (layoutType === 'full') { %>
  <!-- 完整布局结构 -->
  <div class="m-page">
    <%- partial('./partials/topnav.ejs') %>
    <div class="m-body">
      <%- partial('./partials/leftnav.ejs') %>
      <div class="m-wrapper">
        <%- body %>
      </div>
    </div>
    <%- partial('./partials/footer.ejs') %>
  </div>
  <%- partial('./partials/side.ejs') %>
<% } else if (layoutType === 'minimal') { %>
  <!-- 极简布局结构（比如登录、注册页） -->
  <div class="m-minimal-page">
    <div class="m-minimal-wrapper">
      <%- body %>
    </div>
  </div>
<% } else { %>
  <!-- 默认布局（兜底） -->
  <div class="m-page">
    <div class="m-wrapper">
      <%- body %>
    </div>
  </div>
<% } %>

然后在路由里指定布局类型：

// 完整布局页面
app.get('/dashboard', (req, res) => {
  res.render('dashboard', { layoutType: 'full' });
});

// 极简布局页面
app.get('/register', (req, res) => {
  res.render('register', { layoutType: 'minimal' });
});

场景3：动态加载不同的子组件 #

比如不同页面需要不同的顶部导航，可以通过变量指定要加载的组件路径：

<!-- begin:: Page -->
<div class="m-page">
  <!-- 根据变量加载不同的顶部导航 -->
  <% const topNavPartial = topNavType || 'topnav'; %>
  <%- partial(`./partials/${topNavPartial}.ejs`) %>

  <div class="m-body">
    <%- partial('./partials/leftnav.ejs') %>
    <div class="m-wrapper">
      <%- body %>
    </div>
  </div>
  <%- partial('./partials/footer.ejs') %>
</div>
<!-- end:: Page -->

路由里传递topNavType：

// 用管理员顶部导航的页面
app.get('/admin', (req, res) => {
  res.render('admin', { topNavType: 'admin-topnav' });
});

// 用普通用户顶部导航的页面
app.get('/profile', (req, res) => {
  res.render('profile', { topNavType: 'user-topnav' });
});

注意事项 #

• 记得给变量设置默认值或者兜底逻辑，避免因为未传递变量导致模板报错（比如场景1里的typeof ... !== 'undefined'判断）
• EJS的条件判断语法要注意闭合：<% if (...) { %> 对应 <% } %>，不要漏写闭合标签
• 如果用的是Express + EJS，确保你的视图配置正确，partial路径能被正确解析

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