前言

之前一直用的是小康博客的样式小康博客。

但是最近虽则Butterfly主题的更新，这个样式好像出现了一些问题，我的代码块展不开了！！！

这下必须得自己弄了，这里只更改了主题的大致配色，需要添加的样式非常非常的少！

开始

创建样式文件

先在博客根目录下创建一个.css样式文件，我的文件路径为/static/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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* 自定义样式-仿小康博客 */
/*全局样式*/
#content-inner/*全局颜色*/
{
    --light_bg_color: hsla(0, 0%, 100%, .6); /*日间背景颜色*/
    --dark_bg_color: hsla(0, 0%, 7%, .8);/*夜间背景颜色*/
    --light_page_color: hsla(0, 0%, 100%, .5);/*日间页面颜色*/
    --dark_page_color: hsla(0, 0%, 7%, .8)/*夜间页面颜色*/
}
body/*全局盒子*/
{
    cursor: url('/static/cur/default.cur'), default;/*替换鼠标指针，变指针*/
}
a,/*各种功能性按钮*/
button,
img,
#nav .site-page/*首页导航*/
{
    cursor: url('/static/cur/pointer.cur'), default;/*替换鼠标指针，变小手*/
}
/*日间样式*/
[data-theme="light"] #recent-posts .recent-post-item,/*首页文章盒子*/
[data-theme="light"] #aside-content .card-widget,/*侧边栏*/
[data-theme="light"] #post,/*文章*/
[data-theme="light"] #page,/*页面*/
[data-theme="light"] .wl-panel,/*waline评论面板*/
[data-theme="light"] #footer/*页脚*/
{
    background: var(--light_page_color); /*背景颜色*/
}
[data-theme="light"] body/*全局盒子-渐变背景*/
{
    background-size: 400% 400%;
    height: 100vh;
    background: linear-gradient(-45deg, #fbede8, #b4cef7, #b7f9b8, #f6ced8) fixed;
}
/*夜间样式*/
[data-theme="dark"] #recent-posts .recent-post-item,/*首页文章盒子*/
[data-theme="dark"] #aside-content .card-widget,/*侧边栏盒子*/
[data-theme="dark"] #post,/*文章*/
[data-theme="dark"] #page,/*页面*/
[data-theme="dark"] .wl-panel,/*Waline评论面板*/
[data-theme="dark"] #footer/*页脚*/
{
    background: var(--dark_page_color); /*背景颜色*/
}
[data-theme="dark"] body/*全局盒子-渐变背景*/
{
    background-size: 400% 400%;
    height: 100vh;
    background: linear-gradient(-45deg, #6f1b01, #113878, #016801, #540818) fixed;
}


其中/static/cur/pointer.cur与/static/cur/default.cur为鼠标图案文件，可以自行替换。

引入到全局

在主题配置文件_config.butterfly.yml中配置以下信息以进入css文件（注意：填写你的文件路径！）：

1
2
3
4
5
inject:
  head:
    # 自定义样式
    - <link rel="stylesheet" href="/static/css/custom.css">
  bottom:

Hexo三连

然后重新编译博客就行了！！！

1
2
3
hexo clean
hexo generate
hexo deploy

参考

小康博客