将 Jade 中的元素渲染成一行？答案

【问题标题】：Rendering elements in Jade on one line?将 Jade 中的元素渲染成一行？
【发布时间】：2013-04-23 03:39:54
【问题描述】：

我仍然掌握 Jade 的窍门。以下标记有效，但它导致元素呈现在两条单独的行上。我希望链接和 p.some_classname 文本呈现在同一行，但不要将 p.some_classname 变成超链接。

for elem in elems
  a(href="/foo/#{var1}/bar/#{var2}").baz.i.icon-cog
  p.some_classname= elem.id_1 + ' ' + elem.id_2

这可能吗？

【问题讨论】：

标签： pug

【解决方案1】：

如果我正确理解您的请求，您希望链接和文本位于同一行，每个元素一行。如果是这样，您只需要让段落包装文本并使用跨度：

for elem in elems
   p.some_classname 
       a(href="/foo/#{var1}/bar/#{var2}").baz.i.icon-cog
       span= elem.id_1 + ' ' + elem.id_2

这将生成（对于每个元素）：

<p class="some_classname"><a href="/foo..." class="baz i icon-cog"><span>{val for id_1} {val for id_2}</span></p>

或者，您可以进一步简化并完全跳过跨度：

for elem in elems
   p.some_classname 
       a(href="/foo/#{var1}/bar/#{var2}").baz.i.icon-cog
       | #{elem.id_1} #{elem.id_2}

刚刚使用节点进行了测试，并且根据您对最终标记的要求，两者都可以工作。 HTH。

【讨论】：

【解决方案2】：

据我所知，没有办法选择性地删除任何一对行之间的换行符。但是，如果在没有--pretty 或-P 选项的情况下运行jade，整个输出将折叠成一行。

【讨论】：

【解决方案3】：

加上 Matt 的回答，您可以像这样单独使用 IDs 和 CSS 类：

p 
     | #[ObjectId1.class1 SomeText ]
     | #[ObjectId2.class2 #{jsonObject.attribute}]

【讨论】：