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

Question

我想要完成的任务。

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

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

• 包含position: relative
的容器DIV
• 具有position: absolute的儿童DIV，背景颜色，高度/宽度设置为100％，其不透明度设置为所需级别。
• 另一个没有特殊定位的儿童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 define their own functions，block bodyContent被定义在index.jade无法访问的不同范围内。

您可以尝试的是将mixin的使用移至mixins are "hoisted"以来的继承视图：

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