即使哈巴狗缩进正确，Pug 也无法正确生成 HTML

Question

我在 Pug 中有以下代码，它生成以下 HTML 代码：

    - var n = 0
    each street in streets
        if n % 4 == 0
            - n = 0     
            .w3-row-padding
        if n < 4
                .w3-col.l3.m6.w3-margin-bottom
                    .w3-display-container
                        .w3-display-topleft.w3-black.w3-padding 
                            a(href="/ruas/"+street._id) #{street.nome}
                        - var streetName = street._id + "-" + street.nome.replace(/\s/g, "")
                        img(src="/dados/materialBase/atual/"+ streetName +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
        - n = n+1

生成的 HTML 代码：

<div class="w3-row-padding"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>
<div class="w3-col l3 m6 w3-margin-bottom"></div>

我真正希望它生成什么：

<div class="w3-row-padding">
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
    <div class="w3-col l3 m6 w3-margin-bottom"></div>
</div>

所以我的问题是，Pug 中的这种方法有什么问题，我们如何生成正确的 HTML 代码？我正确地缩进了代码，但似乎没有任何作用。

Answer 1

缩进必须是这样的：

根据你是用制表符还是空格作为缩进，复制的时候要调整一下。

- var n = 0
each street in streets
    if n % 4 == 0
        - n = 0     
        .w3-row-padding
            if n < 4
                .w3-col.l3.m6.w3-margin-bottom
                    .w3-display-container
                        .w3-display-topleft.w3-black.w3-padding 
                            a(href="/ruas/"+street._id) #{street.nome}
                        - var streetName = street._id + "-" + street.nome.replace(/\s/g, "")
                        img(src="/dados/materialBase/atual/"+ streetName +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
    - n = n+1

Answer 2

这是一个粗略的解决方案，但似乎有效：

.w3-row-padding
    - for(let r=n ; r< n + 4 ; r++)
        if(streets[r])
            .w3-col.l3.m6.w3-margin-bottom
                .w3-display-container
                    .w3-display-topleft.w3-black.w3-padding 
                        a(href="/ruas/"+streets[r]._id) #{streets[r].nome}
                    img(src="/images/dados/materialBase/atual/"+ streets[r].nome +"-Vista1.JPG",alt="House", style="width:100%;height:400px;object-fit: cover;")
                    - n = n+1