嵌入 Jade 包含变体答案

【问题标题】：embedding Jade include variants嵌入 Jade 包含变体
【发布时间】：2016-01-31 15:16:12
【问题描述】：

为了轻松创建常用 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 不支持动态/参数化包含*，所以它不像预期的那么简单。

我可以（ab）使用自定义过滤器吗？（看来我还是得写 escaped 过滤器。）任何提示将不胜感激。

* 虽然有some hints v2.0 确实支持这个，但我不知道如何

【问题讨论】：

标签： pug

【解决方案1】：

你可以使用类似的东西

main.jade

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

子玉

p Hello World

sub2.jade

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>

用jade 1.11.0测试

【讨论】：

谢谢 - 但是，恐怕我不确定这如何解决 component($name) 解决各种包含的问题（include components/$name，include:escaped 和 include:verbatim 相同）。
我愿意编写扩展程序，就像 OP 中建议的自定义过滤器一样 - 我只是不确定这是正确的方法或从哪里开始......
好的。你能给我一个提示，你需要三个版本的模板吗？所以可能更容易看出什么实现是足够的
对于任何给定的组件，我希望呈现的输出与底层标记一起采用 HTML 和 Jade 格式。（请参见上面的第二个代码块。）这样您就可以轻松复制和粘贴您喜欢的任何标记版本，还可以查看实际输出的样子。