一直折腾一直爽
看着大家五彩缤纷的博客，再对比自己干巴巴的初始界面，还是挺膈应的，虽然搭建博客仅是为了督促自己记录学习经过，不说UI多么令人赏心悦目，但至少应该看得过去吧，所以闲暇时间观摩了详尽的Butterfly官方文档，想把这几天魔改踩过的一些坑，简单梳理一下，持续更新～

低阶修改

哈哈哈，低阶就是基础配置啦，直接在_config.butterfly.yml逐行修改即可（像博客标题、副标题、作者以及语言是在_config.yml里）,上面👆的官方文档要是还嫌不够的话，再推一个——MoYu-zc。
P.S.每次打开他的博客，CPU直接起飞！温度飙到80℃？

中阶修改

鼠标

鼠标和有滚动条这类魔改主要是通过CSS，在/source/文件夹下，新建一个css文件夹，虽然用了好几年的Mac，但怎么创建一个.css后缀的文件，我还真不会，不像Windows可以直接鼠标右键，就可以创建一个.txt文件，再改后缀名，所以我只好跑去终端，cd到当前目录下，touch一个.css，其他稀奇古怪的后缀文件，也是同理。
将下列代码拷贝至该.css文件：

1
2
3
4
5
6
7
8
9
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

然后在博客根目录下，打开_config.butterfly.yml，没错的话，应该是858行——Inject，“head”是调用css，而“bottom”是调用js，这里为了加载速度，只用到了css，将代码调成如下,本Blog鼠标样式就改好了，如想更换其他样式，只需在上面的url()里动手脚。（href后面的路径是开始我们新建的.css文件路径）

1
2
3
inject:
  head:
     - <link rel="stylesheet" href="/css/beautification.css">

滚动条

同鼠标一样，有前面铺好路，只需继续在.css文件拷贝代码，就能实现滚动条“圆润蓝色”化～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-moz-selection {
  color: #fff;
  background-color: #49b1f5;
}

透明

透明这块儿，讲真，折腾了我好一会儿，先是用js，把主页图消去，后发现css也可以，就统一操作了。但要么是文章页不透明，要么是标签页不透明，头疼。最后问了“店长”，得以解决～
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* 所有背景（包括归档页、标签页、分类页等） */
div#post{
  background: rgba(255, 255, 255, 0.8);
}
div#page{
  background: rgba(255, 255, 255, 0.8);
}
div#archive{
  background: rgba(255, 255, 255, 0.8);
}
div#tag{
  background: rgba(255, 255, 255, 0.8);
}
div#category{
  background: rgba(255, 255, 255, 0.8);
}
/* 侧栏卡片半透明 */
 .card-widget{
  background: rgba(255, 255, 255, 0.8)!important;
}
/* 所有背景（包括首页卡片、文章页、页面页等） */
#recent-posts>.recent-post-item,.layout>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post{
    background: rgba(255,255,255,0.8);
}

/* 页脚透明 */
#footer{
  background: transparent!important;
}
/* 头图透明 */
#page-header{
  background: transparent!important;
}
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

这是我东搜西凑拼来的，具体代码意义，后续再作进一步分析，大家可以先一股脑复制粘贴。

高阶魔改

加载动画内容

原博客已经讲得很透测了，没有必要再Copy重述一遍。
分为新旧两版教程，自定义动画参照最新即可。不放心可以先备份一下～

最后，给店长博客打个小广告～