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

Posted 2023-02-22

【中文标题】将 Jade 中的元素渲染成一行？

【英文标题】：Rendering elements in Jade on one line?

【发布时间】：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

这可能吗？

【问题讨论】：

“在同一行”是什么意思？ html 中的同一行，或者它们在浏览器可见输出中的不同行上呈现

浏览器中的可见输出。

【参考方案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]