Question

我正在使用哈巴狗作为express（节点js）的视图引擎，但是我遇到了一些条件问题。我使用网格框架进行新闻通讯设计，其工作方式类似于bootstraps网格，这意味着我有行和列。我每行需要两个项目，这需要每两个项目定义一个新行。我这样试过：

each elem,index in elements
  - var even = index % 2;
  if(even)
    .row
      .column
  else
      .column

此doenst按预期工作，因为else-column未嵌套在row列中。我只能找到pugjs.org文档在这方面有点差，所以有没有人有这方面的经验或更多文档的链接？非常感谢。

Answer 1

Pug忽略了额外的缩进，因此您所写的内容被正确解释为：

each elem,index in elements
  - var even = index % 2;
  if(even)
    .row
      .column
  else
    .column

请注意，上一个.column确实是.row。

的兄弟姐妹

相反，试试这个 -

each element, index in elements
  if !(index % 2)
    .row
      .column
      if (index + 1 < elements.length)
        .column

当索引为偶数（记住它从0开始）时，请执行以下操作：

使用一列呈现行元素
如果这不是最后一个元素，请添加第二列

当index是奇数时，什么都不做（因为我们已经添加了第二列）。

请注意，即使看起来第二列将呈现为第一列的子级，if语句的内容也会在if语句的缩进级别呈现 - 所以它们＆＃39;将是兄弟姐妹。

Answer 2

将elements处理成两人一组。

- 
    const groupedElements = elements.reduce(function(acc, curr, index) {
        let isEven = (index + 1) % 2;
        if (isEven) {
            acc.push([curr]);
        } 
        else {
            acc[acc.length-1].push(curr);
        }
        return acc;
    }, []);

for group in groupedElements
    .row
    for item in group
        .col

帕格（快速查看引擎）嵌套条件

2 个答案: