Express中Pug模板引擎条件嵌套实现每行两列布局问题

我懂你现在的困扰——想用Pug实现类似Bootstrap栅格的邮件模板，每两个元素就放进一个.row里，但原来的写法没法把第二个column正确嵌套到对应的row里，对吧？

先说说你原来代码的问题 #

你的代码逻辑是判断索引是否为偶数来创建row和第一个column，但Pug是靠缩进来控制HTML嵌套关系的，else分支的.column和if里的.row是同级缩进，所以生成的HTML会变成这样：

<div class="row">
  <div class="column"></div>
</div>
<div class="column"></div> <!-- 这个column和row同级，不在row里！ -->
<div class="row">
  <div class="column"></div>
</div>
<div class="column"></div>

这显然不是你想要的结构。

两种可行的解决方案 #

方案1：先把元素分组（推荐，逻辑更清晰）

先把elements数组拆成每两个元素一组的子数组，再循环这些子数组来生成row和column，这样嵌套关系一目了然：

//- 先在Pug里分组（也可以在Express路由里提前处理好再传给模板）
- const groupedElements = [];
- for (let i = 0; i < elements.length; i += 2) {
-   groupedElements.push(elements.slice(i, i + 2));
- }

//- 循环分组后的数组生成布局
each rowElements in groupedElements
  .row
    each elem in rowElements
      .column
        //- 这里放元素内容，比如= elem.title 或者其他你需要的内容

这种方法把布局逻辑拆成了“分组→生成行→生成列”，可读性强，邮件模板结构也更规整，后期维护起来更方便。

方案2：单循环内处理索引和嵌套

如果不想提前分组，也可以直接在循环里控制步长，每次处理两个元素，同时判断是否存在第二个元素避免越界：

- for (let i = 0; i < elements.length; i += 2) {
  .row
    //- 第一个元素的column
    .column
      //- 内容：= elements[i].content
    //- 判断是否有第二个元素，避免数组越界
    - if (i + 1 < elements.length) {
      .column
        //- 第二个元素的内容：= elements[i+1].content
    - }
- }

这种写法适合不想额外处理数组的场景，直接在循环里完成所有逻辑。

两种方法都能实现你要的“每行两个元素”的布局，推荐用第一种分组的方式，尤其是邮件模板对HTML结构要求比较严格，清晰的逻辑能减少调试成本。

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