观前提示

本帖的主要目的是用最平实的语言描述博客美化的进程,同时在每个章节为可能涉及的知识点提供相应的工具网站以供读者学习。当然,最重要的是给我自己留个魔改的日记。这样升级主题玩崩了也能找到回家的路。

  1. 鉴于每个人的根目录名称都不一样,本帖博客根目录一律以[Blogroot]指代。
  2. 本帖涉及魔改源码的内容,会使用diff代码块标识,复制时请不要忘记删除前面的+、-符号。
  3. 因为.pug.styl以及.yml等对缩进要求较为严格,请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。博主同款编辑器的安装配置教程请参看:Atom插件安装和推荐
  4. 本帖涉及的工具网站我都收录在Akilarの工具箱内。方便读者查找使用。
  5. 本帖基于Butterfly主题进行魔改方案编写,因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。以避免不必要的兼容性问题。

添加看板娘

站内教程索引:

Valine评论添加[博主,小伙伴,访客]标签

站内教程索引:

留言板动态弹出信封样式

站内教程索引:

页脚翻页时钟计时(jquery)

站内教程索引:

页脚电子钟计时(原生)

站内教程索引:

添加Github徽标

站内教程索引:

环形右键菜单

站内教程索引:

添加侧栏聊天机器人

站内教程索引:

修改加载动画内容

站内教程索引:

添加外挂标签

站内教程索引:

友链样式魔改

站内教程索引:

自定义样式魔改

魔改样式引入方案

字体样式修改

版块显隐修改

透明度修改

侧栏按钮(如aplayer)缩进方案

夜间模式或阅读模式修改

随机背景或banner效果

站内教程索引:

时间轴生肖图标

站内教程索引:

引入阿里矢量图标库

站内教程索引:

动画效果

各类样式请参看animate.css官方文档

站内教程索引:

动画效果拓展内容——浮动特效

截图无法表现预览效果,故在教程页面用了内联动效。具体效果详见教程页面。

站内教程索引:

侧边栏说说

基于冰卡诺老师的项目进行pjax优化和artitalk_v3.2.0+的适配,已实现去jquery化和插件化内嵌。

站内教程索引:

首页磁贴

站内教程索引:

B站同款动态Banner

站内教程索引:

糖果屋微调合集

合集内容较多。且多为细节。请自行比照教程内容,在本站相应位置体验实例效果。
目前有:

  1. 左上角标题魔改
  2. 打赏按钮彩蛋
  3. 页脚振翅蝴蝶动效
  4. 首页封面节日图标彩蛋
站内教程索引:

SAO Utils Web 1.0

精简版本,仅右半边菜单。

站内教程索引:

SAO Utils Web 2.0

完全版本,包括角色属性面板,一级球形菜单和二级三级菜单。

站内教程索引:

SAO UI PLAN SAO_ranklist

SAO UI 风格的血条样式排行榜。

站内教程索引:

首页置顶轮播图

基于冰卡诺老师的项目进行pjax适配,将繁杂的配置内容改为循环节,直接在配置文件中新增置顶文章信息。

站内教程索引:

gitcalendar

基于冰卡诺老师的项目做了微调。进行pjax适配,提取配置项。转换成插件化配置,通过配置文件开关控制各类样式资源的引入。补全自建API的部署教程。

站内教程索引:

card clock

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

站内教程索引:

更多优秀魔改作者