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
33
34
35
36
37
38
39
40
41
42
/*所有页面实现毛玻璃特效*/

#aside-content,
#search-mask,
/* 手机端 */
#sidebar #menu-mask {
  background: rgba(255, 255, 255, 0);
}

.search-dialog {
  border-radius: 0px;
}

/* 浅色模式 */
html[data-theme="light"] #aside-content>.card-widget:first-child,
html[data-theme="light"] #aside-content .card-widget,
html[data-theme="light"] .layout>div:first-child:not(.recent-posts),
html[data-theme="light"] #recent-posts>.recent-post-item,
/* 标题栏 */
html[data-theme="light"] #page-header.nav-visible #nav,
/* 搜索框 */
html[data-theme="light"] .search-dialog,
/* 移动端 */
html[data-theme="light"] #sidebar #sidebar-menus.open {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
}

/* 深色模式 */
html[data-theme="dark"] #aside-content>.card-widget:first-child,
html[data-theme="dark"] #aside-content .card-widget,
html[data-theme="dark"] .layout>div:first-child:not(.recent-posts),
html[data-theme="dark"] #recent-posts>.recent-post-item,
/* 标题栏 */
html[data-theme="dark"] #page-header.nav-visible #nav,
/* 搜索框 */
html[data-theme="dark"] .search-dialog,
/* 移动端 */
html[data-theme="dark"] #sidebar #sidebar-menus.open {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
}

2.引入

在 butterfly.yml 中或者自定义的_config.butterfly.yml 中 inject

按以下方式引入 css 文件，不管以上哪种方式都按照下面代码方式引入。

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

参考文章: Butterfly 主题美化 - 页面毛玻璃效果

参考文章: Hexo 博客添加自定义 css 和 js 文件