效果预览

就是本站当前的效果

添加方法

在[blogroot]/source/css文件夹下新建文件theme-gradient.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
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
/* ========== 公共渐变背景 ========== */
:root {
    --light-gradient: linear-gradient(-45deg, rgba(245, 245, 245, 0.6), rgba(230, 230, 230, 0.4), rgba(215, 215, 215, 0.4), rgba(245, 245, 245, 0.6));
    --dark-gradient: linear-gradient(-45deg, rgba(5, 10, 25, 0.6), rgba(15, 25, 50, 0.4), rgba(30, 40, 70, 0.4), rgba(5, 10, 25, 0.6));
}

/* ========== 侧边栏卡片通用样式 ========== */
#aside-content>.card-widget,
#aside-content>.sticky_layout>.card-widget,
#aside-content>#card-poem.card-widget {
    position: relative;
    z-index: 1;
    background: var(--light-gradient);
    /* 模糊效果 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========== 文章、分类、时间轴页面通用样式 ========== */
.layout>#post,
.layout>#page,
.layout>#archive,
.layout>#category,
.layout>#tag {
    background: var(--light-gradient);
    /* 模糊效果 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========== 首页文章预览 ========== */
#recent-posts>.recent-post-items>.recent-post-item {
    background: var(--light-gradient);
    /* 模糊效果 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ========== 深色主题 ========== */
[data-theme=dark] {

    /* 侧边栏卡片 */
    #aside-content>.card-widget,
    #aside-content>.sticky_layout>.card-widget,
    #aside-content>#card-poem.card-widget {
        background: var(--dark-gradient);
    }

    /* 页面主体 */
    .layout>#post,
    .layout>#page,
    .layout>#archive,
    .layout>#category,
    .layout>#tag {
        background: var(--dark-gradient);
    }

    /* 首页文章预览 */
    #recent-posts>.recent-post-items>.recent-post-item {
        background: var(--dark-gradient);
    }

    /* 社交按钮 */
    .social-icon i {
        color: rgba(188, 188, 188) !important;
    }
}

引入新建的 css 文件，在主题的配置文件_config.butterfly.yml的 inject 中添加相应的内容

1
2
3
4
5
6
7
8
# Inject
# 插入代码到 head（在 '</head>' 标签之前）和底部（在 '</body>' 标签之前）
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <link rel="stylesheet" href="/css/theme-gradient.css">
  bottom:
    # - <script src="xxxx"></script>