为了保证稳定性，本次修改采用外挂css的方式实现
在主题文件夹\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为background.css，在里面写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页脚与头图透明 */
#footer {
  background: transparent !important;
}
#page-header {
  background: transparent !important;
}

/* 白天模式遮罩透明 */
#footer::before {
  background: transparent !important;
}
#page-header::before {
  background: transparent !important;
}

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

在主题配置文件_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的background.css文件

1
- <link rel="stylesheet" href="/css/background.css" media="defer" onload="this.media='all'">

background配置项设置背景图

1
ackground: url(https://xx.xx.xxx/)

清除index_img和footer_bg配置项取消头图与页脚图的加载项

1
2
# The banner image of home page
index_img: 
1
2
# Footer Background
footer_bg: false