Pug混入中特定参数无法传入代码块的问题求助

Pug 中混入（mixin）的 block 代码块默认绑定的是该混入自身的作用域，而非调用混入时的外部作用域。你在 pf_img 混入里调用 a_ref 时，a_ref 的 block 无法直接访问 pf_img 内部的 name、source 等变量，因此出现了 name 变为 undefined 的情况。

以下两种方案可以解决这个问题：

方案1：给 block 传递上下文参数 #

修改 a_ref 混入，让它接收额外的上下文参数，并在执行 block 时传递这些参数：

mixin a_ref(ref, ctx)
  if ref 
    a(ref=ref)
      block(ctx)
  else 
    block(ctx)

在 pf_img 中调用 a_ref 时，把需要的变量打包成对象传递，在 block 里通过默认参数名 it 访问：

mixin pf_img({name, source, ref, width="1/2", aspect_ratio="1/1", description, is_video=false} = {})
  span=name+source+aspect_ratio
  br
  +a_ref(ref, {name, source, aspect_ratio})
    span=it.name+it.source+it.aspect_ratio

也可以在 block 里显式命名参数，比如把 block(ctx) 改为 block(myCtx)，然后用 myCtx.name 访问变量。

方案2：使用 with 切换作用域 #

不需要修改 a_ref 混入，直接在调用 a_ref 的 block 中用 with 关键字注入当前作用域的变量：

mixin pf_img({name, source, ref, width="1/2", aspect_ratio="1/1", description, is_video=false} = {})
  span=name+source+aspect_ratio
  br
  +a_ref(ref)
    with {name, source, aspect_ratio}
      span=name+source+aspect_ratio

with 会创建一个包含指定变量的临时作用域，让 block 内的代码可以直接访问这些变量。

使用上述任意一种方案后，生成的 HTML 会与预期一致：

<span>2018 project/images/unsplash1.jpegaspect-[1/1]</span>
<br>
<a ref="xxx">
    <span>2018 project/images/unsplash1.jpegaspect-[1/1]</span>
</a>

内容的提问来源于stack exchange，提问作者Jerome Stephan