我正在努力完成的事情。
我正在尝试做的实际上非常简单,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 看起来很有希望,所以这就是我所做的:
我定义了一个 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
然后在另一个玉文件(index.jade)中我扩展了 layout.jade:
extends layout
block bodyContent
h1 Some test Content
一切看起来都井井有条,但玉解析器失败了:
我认为这与block
关键字冲突有关。在 mixin 内部block
是一个隐含的参数,其中包含传递给 mixin 的块,但是当扩展一个翡翠模板块时,它是一个关键字,用于标识要在父模板中的等效块中替换的标记块。
如果我block bodyContent
用任何其他标记替换我传递给 mixin 的那个,那么一切正常。只有当我尝试传入一个块定义时,它才会感到不安。
有任何想法吗?