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

【问题标题】：How to write html from an oEmbed object directly into a jade template?如何将 oEmbed 对象中的 html 直接写入玉模板？
【发布时间】：2015-10-30 20:52:17
【问题描述】：

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

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

<! -- 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 是玉的内置 过滤器。虽然在docs 的任何地方都找不到它。尝试#2 试图实现它，但我认为我需要保存一个 .html 文件。目前html只存储在一个变量中。

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

jade可以处理直接html写吗？尝试在函数中使用document.body.innerHTML 并查看是否可以通过这种方式将其注入到弹性盒子中会更好吗？

非常感谢任何帮助！

【问题讨论】：

标签： javascript html node.js express pug

【解决方案1】：

在阅读了Jade Attributes 和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

【讨论】：

谢谢！认为我没有理解转义内容的概念！