如何在Jade中创建一个可重复使用的标记

Question

我正在努力实现的目标。

我想要做的实际上非常简单，Jade模板引擎应该可以帮助我很多，但我遇到了一些障碍。

我正在建立一个使用大量半透明元素的网站，比如这个jsFiddle： http ： //jsfiddle.net/Chevex/UfKnM/
为了使容器背景半透明但保持文本不透明，这涉及3个元素：

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

它非常简单，我在CodeTunnel.com上使用它非常有效。

我想如何简化它。

我正在node.js中重写CodeTunnel.com，而Jade模板引擎似乎可以大大简化我一遍又一遍重复使用的这个标记。 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. 使用mixin，传入一个内容块：

    +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，我希望子模板能够使用块继承。 我的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

一切看起来都井然有序，但是玉器解析器失败了：

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

如果我用任何其他标记替换我传入mixin的block bodyContent ，那么一切正常。 只有当我尝试传递一个块定义时才会感到沮丧。

有任何想法吗？

Answer 1

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

你可以尝试的是将mixin的使用转移到继承视图，因为mixins被“提升” ：

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