如何使用pug在JS中插入html标签？

Question

当我需要在JS中使用类似JSON的对象（每个块中包含不同的数据）并遍历该对象时，我会通过pug创建HTML代码。

让我用代码对其进行描述

var footerMenu = {
   left: {
      title: "sometitle",
      list: [
         {
         title: "First thing to do",
         text:  "wake up and brush some teeth"
         },

         {
         title: "Second thing to do",
         text:   "start coding"
         },
(...)

带有属性footerMenu.left[0].text的文本必须使用某些标签设置样式时出现问题。

我需要这样的东西

...... text: "wake up and #[span.color-red brush] some teeth"

但是，当然pug会将其读取为简单的字符串。

我不想手动编写每个块，如何保存相同的代码结构，但使用pug将随机标签应用于JSON对象？

Answer 1

您可以像通常这样写html标签：

text: "wake up and <span class='color-red brush'>some teeth</span>"

然后在哈巴狗中可以这样使用unescaped attributes：

.some-class!=footerMenu.left[0].text

或使用string interpolation attributes unescaped

.some-class !{footerMenu.left[0].text}