前言

最近把博客给魔改完了，短时间内不会再有改动，我会开始正常更新文章了。为了让我之后更好的查看我的魔改，我会把一些魔改的方法分享出来。
因为Butterfly主题默认是不透明的，所以非常难看。经过魔改后，主题会变得半透明，会变得好看点（自认为）。

效果预览

所见即所得，大家魔改完就可以看到效果了。

教程

本教程不会涉及到主题文件的修改，所以无需备份，有错误或改动不可观删掉css即可。

1.自定义css

在 [根目录]\source\css\custom.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
/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.5，可自行修改*/
    background: rgba(255, 255, 255, .5);
}

/* 所有页面背景 */
#aside_content .card-widget,
#recent-posts>.recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
    /* 以下代表透明度为0.7，可自行修改*/
    background: rgba(255, 255, 255, .5);
}

/* 侧边卡片的透明度 */
:root {
    --card-bg: rgba(255, 255, 255, 0.5) !important;
}

/* 暗色模式下的卡片透明度 */
[data-theme='dark'] {
    --card-bg: rgba(18, 18, 18, 0.5) !important;
}

/* 页脚透明 */
#footer {
    /* 以下代表透明度为0.1，可自行修改 */
    background: rgba(255, 255, 255, .1);
}

如果你不想要页脚透明，就把上面代码的28-32行删除即可。

2.引入css

在 _config.butterfly.yml 的 inject 部分添加：

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

引入过了就不用了。

3.hexo三连击

1
2
3
hexo clean
hexo generate
hexo server

去 http://localhost:4000/ 看效果。
如果不满意，在上面的css文件中我有注释说明可自行修改的地方，大家可以自己修改为自己想要的透明度。

结语

这个挺简单的，小白也可以魔改，挺适合我AWA。