1.0 创建路径

在路径source/css/ 创建 custom.css 文件，复制下列代码：

2.0 输入代码

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
87
/* ===========================
   根变量，控制透明度与滤镜
=========================== */
:root {
  --trans-light: rgba(255, 255, 255, 0.5);  /* 白天模式半透明 */
  --trans-dark: rgba(25, 25, 25, 0.6);      /* 夜间模式半透明 */
  --border-style: 1px solid rgba(200, 200, 200, 0.5);
  --backdrop-filter: blur(5px) saturate(150%);
}

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

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

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

/* ===========================
   导航栏（固定）
=========================== */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: var(--backdrop-filter) !important;
}

[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) !important;
  border: 1px solid rgba(100, 100, 100, 0.5) !important;
  color: #ffffff !important;
}

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

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

[data-theme="dark"] .read-mode #aside-content .card-widget,
[data-theme="dark"] .read-mode div#post {
  background: rgba(25, 25, 25, 0.9) !important;
  color: #ffffff !important;
}

提醒： 但是需要保证root 需要放在 custom.css 文件的顶部。后面你可能会在 custom.css，因为root是对全局起作用的

1
2
3
4
5
6
:root {
  --trans-light: rgba(255, 255, 255, 0.5);  /* 白天模式半透明 */
  --trans-dark: rgba(25, 25, 25, 0.6);      /* 夜间模式半透明 */
  --border-style: 1px solid rgba(200, 200, 200, 0.5);
  --backdrop-filter: blur(5px) saturate(150%);
}

3.0 运行&检验

在 _config.butterfly.yml 的 inject > head 引入：

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

最后执行：

1
2
3
hexo clean
hexo g
hexo s