node.js - 将内容分配给 mixin 中的多个 block ，该 mixin 在 Jade 中动态生成嵌套的 HTML 结构？

Question

我想创建以下 HTML 结构

<div class="outerspace">
    <div class="inner1"><p>Inner1 content</p></div>
    <div class="inner2"><p>Inner2 content</p></div>
    <div class="inner3"><p>Inner3 content</p></div>
    (...)
</div>

而内部 div 的数量可能会有所不同。

示例 1:

---

我可以创建两个 mixin - 一个 òuterspace 和一个 ìnner mixin，使用 block 关键字嵌套它们，并为每个混合放置不同的内容内部 div 元素:

mixin outerspace()
    div.outerspace
        block

mixin inner($number)
    div(class="inner" + $number)
        block

//- call the mixins
+outerspace()
    +inner(1)
        p Inner1 content
    +inner(2)
        p Inner3 content
    +inner(3)
        p Inner3 content
    ...

示例 2:

---

此示例尝试对单个 mixin 执行相同的操作:

mixin nested_structure($number)
    div.outerspace
        each item in $number
            div(class="inner" + item)
                block

//- call the mixin
+nested_structure([1, 2, 3])
    p Inner content

这会产生与上述相同的结构，但会为每个生成的 block 分配相同的内容:

<div class="outerspace">
    <div class="inner1"><p>Inner content</p></div>
    <div class="inner2"><p>Inner content</p></div>
    <div class="inner3"><p>Inner content</p></div>
</div>

---

问题:如何使用示例 2 生成所需的 HTML 结构，但同时为每个内部 div 元素分配不同的内容？

Answer 1

你不能把“p Inner content”这一行放在mixin里面吗？

mixin nested_structure($number)
    div.outerspace
        each item in $number
            div(class="inner" + item)
                p Inner#{item} content 

//- call the mixin
+nested_structure([1, 2, 3])

这将输出:

<div class="outerspace">
    <div class="inner1"><p>Inner1 content</p></div>
    <div class="inner2"><p>Inner2 content</p></div>
    <div class="inner3"><p>Inner3 content</p></div>
</div>