嵌套包含在错误位置的 Pug 拖放块内容中

Question

我正在尝试使用 Pug 为 Web 应用程序设置 FE，但遇到了一些问题。我开始怀疑 Pug 是否能够实现这种效果。我需要一个非常模块化的方法来构建最终页面，所以这就是我所拥有的。任何指导将不胜感激。

Page.pug

extends ../../../components/Project/Views/Common/Standard

block main
    include ../../../components/Project/Views/Grid/1ColumnLayout/_1Column
        block prepend singleColumn
            .demo
                p Single Column
    include ../../../components/Project/Views/Grid/2ColumnLayouts/_2Column
        block append twoColumnLeft
            .demo
                p Left Column
        block prepend twoColumnRight
            .demo
                p Right Column

Standard.pug

extends ../Shared/_Layout.pug

block content
    header
        block header
            include ../Common/_Header
    main
        .container
            block main
    footer
        block footer

_1Column.pug

.row
    .col-12
        block singleColumn

_2Column.pug

.row
    .col-12.col-lg-6
        block twoColumnLeft
    .col-12.col-lg-6
        block twoColumnRight

我的期望是我看到 "Single Column" 打印在有效的全角容器中，而 "Left Column" 和 "Right Column" 在下一行的 1/2 宽度列中.但是，呈现的 HTML 具有来自两个块的内容 - "block twocolumnleft" 和 "block twocolumnright" - 输出时就好像它全部在 "block twocolumnright".

中一样

Page.html

<div class="row">
    <div class="col-12 col-lg-6">
    </div>
    <div class="col-12 col-lg-6">
        <div class="demo">
            <p>Left Column</p>
        </div>
        <div class="demo">
            <p>Right Column</p>
        </div>
    </div>
</div>

谢谢！

Answer 1

据我所知，这是一种已知行为。在 pug 源代码中，您可以找到 this。如果我错了，请纠正我，哈巴狗正在收集 append 和 prepend 孩子并将其扔到最后一个块名称。

你可以用mixins来解决。 pug docs - mixins

Page.pug

extends Standard

block main
    include _1Column
        prepend singleColumn
            .demo
                p Single Column
    include _2Column
    +_2Column({
        left: '<p>Left Column</p>', 
        right: '<p>Right Column</p>'
    })

_2Column.pug

mixin _2Column(markup)
    .row
        .col-12.col-lg-6
            | !{markup.left}
        .col-12.col-lg-6
            | !{markup.right}

（我已经缩短了你的路径名）

嵌套包含在错误位置的 Pug 拖放块内容中

Nested includes in Pug drop block content in wrong spot

pug