Question

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

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

我的期望是，我将看到“单列”有效地打印在一个全角容器中，而下一行中的“左列”和“右列”分别打印在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

据我所知，这是一种已知的行为。在哈巴狗源代码中，您可以找到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}

（我缩短了您的路径名）

帕格中的嵌套包含错误位置的块内容

1 个答案: