帕格递归混合

Question

We use Pug to produce a style guide, and have a mixin to generate a header and description for reusable elements. A simplified example is this:

mixin sgitem(name)
    if !isnested
        - isnested = true
        h3=name
        block
    else
        block
    - isnested = false

That means that if I write this:

+sgitem('Foo')
    include partial with sgitem
+sgitem('Baz')
    div Example here

, the nested item should just return the block and not the name. Well, that works, but not if there's a second or third nested sgitem:

+sgitem('Foo')
    include partial with sgitem
    include partial with sgitem
+sgitem('Baz')
    div Example here

That will generate this:

<h3>Foo</h3>
<div>Nested example</div>
<h3>Nested title</h3>
<div>Nested example</div>
<h3>Baz</h3>
<div>Example here</div>

, while I would like this:

<h3>Foo</h3>
<div>Nested example</div>
<div>Nested example</div>
<h3>Baz</h3>
<div>Example here</div>

It probably is an issue not with Pug per se, but with setting variables and so on. So how can a mixin correctly know if it is nested or not?

Answer 1

I feel like what you're trying to do is overly complicated. Could you not just create something like the following?

mixin sgitem(title, description)
  if title
    h3=title
  if description
    div=description

Then call the mixins:

+sgitem('Foo', 'Nested example')
+sgitem('', 'Nested example')
+sgitem('Baz', 'Example here')

Which will render into:

<h3>Foo</h3>
<div>Nested example</div>
<div>Nested example</div>
<h3>Baz</h3>
<div>Example here</div>

Answer 2

We ended up splitting the mixin from its content, and including each of that content when needed.

Partial file A:
li List item example here

and

Page with atoms:
+sgmixin('A list item', 'Bla bla')
    include atoms/A


Page with molecules:
+sgmixin('A list', 'Bla bla')
    ul
        include atoms/A