我如何在Jade中创build一个可重用的标记

我正在努力完成的。

我想要做的事情其实很简单，Jade模板引擎应该能够帮助我很多，但是我遇到了一些麻烦。

我build立了一个网站，使用了很多像这个jsFiddle中的半透明元素： http : //jsfiddle.net/Chevex/UfKnM/
为了使容器背景为半透明，但保持文本不透明，这涉及3个元素：

• 容器DIV的position: relative
• 一个position: absolute ，背景颜色，高度/宽度设置为100％，并将其不透明度设置为所需级别的子DIV。
• 另一个孩子DIV的内容没有特殊定位。

这很简单，我在CodeTunnel.com上相当有效地使用它。

我想如何简化它。

我在node.js中重写了CodeTunnel.com，而Jade模板引擎似乎可以大大简化这段重复使用的标记。 翡翠mixins看起来很有希望，所以这就是我所做的：

1. 我定义了一个mixin，所以我可以在需要的时候使用它。

    mixin container .container(id=attributes.id) // attributes is an implicit argument that contains any attributes passed in. .translucentFrame .contentFrame block // block is an implicit argument that contains all content from the block passed into the mixin. 

2. 使用混合，传入一个内容块：

    +container#myContainer h1 Some test content 

   产生：

    <div id="myContainer" class="container"> <div class="translucentFrame"></div> <div class="contentFrame"> <h1>Some test content</h1> </div> </div> 

到目前为止，一切都很好！ 只有一个问题。 我想在layout.jade模板中使用这个mixin，我希望子模板能够使用块inheritance。 我的layout.jade文件如下所示：

 doctype 5 mixin container .container(id=attributes.id) .translucentFrame .contentFrame block html head title Container mixin text body +container#bodyContent block bodyContent 

然后在另一个jade文件（index.jade）中扩展layout.jade：

 extends layout block bodyContent h1 Some test Content 

一切看起来都是按顺序的，但是玉石parsing器却失败了：

我认为这与block关键字冲突有关。 在mixin block内部是一个包含传递给mixin的block的隐式参数，但是当扩展一个jade模板块时，是一个关键字，用于标识要在父模板的等效块中replace的标记块。

如果我用任何其他标记replace我传入mixin的block bodyContent ，则一切正常。 只有当我试图通过一个块定义，它会变得不高兴。

有任何想法吗？

Answer 1

我怀疑，因为mixin定义了自己的函数 ， block bodyContent index.jade被定义在index.jade不可访问的不同范围内。

你可以尝试的是将mixin的使用移到inheritance视图，因为mixin是“悬挂”的 ：

layout.jade ：

 doctype 5 mixin container .container(id=attributes.id) .translucentFrame .contentFrame block html head title Container mixin text body block bodyContent 

index.jade ：

 extends layout block bodyContent +container#myContainer h1 Some test content