本文以butterfly主题举例，其他主题自行适配

好久都没写魔改教程了，上次写的时候还是在上次。有一说一，近期的魔改基本上都是针对页面的变化。最近刚适配的1500px宽度，大宽度带来的视觉沉浸感非常棒，但是会带来很多问题，例如之前的主题横向元素过少，以至于在横屏比较宽的场景下元素都会被拉伸得很大。所以这几次版本的迭代都是为了增加横向的元素，减少被拉伸感。

偶尔逛过我的博客的小伙伴应该看到了我在置顶区域新增了一个小组件。

小组件

这个东西是由codepen的一个开发者制作的，我只是改了一点文字和样式，而整个移植过程非常快速。

使用iframe移植

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

导出Codepen项目

首先我们就需要将codepen项目导出为最基本的html、css、js。首先进入codepen挑一个公开项目。

进入项目编辑器

我们在右下角的选项中选择导出。

导出为zip

导出需要编译一段时间，成功之后可以开始下载zip压缩包。

下载zip

放置到博客中

我们将下载好的代码解压，预览一下dist文件夹中的index.html。确认没有问题后将dist文件夹复制到/themes/butterfly/source文件夹中。我这里新建在/themes/butterfly/source/page/xray/

项目导入

我们就可以得到/page/xray的相对路径。

编辑引用地址

因为地址不是在根目录，所以我们需要编辑一下html文件中引入同文件夹css和js的路径，引入相对地址。

填写相对地址

使用hexo s命令访问http://localhost:4000/进入预览模式，直接访问相对地址。例如本文例子则访问http://localhost:4000/page/xray/。

访问地址

如果可以正常访问，我们就可以进入下一步嵌入了！

嵌入iframe

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

html代码如下（嵌入在可编辑位置）

1
<iframe id="banner-page" src="/page/xray" frameborder="0"> </iframe>

pug代码如下（嵌入到魔改位置）

1
iframe#banner-page(src="/page/xray", frameborder="0")