我想要实现的目标。
我的目标其实非常简单,Jade模板引擎应该可以帮助我很多,但是我遇到了一些问题。
我正在构建一个网站,其中使用了很多半透明元素,就像这个jsFiddle中的元素: http://jsfiddle.net/Chevex/UfKnM/
为了使容器背景半透明但保持文本不透明,需要涉及3个元素:
- 一个具有
position:relative
属性的容器DIV - 一个具有
position:absolute
属性、背景颜色、高度/宽度设置为100%且透明度设置为所需级别的子DIV。 - 另一个用于内容的子DIV没有特殊定位。
这非常简单,并且我在CodeTunnel.com上使用它相当有效。
我想要简化它。
我正在使用node.js重新编写CodeTunnel.com,Jade模板引擎似乎可以极大地简化我反复重用的这段标记。Jade混合功能看起来很有前途,所以我做了以下操作:
I defined a mixin so I could just use it wherever I need it.
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.
Use the mixin, passing in a block of content:
+container#myContainer h1 Some test content
Generates:
<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
一切看起来都很正常,但jade解析器失败了:
我猜想这可能与block
关键字的冲突有关。在mixin内部,block
是一个隐含的参数,其中包含传递到mixin中的块,但是当扩展jade模板时,block
是一个关键字,用于标识要替换父模板中等效块中的标记块。如果我将传递到mixin中的
block bodyContent
替换为任何其他标记,则一切正常。只有当我尝试传递块定义时,它才会出现问题。有什么想法吗?