输出行从 JS 变量内部中断为 Jade 生成的 HTML

Question

这是我的 Jade 文件

 - var itens = ["Sem limites de<br/>vendas", "Sem limites de visitas", "Sem limites de e-mails", "Sem cooparticipação"];
[...]
each item, i in itens
    div.col-xs-12.col-md-6
        div.col-xs-5.np.l
            img(src="img/#{imgs[i]}", title="#{item}", aria-label="#{item}", alt="#{item}").col-xs-12
        div.col-xs-7.np.r
            h3 #{item}
            p #{itens2[i]}

这就是输出的内容：

在此 h3 标签内输出真正的 html 换行符的最佳替代方法是什么？

提前致谢。 o/

Answer 1

（我认为这不是必需的，但是jade对语法很挑剔）更改：

["Sem limites de<br/>vendas"...

进入：

["Sem limites de <br /> vendas"...

（你肯定会想这样做）然后改变：

h3 #{item}
p #{itens2[i]}

进入：

h3
    | #{item}
p
    | #{itens2[i]}

你应该可以开始了。我运行在输出局部变量时在节点中构建内容管理系统时遇到了类似的问题。将管道添加到数组中可以让本地浮动在新的一行上并正确呈现。

您可能需要通过管道传输将包含任何特殊字符或 HTML 元素的其他局部变量。

我能够很容易地复制这个并输出换行符。

希望对您有所帮助！

Answer 2

Jade 正在转义#{} 属性中的任何内容。使用 !{} 或 !=。但是，我认为您不应该将 HTML 标签放在属性中。

- var itens = ["Sem limites de<br/>vendas", "Sem limites de visitas", "Sem limites de e-mails", "Sem cooparticipação"];
[...]
each item, i in itens
    div.col-xs-12.col-md-6
        div.col-xs-5.np.l
            img(src="img/#{imgs[i]}", title="#{item}", aria-label="#{item}", alt="#{item}").col-xs-12
        div.col-xs-7.np.r
            h3!= item
            p= itens2[i]

输出行从 JS 变量内部中断为 Jade 生成的 HTML

Output line break into Jade-generated HTML from inside JS Variable

html

javascript

pug