侧边栏是butterfly的特色，自从butterfly将文章的目录缩小到侧边栏的一部分后，侧边栏就变成了魔改人喜欢调整的区域了。

原主题不具备的侧边栏功能，魔改作者自行创造的侧边栏组件。

自定义侧边栏 (opens new window) - Jerry

侧边栏现在支持自定义了，可以添加自己喜欢的 widget。

可添加自己的 widget，也可以对现有的 widget 进行排序（博客资料和 公告这两个固定，其它的能排序）

侧栏友链通讯录卡片 (opens new window) - Akilar

感觉好久好久没有写友链魔改和侧栏魔改的教程了，之前都是在捣鼓各种各样的API插件。然后我这次写的时候发现，我本地的widget文件夹里居然就剩下SAO相关的侧栏卡片pug文件了。看来我插件化的还是很勤快的嘛。不过SAO UI PLAN相关的内容还不打算做插件化，一方面我当初写的代码还比较差，一方面最近看到yamapink (opens new window)用vue封装的SAO UI，顿时萌生了我也要用vue来封装我所有的魔改教程的兴趣。

Butterfly布局调整———相关推荐版块侧栏卡片化 (opens new window) - Akilar

之前一直没有留意到，butterfly的原生相关推荐版块和其他布局比起来实在是太突兀了（主要是没有圆角），就那么突然的出现在文章和评论区之间，包括我和@贰猹 (opens new window)都觉得有必要改动这个（不过贰猹是不要侧栏党），@洪哥 (opens new window)的倒是和整个文本融合的不错（是配色效果吗？）。出于我守财的习惯，我通常不会直接删除主题已有的一些功能，那么要怎么处理这个那么大一块的推荐版块呢？ 我的做法就是，把它丢到可以自由控制显隐的侧栏里。还能顺便沿用我之前写的SAO UI和手机端侧栏fixed卡片样式。

Butterfly fixed card widget (opens new window) - Akilar

手机端fixed定位侧栏布局魔改方案

是的，还是那片瓜田。

从前，有一天，@贰猹 (opens new window)跑来问我能不能写一个仿手机悬浮按钮的功能。那你如果问我能不能，我肯定是回答能的。但你如果问我能不能帮你写，一开始我肯定是选择拒绝的。所以我很干脆的不帮贰猹写啦！

添加侧栏聊天机器人 (opens new window) - Akilar

无插件备注：需要botui.js和vue依赖，功能有些鸡肋，仅做适度交流即可，有兴趣的可以参考糖果屋一千零一夜里的教程对其进行插件化。

SAO UI PLAN Card Player (opens new window) - Akilar

SAO UI 风格的作者简介卡片，添加了翻转效果，将文章数、标签数、分类数替换成EXP，HP，MP的计量条样式。等级根据文章数进行计算。

card clock (opens new window) - Akilar

基于@冰卡诺老师的项目修改。进行pjax适配。去除了jquery。新增夜间模式。

教程：hexo-electric-clock电子时钟插件 (opens new window) - 小冰

NPM 插件安装的部署方法

给butterfly添加侧边栏电子钟 (opens new window) - 安知鱼

如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录[Blogroot]下打开终端，运行以下指令

教程：hexo-history-calendar历史上的今天插件 (opens new window) - 小冰

NPM 插件安装的部署方法

Butterfly美化：今日诗词侧边栏小组件，中国传统诗词文化 (opens new window) - 张洪Heo

之前公告显示的是微信公众号的关注，但是因为微信的诸多限制和微信的生态以至于我不是很想再做公众号相关的东西了。因为我的作者组件完全替代了公告的功能，所以我将公告移除了。但是这带来了一点问题，就是在显示的时候总是缺点什么。那么就来做个新的组件吧！

之前已经做过诗词放在页脚，但是新版页脚为了布局整洁给移除了。正好放在侧边栏吧！

微博热搜api使用与自建 (opens new window) - Leonus

原文https://blog.eurkon.com/post/38b005e1.html 虽然这样可以实现，但是我感觉他的操作太麻烦了（可能因为之前不能自定义侧边栏），所以我就稍微进行了修改。

Butterfly主题的一些侧边栏插件 (opens new window) - LYX

之前弄了一些插件，糖果屋的群友们也找我问了问，所以我就顺便写了个文章介绍一下这些插件吧。

Butterfly主题侧边小组件——土味情话 (opens new window) - hassanwong

前言： 逛了逛Eurkon的博客，看着那微博热搜侧边栏突然灵机一动，本想整一个随机笑话侧边小组件，奈何找免费 API 时先看到了土味情话，不错，很符合我的胃口，于是有了以下教程

Butterfly主题侧边小组件——文章地址 Qrcode (opens new window) - Wmz1024

🥴

源计划-方舟：作者卡片 (opens new window) - Akilar

再次声明，源计划-方舟的内容都是我尝试最近学到的新内容，试验我自己的想法而进行的。我目前的计划是尽快的把自己所思所想实现出来。所以没有足够的精力去把教程做成小白也能看懂的样子。 这个魔改本就不是为了没有前端基础的人准备的。看前做好备份，实现不了就回退。不甘心就学下前端。字体，配色，对齐这些鸡毛蒜皮的东西不要整天跑我这里来念叨bug，bug，bug。

源计划-方舟：侧栏按钮样式修改 (opens new window) - Akilar

本项目目前还是内测状态，样式优先考虑与本站的兼容，对于默认主题的兼容性适配暂时延后。一切以将本站装点完成为最优先事项。 我以前往侧栏按钮里丢过不少功能按钮，所以rightside.pug已经和原版不一样了，但是原理还是基本不变的。我会尽可能在文章里给出示例和声明一些必要的改动步骤。

源计划-方舟：侧栏卡片样式修改 (opens new window) - Akilar

这次的设计尝试解决了一下之前遇到的clip-path切割后默认自带overflow:hidden的问题。通过渐变色属性linear-gradient(to bottom,transparent 30px,color 31px,color)切割出一段透明的背景，而另外半边正常配色。这样我就可以实现背景的局部透明。这时候再去操作内部元素，我就不用傻乎乎的沿着需要镶嵌的边切割两次了，卡片标题还能跟随标题文字长度做简单的自适应。

Hexo + Butterfly 侧边栏公众号 (opens new window) - Ethan.Tzy

这里用 4.5.1 版本跑了【侧边栏公众号】的功能，主题是新拉的，未过多美化，只是为了验证下该功能有没有问题。如果你在使用此功能时遇见了 BUG ，请检查card_wx.pug是否正确引入以及custom.css是否正确引入。

根据主题已有的功能进行深度化定制。

【Hexo-Butterfly】修改侧边栏分类排序规则 (opens new window) - Kevin Chen

Hexo-Butterfly主题中，主页侧边栏中的categories默认显示顺序是按name排序，导致某些分类下虽然文章数量较少，但却排序靠前。并且默认设置下，主题中侧边categories只显示8条（如需修改可以修改主题配置文件），这在某些情况下让我的强迫症犯了主页分类不太实用，遂产生修改侧边栏categories的想法：按每个categories下文章数量降序排序。

← 文章 悬浮组件 →