1. 添加和引入 css 文件

在 hexo 项目的根目录下的 \source\css 文件夹内创建 css 文件

下面的各个美化步骤都在此 css 内修改

在 _config.butterfly.yml 内引入文件，找到下面的位置添加这一行，css 文件名改成你的文件名

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

2. 关闭首页图片

设置首页图片与网站的背景图片一致

此时发现图片与下方的内容部分颜色不一致

该原因是因为首页的图片自带遮罩，需要去除

在 css 中添加下列内容，如果不关闭背景动画的话会导致背景有加载动画，而图片没有，会导致二者割裂

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 首页白天模式去除遮罩 */
[data-theme="light"] #page-header:not(.not-top-img)::before {
  background: transparent !important;
}
/* 首页深色模式增加遮罩 */
[data-theme="dark"] #page-header:not(.not-top-img)::before {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 关闭背景显示动画 */
#web_bg {
    animation: none !important;
}

在 css 中加入下列内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Footer 本体透明 */
#footer {
  background: transparent !important;
}

/* Footer 上面的背景图片/渐变透明 */
#footer::before {
  background: transparent !important;
}

/* 深色模式下的 Footer */
[data-theme="dark"] #footer,
[data-theme="dark"] #footer::before {
  background: transparent !important;
}

4. 设置独立页面顶部图片透明

在 css 中加入下面内容

1
2
3
4
5
6
7
8
/* 独立页面头图背景透明 */
#page-header.not-home-page {
    background: transparent !important;
}

#page-header.not-home-page::before {
    background: transparent !important;
}