如何在我的网页中嵌入CodePen？

Question

我尝试将CodePen（来自codepen.io）添加到我的网页，但它没有按照我想要的方式显示。它只显示文本：'在CodePen上查看笔......'。 The picture I added shows the embed window on CodePen.

我如何正确嵌入笔，所以它完全显示在我的网页上？对不起，如果这是一个非常愚蠢的问题，我仍然是HTML中的完整菜鸟。

Answer 1

我没有看到问题，你只需要复制给你Codepen的代码：

 <p>Codepen embed:</p>
    <p data-height="265" data-theme-id="0" data-slug-hash="vGNKNj" data-default-tab="css,result" data-user="blonfu" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/blonfu/pen/vGNKNj/">Modificar color de texto según fondo (stylus)</a> by blonfu (<a href="http://codepen.io/blonfu">@blonfu</a>) on <a href="http://codepen.io">CodePen</a>.</p>
    <script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Answer 2

我想知道你的网页是否还没有在线。我最近将codepen嵌入到我自己的网页中，我注意到我无法在本地计算机上看到它，但是当我将html上传到我的服务器时，它就在那里。

Answer 3

要在本地使用，请替换

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

使用

<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>

<强>为什么吗

如您所见，默认脚本src以//assets...开头。

他们删除了网址中的协议，以便自动匹配您自己的协议。这是常见的做法，因为https网站不允许使用http网址加载脚本。

因此，如果您的网站使用http，则该脚本将加载http。如果您的网站使用https，则会加载https。

但是，如果您的站点不在服务器上，并且使用file:///协议打开，则它只是在您的计算机上找不到该资源，因此您需要指定要使用的协议。 / p>

Answer 4

Embedded Pens

您可以使用我们的复制粘贴嵌入代码在其他网站上嵌入Pens。要获取代码，请在任何Pen上单击编辑器页脚中的“嵌入”按钮。或者，从导出菜单中选择“嵌入笔”。

这将打开嵌入式构建器。

Embed Builder可帮助您自定义嵌入。你可以：

选择您的嵌入主题：我们有两个内置主题：Light和Dark。每个CodePen还获得可自定义的个人默认主题。 PRO成员获得无限制的嵌入主题。

选择要显示的标签：嵌入式构建器将从结果标签开始，并选择其中一个代码标签。您可以选择不同的代码选项卡，完全关闭代码选项卡以最大化结果，或隐藏结果并最大化代码选项卡。

预览“点击加载”：选中“使用点击加载”旁边的复选框，启用嵌入式笔的预览版本。预览嵌入使用“运行笔”按钮显示笔的静态图像预览。当访问者点击按钮时，笔会加载。

使嵌入可编辑： PRO成员可以使其嵌入可编辑，就像CodePen上的编辑器一样。您可以在PRO Embeds文档中阅读有关可编辑嵌入如何工作的更多信息。

设置嵌入高度：拖动嵌入底部的栏以更改其高度。副本＆amp;粘贴代码将以新的高度更新。

完成自定义嵌入代码后，请复制嵌入预览下方的“复制和粘贴代码”框中的代码。将代码粘贴到您的网站中，您的嵌入就会出现。

以下是嵌入代码的示例。它是HTML：

<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>@afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>

Read on..