回到文章目录

修改配置文件

众所周知，网站即 html + css + js，通过修改 css 和 js 我们可以自定义配置我们的主题。

首先修改配置文件，这里建议将需要的所有内容添加到 /css/my.css 和 /js/my.js 。

1
2
3
4
5
6
7
8
9
10
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/my.css">
  bottom:
    # - <script src="xxxx"></script>
    - <script data-pjax defer src="/js/my.js"></script>

添加自定义 css

在 {你的博客目录}/themes/butterfly/source/css/ 创建文件 my.styl，在里面填写你的代码。注意不是 my.css，我也不是很懂为什么。

此处可以安利一下我的字体，可以从 Github - ZhuZiAWan.woff2 离线，并保存到 {你的博客目录}/themes/butterfly/source/ 下，然后立即部署一遍。

下面是我的 my.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* 修改字体 ------------------------------------------------------- */
@font-face {
    font-family: 'tzy';
    /* 字体名自定义即可 */
    src: url('https://jamhus-tao.github.io/ZhuZiAWan.woff2');  /* 必须使用绝对路径 */
    /* 字体文件路径 */
    font-display: swap;
}

body,
.gitcalendar {
    font-family: tzy !important;
}

/* 局部优化 ------------------------------------------------------- */

.categoryBar-list {
    max-height: 400px;
}

.clock-row {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*3s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/

#page-header,
#web_bg {
    -webkit-animation: imgblur 2s 1 ease-in-out;
    animation: imgblur 2s 1 ease-in-out;
}

@keyframes imgblur {
    0% {
        filter: blur(5px);
    }
    100% {
        filter: blur(0px);
    }
}

/*适配使用-webkit内核的浏览器 */

@-webkit-keyframes imgblur {
    0% {
        -webkit-filter: blur(5px);
    }
    100% {
        -webkit-filter: blur(0px);
    }
}
.table-wrap img {
    margin: .6rem auto .1rem !important;
}

/* 标签外挂 网站卡片 start */

.site-card-group img {
    margin: 0 auto .1rem !important;
}

.site-card-group .info a img {
    margin-right: 10px !important;
}

[data-theme='dark'] .site-card-group .site-card .info .title {
    color: #f0f0f0 !important;
}

[data-theme='dark'] .site-card-group .site-card .info .desc {
    color: rgba(255, 255, 255, .7) !important;
}

.site-card-group .info .desc {
    margin-top: 4px !important;
}
/* 代码块颜色 */

figure.highlight pre .addition {
    color: #00bf03 !important;
}

添加自定义 js

和添加 css 相似，在 {你的博客目录}/themes/butterfly/source/js/ 创建文件 my.js，在里面填写你的代码。

我没有设置自定义 js 就不演示了。