我正在努力实现的目标.
我想要做的实际上非常简单,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
原文地址:https://codeday.me/bug/20190517/1123596.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。