5

我正在努力完成的事情。

我正在尝试做的实际上非常简单，Jade 模板引擎应该能够帮助我很多，但我遇到了一些障碍。

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

  • 一个容器 DIVposition: 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

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

extends layout

block bodyContent
    h1 Some test Content

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

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

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

有任何想法吗？

4

1 回答 1

6

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

您可以尝试将 mixin 的使用移至继承视图，因为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
于 2012-12-18T00:52:53.797 回答