嵌入Jade include变量

3
为了方便地创建常见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">
    &lt;ul class="list-group"&gt;
        &lt;li class="list-group-item"&gt;foo&lt;/li&gt;
        &lt;li class="list-group-item"&gt;bar&lt;/li&gt;
    &lt;/ul&gt;
</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实际上支持此功能,但我不知道如何操作。
1个回答

0
你可以使用类似以下的代码:

main.jade

- var condition=false
if condition
  include ./sub.jade
else
  include ./sub2.jade

sub.jade

p Hello World

sub2.jade

p 42

当条件为真时

kluth@pc:~/$ jade main.jade && cat main.html
rendered main.html
<p>Hello World</p>

当条件为false时

kluth@pc:~/$ jade main.jade && cat main.html
rendered main.html
<p>42</p>

已使用jade 1.11.0进行测试


谢谢 - 但是,恐怕我不知道这如何解决 component($name) 解析为各种包含文件(include components/$name,对于 include:escapedinclude:verbatim 也是一样)的问题。 - AnC
我乐于编写一个扩展程序,就像在帖子中建议的自定义过滤器一样 - 我只是不确定这是否是正确的方式或从何处开始... - AnC
好的。你能给我一个提示,你需要三个版本的模板是用来做什么的吗?这样可能会更容易看出哪种实现方式是适当的。 - Sascha
对于任何给定的组件,我希望获得以HTML和Jade格式呈现的输出以及底层标记。这样你就可以轻松地复制粘贴你喜欢的任何标记版本,并查看实际输出的外观。 - AnC

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接