Butterfly主题美化日记 |
您所在的位置:网站首页 › joe博客美化 › Butterfly主题美化日记 |
观前提示
本帖的主要目的是用最平实的语言描述博客美化的进程,同时在每个章节为可能涉及的知识点提供相应的工具网站以供读者学习。当然,最重要的是给我自己留个魔改的日记。这样升级主题玩崩了也能找到回家的路。 鉴于每个人的根目录名称都不一样,本帖博客根目录一律以[Blogroot]指代。本帖涉及魔改源码的内容,会使用diff代码块标识,复制时请不要忘记删除前面的+、-符号。因为.pug和.styl以及.yml等对缩进要求较为严格,请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。博主同款编辑器的安装配置教程请参看:Atom插件安装和推荐本帖涉及的工具网站我都收录在Akilarの工具箱内。方便读者查找使用。本帖基于Butterfly主题进行魔改方案编写,因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。以避免不必要的兼容性问题。 添加看板娘无插件备注:插件版已经很成熟,无需改动。魔改版引入简单,一行js就能搞定。写成插件显得很没必要。 Live2d Widget /posts/5b8f515f/ Valine评论添加[博主,小伙伴,访客]标签无插件备注:高耦合,且不具备剥离必要。 Valine Visitor Tag Beautify /posts/d2222705/ twikoo评论块气泡风格魔改美化无插件备注:直接引用样式更快。 twikoo评论块气泡风格魔改美化 /posts/d99b5f01/ 评论区侧栏弹出式美化方案无插件备注:直接引用样式更快。 Butterfly comment board beautify /posts/397b8b90/ 手机端fixed定位侧栏布局魔改方案无插件备注:直接引用样式更快。 Butterfly fixed card widget /posts/451ac5f8/ 相关推荐版块侧栏卡片化无插件备注:直接引用样式更快。 Butterfly布局调整———相关推荐版块侧栏卡片化 /posts/194e1534/ 留言板动态弹出信封样式已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-envelopenpm install hexo-butterfly-envelope --save Envelope Style Comments /posts/e2d3c450/ 页脚翻页时钟计时(jquery)无插件备注:需要三项依赖,且体量较大,单纯一个组件来说,有些浪费。 Footer Timer /posts/192af77f/ 页脚电子钟计时(原生)已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-footer-beautifynpm install hexo-butterfly-footer-beautify --save Native JS Timer /posts/b941af/ 添加Github徽标已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-footer-beautifynpm install hexo-butterfly-footer-beautify --save Add Github Badge /posts/e87ad7f8/ 环形右键菜单无插件备注:需要jquery依赖,且无法解决pjax兼容问题。 GalMenu /posts/8eb79430/ 添加侧栏聊天机器人无插件备注:需要botui.js和vue依赖,功能有些鸡肋,仅做适度交流即可,有兴趣的可以参考糖果屋一千零一夜里的教程对其进行插件化。 Botui Talk Robot /posts/9dc1acf8/ 修改加载动画内容无插件备注:高耦合,极度依赖主题本身自带的函数,且不具备剥离必要。 Loading Animation /posts/3d221bf2/ 添加外挂标签已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-tag-plugins-plusnpm install hexo-butterfly-tag-plugins-plus --save Tag Plugins Plus /posts/615e2dec/ 友链样式魔改无插件备注:可以写成页面生成版插件,但是这样子没法继续美化友链页面,比如添加个人友链信息之类的 Friend Link Card Beautify /posts/57291286/ 自定义样式魔改无插件备注:纯CSS或js,本身就是不动源码的魔改。不具备剥离必要。 魔改样式引入方案 字体样式修改 版块显隐修改 透明度修改 侧栏按钮(如aplayer)缩进方案 夜间模式或阅读模式修改 随机背景或banner效果 图片模糊渐变清晰 鼠标指针样式替换 站点动态title 站内教程索引:Custom Beautify /posts/ebf20e02/ 时间轴生肖图标无插件备注:高耦合,且不具备剥离必要。 Archive Beautify /posts/22257072/ 引入阿里矢量图标库无插件备注:纯css、js引入,本就是不动源码的魔改,不具备剥离必要。 站内教程索引:Iconfont Inject /posts/d2ebecef/ 动画效果已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-wowjsnpm install hexo-butterfly-wowjs --save 各类样式请参看animate.css官方文档 站内教程索引:Blog Animation -- Wowjs /posts/abab51cf/ 动画效果拓展内容——浮动特效无插件备注:纯css、js引入,本就是不动源码的魔改,不具备剥离必要。 截图无法表现预览效果,故在教程页面用了内联动效。具体效果详见教程页面。 站内教程索引:Float Panel /posts/9e3bccc6/ 侧边栏说说已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-artitalk-pro# 若安装过hexo-butterfly-artitalk,请先卸载npm uninstall hexo-butterfly-artitalk --savenpm install hexo-butterfly-artitalk-pro --save基于冰卡诺老师的项目进行pjax优化和artitalk_v3.2.0+的适配,已实现去jquery化和插件化内嵌。 Artitalk Pro /posts/f1004b1d/ 首页磁贴已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-categories-cardnpm install hexo-butterfly-categories-card --save Categories Magnet /posts/a9131002/ B站同款动态Banner无插件备注:存在插件化的可行性,但对一图流来说有些没有必要,个人没有兴趣剥离。 Bilibili Dynamic Banner /posts/780a2cea/ 糖果屋微调合集无插件备注:高耦合,小体量魔改,插件化反而把简单的过程复杂化。 合集内容较多。且多为细节。请自行比照教程内容,在本站相应位置体验实例效果。目前有: 左上角标题魔改 打赏按钮彩蛋 页脚振翅蝴蝶动效 首页封面节日图标彩蛋 单页背景图片自定义 菜单栏多色图标iconfont引入 站内教程索引:糖果屋微调合集(持续更新) /posts/23fdf850/ SAO Utils Web 1.0精简版本,仅右半边菜单。 SAO UI Plan -- SAO Utils Web 1.0 /posts/3b4c07bd/ SAO Utils Web 2.0完全版本,包括角色属性面板,一级球形菜单和二级三级菜单。 SAO UI Plan -- SAO Utils Web 2.0 /posts/fd243d7/ SAO UI PLAN SAO_ranklistSAO UI 风格的血条样式排行榜。 SAO UI Plan -- Ranklist /posts/b7126498/ SAO UI PLAN Card WidgetSAO UI 风格的侧栏卡片。 SAO UI PLAN --- Card Widget /posts/eb030e5a/ SAO UI PLAN Card PlayerSAO UI 风格的作者简介卡片,添加了翻转效果,将文章数、标签数、分类数替换成EXP,HP,MP的计量条样式。等级根据文章数进行计算。 SAO UI PLAN --- Card Player /posts/e5cda1b6/ 首页置顶轮播图已发布插件版,具体配置方案请参看插件文档。hexo-butterfly-swipernpm install hexo-butterfly-swiper --save基于@冰卡诺老师的项目进行pjax适配,将繁杂的配置内容改为循环节,直接在配置文件中新增置顶文章信息。 Swiper Bar /posts/8e1264d1/ gitcalendar已发布插件版,具体配置方案请参看插件文档。hexo-filter-gitcalendarnpm install hexo-filter-gitcalendar --save基于@冰卡诺老师的项目做了微调。进行pjax适配,提取配置项。转换成插件化配置,通过配置文件开关控制各类样式资源的引入。补全自建API的部署教程。 Gitcalendar /posts/1f9c68c9/ card clock已发布插件版,具体配置方案请参看插件文档hexo-butterfly-clocknpm install hexo-butterfly-clock --save 基于@冰卡诺老师的项目修改。进行pjax适配。去除了jquery。新增夜间模式。 Sidebar Card Clock /posts/4e39cf4a/ Friend link subscription已发布插件版,具体用法详见插件文档hexo-butterfly-fcirclenpm install hexo-butterfly-fcircle --save 应援@冰卡诺老师的友链朋友圈项目。进行pjax适配。沿用了Butterlfy的时间轴样式。 Friend link subscription /posts/8480b91c/ 版权声明美化基于@Nesxc同学的项目修改。仅做微调。补齐了两个配置项的默认项。精简配置过程。针对文字偏移做了自适应优化。 预览效果请查看Nesxc的原帖—-Butterfly版权美化教程 站内教程索引:(二创)Copyright-beautify /posts/8322f8e6/ 更多优秀魔改作者 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |