新建Css文件

写入以下代码,并inject到头部

  • --trans-light:白天模式带透明度的背景色,如rgba(255, 255, 255, 0.88)底色是纯白色,其中0.88就透明度,在0-1之间调节,值越大越不透明;
  • --trans-dark: 夜间模式带透明度的背景色,如rgba(25, 25, 25, 0.88)底色是柔和黑色,其中0.88就透明度,在0-1之间调节,值越大越不透明;
  • --border-style: 边框样式,1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框;
  • --backdrop-filter: 背景过滤器,如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器,这是亚克力效果的一种实现方法;
  • 大家可以根据自己喜好进行调节,不用拘泥于我的样式!
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
83
84
85
86
:root {
--trans-light: rgba(255, 255, 255, 0.88);
--trans-dark: rgba(25, 25, 25, 0.88);
--border-style: 1px solid rgb(169, 169, 169);
--backdrop-filter: blur(5px) saturate(150%);
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
background: var(--trans-light);
border-radius: 25px;
border: var(--border-style);
}

/* 排除github日历 */
#recent-posts > .recent-post-item:not(:first-child) {
backdrop-filter: var(--backdrop-filter);
}

[data-theme="light"] #recent-posts > .recent-post-item:first-child {
background: var(--global-bg);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border-radius: 18px;
border: var(--border-style);
}

/* 文章页、归档页、普通页面 */
div#post,
div#page,
div#archive {
background: var(--trans-light);
backdrop-filter: var(--backdrop-filter);
border: var(--border-style);
border-radius: 20px;
}

/* 导航栏 */
#page-header.nav-fixed #nav {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
background: var(--trans-dark);
}


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

/* 阅读模式 */
.read-mode #aside-content .card-widget {
background: rgba(158, 204, 171, 0.5) !important;
}
.read-mode div#post {
background: rgba(158, 204, 171, 0.5) !important;
}

/* 夜间模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}
[data-theme="dark"] .read-mode div#post {
background: rgba(25, 25, 25, 0.9) !important;
color: #ffffff;
}


修改_config.butterfly.yml

1
2
3
4
5
6
# Beautify (美化頁面顯示)
beautify:
enable: true
field: post # station/post
title-prefix-icon: '\f863'
title-prefix-icon-color: '#F47466'