如何在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对象中保存相同的代码结构，但应用随机标记？

- Anton

Answer 1

您可以像平常一样编写html标签，例如：
text: "醒来并<span class='color-red brush'>刷牙</span>"
然后在pug中，您可以使用不转义属性，如下所示：

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

或者使用未转义字符串插值属性

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

- dippas

---

谢谢，问题已解决。但是又出现了一个问题。我该如何在 JSON 对象属性中保留 Pug 语法？比如文本：“wake up and #[span assad] ...”，因为将来可能需要使用它。 - Anton

@Anton 抱歉，我不明白你的意思。 - dippas

在你的答案中，你使用了非正式的HTML标签语法-<span> </span>，但在Pug中，你只能输入-span [一些文本]。那么我该如何在与我的问题相同的情况下使用Pug语法？ - Anton

但那是另一个问题，与此无关，这个问题是如何在js / json中使用标签。现在你想知道如何直接在pug文件中使用常规HTML标签。这是我从你的评论中理解到的。尽管如此，这是可能的，只需查看https://pugjs.org中的文档即可。 - dippas