为了轻松创建常见 UI 组件的参考目录,我想从一系列标记片段(每个组件一个)生成一个静态页面:
h2 List Group
p as provided by Bootstrap
+component("list_group")
h2 Panel
p also provided by Bootstrap
+component("panel")
这应该扩展到包括三个版本的所述Jade文件:原始,转义的HTML和未转义的HTML。
h3 Markup (HTML)
pre.lang-html
include:escaped components/list_group
h3 Markup (Jade)
pre.lang-jade
include:verbatim components/list_group
h3 Output
include components/list_group
<h3>Markup (HTML)</h3>
<pre class="lang-html">
<ul class="list-group">
<li class="list-group-item">foo</li>
<li class="list-group-item">bar</li>
</ul>
</pre>
<h3>Markup (Jade)</h3>
<pre class="lang-jade">
ul.list-group
li.list-group-item foo
li.list-group-item bar
</pre>
<h3>Output</h3>
<ul class="list-group">
<li class="list-group-item">foo</li>
<li class="list-group-item">bar</li>
</ul>
但是,据我所知,Jade 不支持动态/参数化的包含*,因此它并不像预期的那么简单。
我可以(滥用)使用自定义过滤器吗?(看起来无论如何我都必须编写escaped
过滤器。任何提示将不胜感激。
*虽然有一些提示v2.0实际上确实支持这一点,但我不知道如何
你可以使用类似的东西
主翡翠
- var condition=false
if condition
include ./sub.jade
else
include ./sub2.jade
子翡翠
p Hello World
子2.翡翠
p 42
条件=真
kluth@pc:~/$ jade main.jade && cat main.html
rendered main.html
<p>Hello World</p>
条件=假
kluth@pc:~/$ jade main.jade && cat main.html
rendered main.html
<p>42</p>
用翡翠1.11.0测试