目 录CONTENT

文章目录

Codepen项目组件移植教程,将Codepen项目移植到博客

米尔嘉
2023-06-30 / 0 评论 / 0 点赞 / 219 阅读 / 408 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

使用iframe移植

这里用到的是iframe。具体定义和用法可以搜一下,简单来说就是网页里面嵌入了一个网页。所以我们只要将喜欢的codepen项目做成一个单独的网页就可以轻松的嵌入了。你可以在你的博客中嵌入一个游戏,一个动画。可以嵌入到加载页面、侧边栏以及文章之中。

导出Codepen项目

首先我们就需要将codepen项目导出为最基本的html、css、js。首先进入codepen挑一个公开项目。
我们在右下角的选项中选择导出并且下载zip。

20221222155809

20221222155925

放置到博客中

我们将下载好的代码解压,预览一下dist文件夹中的index.html。确认没有问题后将dist文件夹更名后,上传到后台。

嵌入iframe

你可以在你需要编辑的部分,在博客中我们可以嵌入到侧边栏、公告、文章等等位置。如果你擅长魔改,可以将代码放置在任何你需要的地方,例如加载动画页、页面顶部、背景等。

html代码如下(嵌入在可编辑位置)
<iframe src="https://cdn.minterjia.com/love/loginform/index.html" height="420" frameborder="no"  border="0" width="90%"> </iframe>
pug代码如下(嵌入到魔改位置)
iframe#banner-page(src="https://cdn.minterjia.com/love/loginform/index.html", frameborder="0")

预览链接:

0

评论区