前言

给侧栏加点样式，主要改个人信息卡片的背景、标签云和归档列表。卡片本身还是主题自带的，不用另外装插件。

美化之前

本站使用 Hexo 6.0.0 + Butterfly 4.5.1，其他版本请按实际情况调整。样式、脚本引入及全局变量用法可参考：

🏠 站内链接，放心访问
Hexo博客添加自定义css和js文件
June's Blog
🏠 站内链接，放心访问
Butterfly自用全局变量
June's Blog

参考链接

  • 安知鱼《butterfly 重装日记》：https://blog.anheyu.com/posts/sdxhu.html（原链接暂不可用）。

修改方案

1. 保留原来的卡片结构

themes/butterfly/layout/includes/widget/index.pug 决定哪些卡片被渲染，_config.butterfly.yml 的 aside 则控制各项开关。先确认卡片能出现，再加 CSS，没有开启的卡片需要先在配置里打开。

个人卡片背景图分了亮色和深色两张，换成自己喜欢的图片即可。颜色变量也加了默认值，没有配置本站变量的可以直接用。

2. 添加样式

新建 source/static/css/aside-beautify.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/* tags样式 */
#aside-content .card-tag-cloud a {
    color: var(--june-fontcolor, var(--font-color)) !important;
    font-size: 1.05rem !important;
    border-radius: 8px;
    display: inline-block;
    margin-right: 4px;
}
#aside-content .card-tag-cloud a:hover {
    background: var(--june-theme, #49b1f5);
    color: var(--june-white, #fff) !important;
    box-shadow: var(--june-shadow-theme, 0 4px 12px #49b1f544);
}
@media screen and (min-width: 1300px) {
    #aside-content .card-tag-cloud a:hover {
        transform: scale(1.03);
    }
    #aside-content .card-tag-cloud a:active {
        transform: scale(0.97);
    }
}
#aside-content .card-tag-cloud a sup {
    opacity: 0.4;
    margin-left: 2px;
}

/* 归档样式 */
span.card-archive-list-count {
    width: auto;
    text-align: left;
    font-size: 1.1rem;
    line-height: 0.9;
    font-weight: 700;
}
.card-archive-list-count-group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:last-child,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:last-child {
    width: fit-content;
    margin-left: 4px;
}
.card-archive-list-date {
    font-size: 14px;
    opacity: 0.6;
}
li.card-archive-list-item {
    width: 100%;
    flex: 0 0 48%;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
    color: var(--june-white, #fff);
    background-color: var(--june-theme, #49b1f5);
    box-shadow: var(--june-shadow-theme, 0 4px 12px #49b1f544);
    border-radius: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
@media screen and (min-width: 1300px) {
    #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:hover,
    #aside-content .card-categories ul.card-category-list > .card-category-list-item a:hover {
        transform: scale(1.03);
    }
    #aside-content .card-archives ul.card-archive-list > .card-archive-list-item a:active,
    #aside-content .card-categories ul.card-category-list > .card-category-list-item a:active {
        transform: scale(0.97);
    }
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    border-radius: 8px;
    margin: 4px 0;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    border: var(--style-border, 1px solid #e3e8ef);
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a span:first-child,
#aside-content .card-categories ul.card-category-list > .card-category-list-item a span:first-child {
    width: auto;
    flex: inherit;
}
#aside-content .card-archives ul.card-archive-list,
#aside-content .card-categories ul.card-category-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 个人信息卡片social图标悬浮 */
#aside-content .card-info .card-info-social-icons .social-icon :hover{
    transform: scale(1.5);
}

#aside-content .avatar-img :hover{
    transform: none;
}

/* 个人卡片背景 */
[data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://img.june-pj.cn/img/2024%2F04%2Fpersonalbglight.webp);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image:
        linear-gradient(180deg, rgba(16, 22, 28, 0.42), rgba(16, 22, 28, 0.76)),
        url(https://img.june-pj.cn/img/2024%2F04%2Fpersonalbgdark.webp);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
    color: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] #aside-content > .card-widget.card-info .author-info__name,
[data-theme="dark"] #aside-content > .card-widget.card-info .author-info__description,
[data-theme="dark"] #aside-content > .card-widget.card-info .site-data > a,
[data-theme="dark"] #aside-content > .card-widget.card-info .card-info-social-icons .social-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-theme="dark"] #aside-content > .card-widget.card-info .site-data > a:hover,
[data-theme="dark"] #aside-content > .card-widget.card-info .card-info-social-icons .social-icon:hover {
    color: var(--june, #49b1f5) !important;
}

@media screen and (max-width: 768px) {
    /* 移动端隐藏侧边栏边框 */
    .aside-content > .card-widget {
        border: none !important;
    }

    .aside-content > .card-widget:hover {
        border: none !important;
    }
}

然后在 _config.butterfly.yml 的 inject.head 里引入：

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

3. 深色模式

深色背景加了半透明渐变，文字也单独改成浅色。只把图片换成暗色而不检查文字，往往会让作者名、简介和统计数字读不清。

这里没有重写标签和归档的数据结构；如果自己的模板已经变过，需要核对 .card-tag-cloud、.card-archive-list 和 .card-info 这些 class 是否仍然存在。原版侧栏图标还有旋转效果，想保留或取消都可以单独覆盖，不要误以为缩放一定会移除旋转。