javascript – 如何在Jade中创建一个可重用的标记

我正在努力实现的目标.

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

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

>位置为相对的容器DIV
>具有位置的子DIV：背景颜色,高度/宽度设置为100％,其不透明度设置为所需级别.
>另一个孩子DIV的内容没有特殊定位.

它非常简单,我在CodeTunnel.com上相当有效地使用它.

我想如何简化它.

我正在node.js中重写CodeTunnel.com,而Jade模板引擎似乎可以大大简化我一遍又一遍重复使用的这个标记. Jade mixins看起来很有希望,所以这就是我做的：

>我定义了一个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.

>使用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块内部是一个隐式参数,包含传递给mixin的块,但是当扩展jade模板块时,是一个关键字,用于标识要在父模板中的等效块中替换的标记块.

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

有任何想法吗？

解决方法:

我怀疑,因为mixins define their own functions,块bodyContent被定义在index.jade无法访问的不同范围内.

您可以尝试的是自mixins are “hoisted”以来将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