注意

该博文不是教程，所以有关魔改问题请勿在本博文中询问我。

如有问题，还请咨询魔改教程作者。

源文件魔改

JS改造计划

  BF原版中很多内容都是内嵌在HTML中的，我改为了通过JS生成。

  魔改内容：

  • \scripts\customs\posts.js
  • \scripts\helpers\related_post.js
  • \layout\includes\page\categories.pug
  • \layout\includes\widget\card_tags.pug
  • \layout\includes\page\tags.pug
  • \layout\includes\header\post-info.pug
  • \layout\post.pug
  • \layout\index.pug
  • \layout\includes\widget\card_announcement.pug
  • \layout\includes\widget\card_recent_post.pug
  • \layout\includes\widget\index.pug
  • layout\includes\widget\card-related-post.pug
  • 引入JS/CSS

JS改造计划实践

https://kmar.top/posts/7ee9e8ec/

追番页面

  魔改内容：

  • 安装插件axios
  • \layout\page.pug
  • create: \layout\includes\page\bangumi.pug
  • create: \scripts\customs\bili.js
  • 引入CSS
  • 修改配置

给博客添加追番页面

https://kmar.top/posts/456efd20/

修复滚动条

  我修改了页面滚动条后，主题以及外部JS自带的隐藏滚动条来防止页面滚动的代码失效了，于是我通过JS修复了这一问题。

  魔改内容：

  • \source\js\search\local-search.js
  • \source\js\custom\utils.js

使用JS禁用网页滚动条

https://kmar.top/posts/6a968095/

打赏彩蛋

  美化博文下方的打赏按钮。

  魔改内容：

  1. \layout\includes\post\reward.pug
  2. \source\css\_layout\reward.styl
  3. 添加JS/CSS
  4. 修改配置文件

糖果屋微调合集 by Akilar

https://akilar.top/posts/23fdf850/#打赏按钮投币彩蛋效果

手机/PC黑白配色四种背景图

  在不同宽度的设备上根据主题颜色自动切换不同的背景图。

  魔改内容：

  1. \source\css\var.styl
  2. 引入CSS
  3. 修改配置文件

糖果屋微调合集 by Akilar

https://akilar.top/posts/23fdf850/#配置手机PC页面白天黑夜共四个背景图

相关推荐侧边栏化

  把非常占用博文下方空间的相关推荐放入到侧边栏中。

  魔改内容：

  1. \scripts\helpers\related_post.js
  2. \layout\post.pug
  3. \layout\includes\widget\index.pug

Butterfly 布局调整 ——— 相关推荐版块侧栏卡片化 by Akilar

https://akilar.top/posts/194e1534/

手机端悬浮窗

  手机端左侧添加一个悬浮按钮，同时将侧边栏移入按钮中，不再占用网页空间。

  魔改内容：

  1. create: \source\js\custom\fixed_card_widget.js
  2. create: \source\css\_layout\fixed_card_widget.styl
  3. create: \layout\includes\custom\fixed_card_widget.pug
  4. \layout\includes\additional-js.pug
  5. \layout\includes\third-party\pjax.pug
  6. 修改配置文件

Butterfly fixed card widget by Akilar

https://akilar.top/posts/451ac5f8/

友链美化

  魔改内容：

  1. \layout\includes\page\flink.pug
  2. \source\css\_page\flink.styl
  3. 修改配置文件
  4. 修改友链文件

Friend Link Card Beautify by Akilar

https://akilar.top/posts/57291286/

版权声明美化

  魔改内容：

  1. \layout\includes\post\post-copyright.pug
  2. \source\css\_layout\post.styl
  3. 修改配置文件

（二创）Copyright-beautify by Akilar

https://akilar.top/posts/8322f8e6/

运行时间

  修改主题侧边栏中显示的运行时间的格式。

  魔改内容：\source\js\main.js中const addRuntime处。

pwa

  启用PWA，同时使用自编写的sw.js优化博客访问体验。

  魔改内容：

  1. \layout\includes\layout.pug
  2. \sw.js
  3. 添加图标和json
  4. 修改配置文件

基于Butterfly的PWA适配

https://kmar.top/posts/94a0f26f/

解剖SW原理暨博主SW实现

https://kmar.top/posts/bcfe8408/

复制链接按钮

  在右下角的菜单中添加赋值网页链接的按钮，方便移动端分享文章。

  魔改内容：

  1. \layout\includes\third-party\share\index.pug
  2. 添加CSS/JS

给博文添加复制链接按钮

https://kmar.top/posts/e1e77a4d/

右下角刷新缓存按钮

  在右下角的菜单中添加刷新网页缓存的按钮，方便在迫切的想要看到新内容或缓存出现问题时删除缓存。

  魔改内容：

  1. \layout\includes\rightside.pug
  2. 添加JS
  3. 修改sw.js

给博文添加刷新缓存按钮

https://kmar.top/posts/af52c173/

隐藏部分侧边栏

  魔改内容：

  • \layout\includes\widget\index.pug

修复窄屏侧边栏点击不自动收回

  修复移动端点击右侧菜单切换页面的时候菜单不会自动收回的问题。

  魔改内容：

  1. \layout\includes\header\menu_item.pug
  2. 添加JS

添加51la统计

  魔改内容：

  1. \layout\includes\head\preconnect.pug
  2. 修改配置

51la统计体验报告：很全面的惊喜，Butterfly适配51la统计

https://blog.zhheo.com/p/c7c43433.html

页底添加徽标

  魔改内容：

  • [butterfly]\layout\includes\footer.pug
  • 修改配置文件

Add GitHub Badge by Akilar

https://akilar.top/posts/e87ad7f8/

插件式魔改

该分类包含只添加JS/CSS但不修改源文件的魔改

预加载页面链接

  bf自带的预加载只加载鼠标悬浮的链接，并且对于移动端的适配存在问题，于是我写了一个逻辑不同的预加载策略。该策略会在用户打开页面一定时间后预加载页面内所有博文链接，加载完毕的链接前面会添加一个图标。

  魔改内容：添加js文件。

自定义通知悬浮窗

  魔改内容：添加js、styl及pug文件。

给博客添加自定义的通知悬浮窗

https://kmar.top/posts/de06ec72/

修改鼠标图标

  魔改内容：添加CSS。

Custom Beautify by Akilar

https://akilar.top/posts/ebf20e02/#鼠标指针样式替换

留言板

  魔改内容：安装插件（hexo-butterfly-envelope）。

信笺样式留言板 by Akilar

https://akilar.top/posts/e2d3c450/

外挂标签

  魔改内容：

  • create: [butterfly]\scripts\tag\extends\...
  • create: [butterfly]\source\css\_custom\tags\...
  • 修改配置文件

Tag Plugins Plus by Akilar

https://akilar.top/posts/615e2dec/

阿里字体

  魔改内容：添加CSS和字体文件。

Hexo 引入阿里矢量图标库 by Akilar

https://akilar.top/posts/d2ebecef/

其它修改

  魔改内容（包括但不限于）：

  1. 首页头图亮色/暗色图片
  2. 配色及简易样式修改
  3. 标题前图标修改

  魔改教程：无。