OEmbed 将嵌入式 Pens 带到各处 | CSS-Tricks

oEmbed 是一项简洁的技术，它允许轻松地将丰富的内容嵌入到其他内容中。您粘贴指向“事物”的链接，并在发布时，该链接神奇地转换为比链接更有用的内容。一个典型的例子是指向 YouTube 视频的链接。只需将视频的 URL 放到博客文章中，它就会转换为该视频的嵌入版本。Flickr URL... 变成嵌入的图片。

CodePen 也支持 oEmbed，这意味着您现在可以将嵌入式 Pens 放置在一些有趣的位置，而且让您的网站允许它们也很容易。

我在此提到这一点，因为它在 CSS-Tricks 上效果很好！

论坛中的嵌入式 Pens

我们鼓励您无论如何将 Pens 的问题发布到论坛，因为这样比尝试只查看代码并想象它要容易 100 倍。

评论中的嵌入式 Pen

就在这里的博客中，使用方法完全相同。

为什么要使用 oEmbed？

当然，这很容易。但不仅如此。使用 oEmbed，您正在白名单允许您从中嵌入丰富内容的位置。这是一件信任的事情。

CodePen 嵌入需要 JavaScript 才能工作。这听起来与渐进式增强相悖，但实际上正好相反。通过要求使用 JavaScript，我们可以将一段完美的内容（解释 Pen 的标题、作者和信息的一句话）转换为 <iframe> 嵌入体验。因此，如果没有 JavaScript，内容仍然“有效”并且有意义。有了 JavaScript，它会更好。一个单独的 <iframe> 仅仅在无 JS 环境中会失效（对我们而言）。

因此，由于我们的嵌入需要 <script> 才能工作，因此这限制了它们的使用位置。大多数网站不允许您简单地执行您放置在它们上的任何 <script>。这将是非常不负责任的，也是一个主要的安全性漏洞（XSS）。使用 oEmbed，您只能允许来自可信来源的 <script> 通过。我认为这是一种很酷的处理方式。

工作原理

oEmbed 通过以下方式工作

检测与任何特定网站支持的白名单 URL 格式之一匹配的 URL
向该网站的 oEmbed API 发出请求，并将该 URL 传递过去
API 返回网站用于嵌入该“丰富内容”的 HTML

您可以查看有关 CodePen oEmbed API 的更多信息，包括我们的 API 端点以及我们返回的内容。

在您的 WordPress 网站上启用 oEmbed

在自托管的 WordPress 网站上启用它基本上只需要一行代码，但您也可以使用插件，因为这就是它们存在的意义。然后，为了让它在评论（和 bbPress）中生效，还有另一个插件。

Iframely 支持 CodePen 和 900 多个其他域的嵌入式内容，因此这也是一种选择。

如果您使用 Jetpack，支持即将推出。

但请记住，如果您只是将 Pens 嵌入到博客文章和您不需要 oEmbed 的内容中，您可以使用我们的嵌入代码，这意味着您可以调整高度并更改主题等等，这更强大。

Discourse 支持 CodePen oEmbed

Discourse，指的是优秀的论坛软件。

WordPress.com 支持 CodePen oEmbed

感谢 Joey Kudish 和 WordPress.com 让嵌入式 Pens 在那里生效！

如果您最终以一种酷炫的方式使用它，请告诉我。

我们开始构建 CodePen 的一个主要原因是，仅仅显示代码片段与看到该代码实际运行相比，简直相形见绌，而这使得将这些运行的代码片段带到以前仅限于代码片段的相同类型的位置变得更容易。