Вложенные включения в содержание Pug drop block в неправильном месте - PullRequest
Новая
       15

Вложенные включения в содержание Pug drop block в неправильном месте

1 голос
/ 20 сентября 2019

Я пытаюсь настроить 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

Я ожидал бы, что у меня будет «Единственная колонка», напечатанная в полноразмерном контейнере, а также «Левая колонка» и «Правая колонка» в следующей строке, каждая в 1 /2 ширины столбца.Тем не менее, отображаемый HTML имеет содержимое из обоих блоков - "block twocolumnleft" и "block twocolumnright" - выводится так, как если бы все было в "block twocolumnleright".

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>

Спасибо!

1 Ответ

0 голосов
/ 20 сентября 2019

Насколько я знаю, это известное поведение.В исходном коде мопса вы можете найти 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}

(я сократил ваши пути)

...