Hexo-Butterfly修改记录
Hexo Butterfly 修改记录。
准备
在
[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，修改代码存于此处。在主题配置文件
[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，引入刚刚创建的custom.css文件（这是相对路径的写法）
1inject:
2 head:
3 - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
背景一图流
1/* 页脚与头图透明 */
2#footer {
3 background: transparent !important;
4}
5#page-header {
6 background: transparent !important;
7}
8
9/* 白天模式遮罩透明 */
10#footer::before {
11 background: transparent !important;
12}
13#page-header::before {
14 background: transparent !important;
15}
16
17/* 夜间模式遮罩透明 */
18[data-theme="dark"] #footer::before {
19 background: transparent !important;
20}
21[data-theme="dark"] #page-header::before {
22 background: transparent !important;
23}
编辑主题设置 index_img、background、footer_bg 选项。
1index_img:
2background: url(https://example.com/img/background.jpg)
3footer_bg: false
文章目录模糊效果
1
2/* 文章目录 */
3#aside-content #card-toc .toc-content .toc-link.active {
4 line-height: 1.2;
5 border-radius: 12px;
6 border-left-color: var(--heo-hovertext);
7 background-color: var(--heo-card-bg);
8 color: var(--heo-lighttext);
9 font-weight: bold;
10 font-size: 20px;
11}
12
13[data-theme=dark].toc .toc-item.active .toc-link .toc-text {
14 color: var(--heo-white);
15}
16
17#aside-content #card-toc .toc-content .toc-item.active .toc-link {
18 opacity: 1;
19 border-radius: 8px;
20}
21
22#aside-content #card-toc .toc-content .toc-link {
23 line-height: 1.2;
24 padding: 8px;
25 border-left: 0px solid transparent;
26 border-radius: 12px;
27 color: var(--heo-secondtext);
28 cursor: default;
29}
30
31#aside-content #card-toc .toc-content .toc-link:not(.active) span {
32 opacity: 0.6;
33 cursor: pointer;
34 filter: blur(1px);
35 transition: 0.3s;
36}
37
38#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
39 filter: blur(0px);
40 opacity: 1;
41}
42
43#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
44 color: var(--heo-lighttext);
45}
页面透明度
1:root {
2 --trans-light: rgba(255, 255, 255, 0.88);
3 --trans-dark: rgba(25, 25, 25, 0.88);
4 --border-style: 1px solid rgb(169, 169, 169);
5 --backdrop-filter: blur(5px) saturate(150%);
6}
7
8/* 首页文章卡片 */
9#recent-posts > .recent-post-item {
10 background: var(--trans-light);
11 backdrop-filter: var(--backdrop-filter);
12 border-radius: 25px;
13 border: var(--border-style);
14}
15
16/* 首页侧栏卡片 */
17#aside-content .card-widget {
18 background: var(--trans-light);
19 backdrop-filter: var(--backdrop-filter);
20 border-radius: 18px;
21 border: var(--border-style);
22}
23
24/* 文章页、归档页、普通页面 */
25div#post,
26div#page,
27div#archive {
28 background: var(--trans-light);
29 backdrop-filter: var(--backdrop-filter);
30 border: var(--border-style);
31 border-radius: 20px;
32}
33
34/* 导航栏 */
35#page-header.nav-fixed #nav {
36 background: rgba(255, 255, 255, 0.75);
37 backdrop-filter: var(--backdrop-filter);
38}
39
40[data-theme="dark"] #page-header.nav-fixed #nav {
41 background: rgba(0, 0, 0, 0.7) !important;
42}
43
44/* 夜间模式遮罩 */
45[data-theme="dark"] #recent-posts > .recent-post-item,
46[data-theme="dark"] #aside-content .card-widget,
47[data-theme="dark"] div#post,
48[data-theme="dark"] div#archive,
49[data-theme="dark"] div#page {
50 background: var(--trans-dark);
51}
52
53
54/* 夜间模式页脚页头遮罩透明 */
55[data-theme="dark"] #footer::before {
56 background: transparent !important;
57}
58[data-theme="dark"] #page-header::before {
59 background: transparent !important;
60}
61
62/* 阅读模式 */
63.read-mode #aside-content .card-widget {
64 background: rgba(158, 204, 171, 0.5) !important;
65}
66.read-mode div#post {
67 background: rgba(158, 204, 171, 0.5) !important;
68}
69
70/* 夜间模式下的阅读模式 */
71[data-theme="dark"] .read-mode #aside-content .card-widget {
72 background: rgba(25, 25, 25, 0.9) !important;
73 color: #ffffff;
74}
75[data-theme="dark"] .read-mode div#post {
76 background: rgba(25, 25, 25, 0.9) !important;
77 color: #ffffff;
78}
--trans-light：白天模式带透明度的背景色，如rgba(255, 255, 255, 0.88)底色是纯白色，其中0.88就透明度，在0-1之间调节，值越大越不透明；--trans-dark: 夜间模式带透明度的背景色，如rgba(25, 25, 25, 0.88)底色是柔和黑色，其中0.88就透明度，在0-1之间调节，值越大越不透明；--border-style: 边框样式，1px solid rgb(169, 169, 169)指宽度为1px的灰色实体边框；--backdrop-filter: 背景过滤器，如blur(5px) saturate(150%)表示饱和度为150%的、高斯模糊半径为5px的过滤器，这是亚克力效果的一种实现方法。
参考
最后修改于 2024-05-08
