悬浮组件
网页中不光是单纯的平面，还可以在上面添加一切奇奇怪怪的悬浮插件。例如悬浮窗口、小宠物、音乐等。
悬浮窗口
网站弹窗、悬浮内容的创造。
活用githubAPI获取仓库commits作为更新日志 - Akilar
弹窗的实现非常的简单。直接fetch，然后依次读出github API返回的json内的message，最后把这个message拼接一下，作为弹窗内容就好了。记得
:username和:reponame要改成自己的用户名和私有仓库名哦。然后14000000sfxzd93430000000bfb13a00000babf2也就是你的token内容也要记得改成自己的token，申请的时候需要给予repo栏的所有权限才行。
SAO-UI-PLAN-Notify - Akilar
故事还要从上一篇教程说起，本来嘛，我只是打算写个左右翻页的上下篇UI重写。然后dorakika从我的魔改里得到灵感，写了个悬浮按钮。 然后呢，我从他的悬浮按钮里得到灵感，准备捣鼓个SAO UI风格的控制面板，把现在主题右边的那个侧栏菜单给它捣鼓进控制面板里。
Butterfly添加全局吸底Aplayer教程 - Jerry
如果你想使用 aplayer，很多人都会推荐安装 hexo-tag-aplayer 这款插件。这款插件通过 Hexo 独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的 html。如果你只是使用一些简单的功能，其实无需使用到这个插件，只需以 html 格式书写就行，不用插件去转换。
引入Aplayer播放音乐 - Akilar
看到大佬们的网页可以播放音乐，不得不说我是有点心动的，所以就在这里放一下教程。写这个的时候我也在一边试着安装，算是先驱者。 有两种方式，一种是安装源文件支持，在所有的网页输出上放置播放器，这样你哪个网页都可以看到它。 还有一种是安装插件，这个可以在文章中自定义样式，如此一来，只有当你点开文章的时候才能看到它。 我个人比较倾向于第二种，但这里我都会说，事实上引用的不是同一个js的情况下，貌似也不冲突吧。
butterfly魔改aplayer音乐 - 安知鱼
魔改有风险, 魔改前注意备份。此篇魔改需一定代码能力。
给博客添加自定义的通知悬浮窗 - 空梦
虽然这个悬浮窗实现并不复杂，不过对于这种基本不懂前端开发，只会照葫芦画瓢的人来说还是比较有难度的，用了一下午才把悬浮窗弄好。 开发中也遇到了不少问题（不然也不会花这么长时间），难为我最长时间的就是悬浮窗内部元素的排版了，光想办法把按钮放在右边，提示文本放在左边就花费了至少一个小时。
butterfly添加蓝天白云 - Aegcbx
为butterfly主题添加一个蓝天白云特效
动态效果
低占用
优雅美观
悬浮动画
悬浮在页面的动画。
添加白天夜间模式转换动画 - Akilar
其实这个动画切换效果不是第一次看到了，最早看到是在一些volantis主题的用户博客那里，比如银河小徐那里，百度了一下也搜到过volantis相关的魔改教程，当时没当回事，直到在今年勇那里想到了相对完善的源码，不过他嵌入的不是很完美，按钮在一个比较尴尬的地方。和我的副标题重合了，js也是依赖于jquery的，和最新版butterfly去jquery的理念相悖，所以心血来潮对这个教程做下完善，顺便去jquery。
悬浮宠物/看板娘
悬浮在页面的具备观赏性的内容创造。
Live2d Widget - Akilar
最早的时候看别人的博客很多都有一个可爱的看板娘，然后就找了教程给自己也整了一个。因为找到的教程都是稂莠不齐的，原作者自己说的也略显含糊（其实是我自己看不懂）。总之秉承着一如既往的小白风格。把网上的教程做个整合。
博客看板娘增强版 - Ordis
之前我写过一篇关于 hexo 博客插入 live2d 的教程，传送门：让你的博客充满生气之 Live2D
但是由于插件和模型的限制，能应用的看板娘 emmm，都不是很满意，或者说好看的很少，所以能不能把别的 live2d 模型应用到博客里呢，经过缘星星丶大佬的指导，我找到了方法，写在这里以作记录
右键菜单
自定义你的右键菜单。
环形右键菜单 - Akilar
环形右键菜单
SAO UI Plan -- SAO Utils Web 1.0 - Akilar
写一个
SAO风格的右键菜单算是我的一个执念了，但是搜遍全网页找不到网页版的内容，于是我想起来多年前就用过的一款软件SAO Utils，可惜它虽然有完整的菜单逻辑，但是却是基于C语言写的。至多只能参考一些音效。最后兜兜转转，在魔改博客时看到了
Volantis的右键菜单。学习了一下右键菜单的魔改原理。决定自己来从零开始做一个SAO风格的右键菜单。
SAO Utils Web 2.0 - Akilar
写一个SAO风格的右键菜单算是我的一个执念了，但是搜遍全网页找不到网页版的内容，于是我想起来多年前就用过的一款软件SAO Utils，可惜它虽然有完整的菜单逻辑，但是却是基于C语言写的。至多只能参考一些音效。
自定义右键菜单 - KIKA
首先，想要一个右键菜单，就得向页面中插入一个Dom结构 因为是右键唤醒菜单，与页面其他元素无关联，所以可以将此结构直接插入在body下 适配于butterfly主题，即新建一个rightmenu.pug文件（见下方），位置放在layout文件夹中即可 然后在themes/butterfly/layout/includes/layout.pug中引入（注意缩进）
Butterfly魔改：自定义右键菜单 - 张洪Heo
看到很多魔改的小伙伴都自定义了右键菜单，例如糖果屋的saoUI右键菜单、volantis的右键菜单等等。最近发现DoraKika写了个右键菜单，风格简洁，看起来难度不大，所以修改了个样式就移植过来了。
butterfly博客自定义右键菜单升级版 - LYX
很久以前，Dorakika自己做了一个不错的右键菜单，借鉴于Volantis主题，当然我是在洪哥的博客里面看到的。
鼠标样式
给博客添加哇酷哇酷的阿尼亚鼠标指针 - Xlenco
四月新番，间谍过家家早已完结。不知道各位被哇酷哇酷的阿尼亚可爱到呢？反正博主被可爱到了!
搜索
搜索功能的自定义。
algolia的简单美化和优化记录 - Leonus
之前就在用algolia，但是搜索却有一点点问题——只能搜索标题，不能搜索内容。 今天看群里在聊algolia，于是就问了问，从 @CC 的文章里得到了答案：
我用的插件不对。 好家伙，之前没怎么详细了解，完全不知道插件的区别。
butterfly魔改本地搜索预览图 - 安知鱼
butterfly 自带的本地搜索配置方便所以便一直使用至今，不过有一个痛点就是没有搜索预览图，于是为了解决这个问题做了如下尝试。
Algolia在线搜索使用 - Jer
最近不知道为什么local_search挂了
没办法修复，而且仔细一看search.xml文件已经超过2M，而我博客才刚刚开头，只好换成algolia。
右下角悬浮工具
主题自带右下角的悬浮工具栏。
返回顶部显示网页阅读进度 - Leonus
我们需要给按钮添加一个元素来存放内容，可以选择使用js插入，不过我还是觉得改源码简单方便。 修改文件
themes\butterfly\layout\includes\rightside.pug，在最下面插入如下两行代码（注意去掉前面的+号，别傻呼呼的直接复制粘贴）
Butterfly右下角悬浮菜单栏魔改指南 - Leonus
最近折腾了一下右下角悬浮菜单，在这里简单的写写魔改的思路，顺便列出一些适合添加在此处的功能。 魔改文件路径：themes\butterfly\layout\includes\rightside.pug 如果你有更实用的功能或者其他建议欢迎留言告知。