如何将 oEmbed 对象中的 html 直接写入 jade 模板？

Question

我有一个对象数组，每个对象都包含一个原始值 HTML。原始 html 是一个 oEmbed 对象，在单个字符串中包含 javascript、css 和 html。

我想将原始 html 的每个字符串迭代到 css 弹性盒子中，但似乎无法弄清楚如何。

<! -- attempt 1 -->
div.container
  h2 posts
    ul.flex-container
    each post in posts         
      li.flex-item
        p!= #{post.html}

<! -- attempt 2 -->
div.container
  h2 posts
    ul.flex-container
    each post in posts         
      li.flex-item 
        include content.html #{post.html}

<! -- attempt 3 -->
div.container
  h2 posts
    ul.flex-container
    each post in posts         
      li.flex-item #{post.html}

第 1 次尝试源于 this post。当我尝试这样做时，p!= 行出现 Unexpected token ILLEGAL 错误。

我想我读过一些东西说 html 是一个内置的 filter for jade。但是在 docs 中的任何地方都找不到它。尝试 #2 试图实现它，但我想我需要保存一个 .html 文件。目前 html 仅存储在变量中。

当我将 #{post.title} 替换为 #{post.html} 时，尝试 #3 在页面上呈现某些内容，因此错误不在 each post in posts 函数中。

jade 可以直接html 写吗？我是否最好尝试在函数中使用 document.body.innerHTML 并查看是否可以通过这种方式将其注入弹性框？

非常感谢任何帮助！

Answer 1

阅读 Jade Attributes and Jade logic tutorial 的一些文档后，我希望这个答案对您有所帮助：

Node.js
只需调用 node server.js 即可查看输出。

文件：sever.js

var jade = require('jade');
var data = [
  {"extId":"eg1" , "html":"<div>Everything you want 1<script>alert('hello1');</script></div>"},
  {"extId":"eg2" , "html":"<div>Everything you want 2<script>alert('hello2');</script></div>"},
  {"extId":"eg3" , "html":"<div>Everything you want 3<script>alert('hello3');</script></div>"},
];

var html = jade.renderFile('testing.jade', {posts : data , pageTitle : 'TestingJade'});

console.log('html : ' , html);

文件：testing.jade

doctype html
html(lang="en")
  head
    title= pageTitle
  body
    h1 Jade - node template engine
    ul
      each post ,index in posts 
        - var curId = post.extId
        li(id= curId)= post.html

阅读我提供的文档，它会帮助你理解。
在each post ,index in posts中使用index似乎很重要！
之后我们定义一个变量来处理 "ID"，这样我们就可以使用 'attributes' 定义将它设置为标签。
最后，我们设置内容使用 = 来转义 post.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TestingJade</title>
</head>

<body>
  <h1>Jade - node template engine</h1> 
  <ul>
    <li id="eg1">&lt;div&gt;Everything you want 1&lt;script&gt;alert('hello1');&lt;/script&gt;&lt;/div&gt;</li>
    <li id="eg2">&lt;div&gt;Everything you want 2&lt;script&gt;alert('hello2');&lt;/script&gt;&lt;/div&gt;</li>
    <li id="eg3">&lt;div&gt;Everything you want 3&lt;script&gt;alert('hello3');&lt;/script&gt;&lt;/div&gt;</li>
  </ul>
</body>

</html>

注意如果不想转义post.html的内容使用!=

li(id= curId)!= post.html/*
             ^
instead of   |
             v 
li(id= curId)= post.html*/

输出应该是：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>TestingJade</title>
</head>

<body>
  <h1>Jade - node template engine</h1> 
  <ul>
    <li id="eg1">
      <div>Everything you want 1
        <script>
          alert('hello1');
        </script>
      </div>
    </li>
    <li id="eg2">
      <div>Everything you want 2
        <script>
          alert('hello2');
        </script>
      </div>
    </li>
    <li id="eg3">
      <div>Everything you want 3
        <script>
          alert('hello3');
        </script>
      </div>
    </li>
  </ul>
</body>

</html>

因此将其转换为您的代码：

<! -- attempt 4 -->
div.container
  h2 posts
    ul.flex-container
      each post, index in posts         
        li.flex-item= post.html

如何将 oEmbed 对象中的 html 直接写入 jade 模板？

How to write html from an oEmbed object directly into a jade template?

html

javascript

node.js

express

pug