如何在没有 CodePen 框架的情况下将 CodePen 中的笔嵌入网站

How to embed pens from CodePen into websites without CodePen frame

是否可以在没有默认 frame/navigation 栏的情况下将 CodePen 中的笔嵌入到网站中?换句话说,是否有可能摆脱笔顶部和底部的横条?谢谢!

您可以像这样在嵌入式代码片段上设置数据属性来实现 -

data-show-tab-bar='no'

或在嵌入主题生成器中,通过在选项卡栏下拉列表中选择 'hide' 选项。但是,这是一个 PRO 功能,只有在您拥有 Codepen 的 PRO 版本时才能使用。

如果您不想为专业版的 Codepen 付费,这里有另一个选择:

  1. 导出并下载您的 Codepen 项目
  2. 将文件上传到 Github 页面站点
  3. 将 Github Pages 项目 URL 嵌入到您想要的位置。

<embed src="username.github.io/project_name">