Butterfly 主题魔改 - 微调笔记

博文迁移计划：本文由博客旧站迁移而来，仅对图片和错误显示的文字进行勘误翻新，对博文本身所述内容不做更改，望周知
魔改系列提示：本教程适用于原版 Butterfly 主题，对其衍生再发行版本的可用性不做保证

前言

此文章将记录对 Butterfly 的各种小型魔改
将会不定时更新

各种圆角

参考教程
魔改步骤

在 [Blogroot]\source\css\custom.css 下添加…

个人信息按钮

1
2
3
4
5
/*个人信息按钮圆角*/
#card-info-btn {
  border-radius: 7px;
  overflow: hidden;
}

页码按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
/*页码按钮美化*/
.layout>.recent-posts .pagination> {
  display: inline-block;
  margin: 0 6px;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
}

/*页码按钮圆角*/
#pagination .page-number.current {
    border-radius: 7px;
}

文章卡片

1
2
3
4
/*文章卡片圆角*/
.layout > div:first-child:not(.recent-posts) {
  border-radius: 35px;
}

目录卡片

1
2
3
4
/*目录卡片圆角*/
#aside-content .card-widget {
  border-radius: 20px;
}

首页文章

1
2
3
4
/*首页文章圆角*/
.layout > .recent-posts > .recent-post-item {
    border-radius: 20px !important
}

图片

1
2
3
4
/*图片圆角*/
#article-container img {
  border-radius: 15px;
}

版权卡片

参考教程
魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*版权卡片*/
#post .post-copyright {
position: relative;
margin: 2rem 0 0.5rem;
padding: 1.5rem 0.8rem;
border: 8px solid var(--HiPeach-copyright-border); /*卡片边框*/
border-radius: 20px; /*边框圆角*/
}
#post .post-copyright:before {
position: absolute;
top: -1.9rem; /*C位置*/
color: #49b1f540; /*C颜色*/
font-size: 6rem; /*C大小*/
}
颜色代码
1
2
3
4
5
6
7
[data-theme="light"] {
  --HiPeach-copyright-border: #f6f6f6;
}

[data-theme="dark"] {
  --HiPeach-copyright-border: #212121;
}

一图到底

魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 头图透明 */
#page-header{
  background: transparent!important;
}

/*头图黑色透明玻璃效果移除 */
#page-header.post-bg:before {
  background-color: transparent!important;
}

/*伪类遮罩层透明*/
#page-header::before{
  background: transparent!important;
}

代码块文字居中

魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
/* 代码块文字居中 */
#article-container figure.highlight .highlight-tools .code-lang {
  left: 50%!important;
  transform: translateX(-50%);
}

选中文字颜色

魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
/*选中文字颜色*/
*::selection {
  background: rgba(90,135,255);
  color: #ffffff;
}

其中 rgba(90,135,255) 为选中后的文字背景
而 #ffffff 为选中后的文字颜色，均可使用变量

个人信息

参考教程
魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*个人信息美化*/
#aside-content>.card-widget.card-info {
  background: #fff url(/media/info.webp) top 18% center no-repeat;
  position: relative;
}
#aside-content .card-info .site-data {
  display: none;
}
#aside-content .card-info .author-info__name {
  font-weight: 700;
  color: black;
}
#aside-content .card-info .author-info__description {
  font-weight: 600;
  color: black;
}
.site-data > a .headline {
  color: rgb(0 0 0 / 100%);
}

滚动条

参考教程
魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #6f42c1;
  background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background-image: url(/media/scrollbar.webp);
}
注意事项
  • 如果博客背景为纯色
    请将 background-image: url(/media/scrollbar.webp); 修改为 background-color: #fff;
    其中 #fff ` 为博客背景颜色，可以填写变量
  • 如果博客背景为图片
    请使用截图工具例如QQ自带截图截下背景图右侧10px的图片并保存
    使用图片路径替换 /media/scrollbar.webp

隐藏文章描述

魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
/*隐藏文章描述*/
#recent-posts > .recent-post-item >.recent-post-info > .content {
  display: none;
}

行内代码框

魔改步骤

在 [Blogroot]\source\css\custom.css 下添加

1
2
3
4
5
6
7
/*行内代码框*/
#article-container code {
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--HiPeach-code-bg) !important;
  color: var(--HiPeach-code-color) !important;
}
颜色代码
1
2
3
4
5
6
7
8
9
[data-theme="light"] {
  --HiPeach-code-bg: #3b70fc;
  --HiPeach-code-color: #f7f7fa;
}

[data-theme="dark"] {
  --HiPeach-code-bg: #30343f;
  --HiPeach-code-color: #f2b94b;
}

目录

参考教程
魔改步骤

在 [Blogroot]\source\css\custom.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
/*目录*/
#aside-content #card-toc .toc-content {
  margin: 10px -18px;
}
 #aside-content #card-toc .toc-content .toc-link.active {
  line-height: 1.2;
  border-radius: 12px;
  border-left-color: var(--HiPeach-hovertext);
  background-color: var(--HiPeach-card-bg);
  color: var(--HiPeach-lighttext);
  font-weight: bold;
  font-size: 20px;
}
[data-theme=dark].toc .toc-item.active .toc-link .toc-text {
  color: var(--HiPeach-white);
}
#aside-content #card-toc .toc-content .toc-item.active .toc-link {
  opacity: 1;
  border-radius: 8px;
}
#aside-content #card-toc .toc-content .toc-link {
  line-height: 1.2;
  padding: 8px;
  border-left: 0px solid transparent;
  border-radius: 12px;
  color: var(--HiPeach-secondtext);
  cursor: default;
}
#aside-content #card-toc .toc-content .toc-link:not(.active) span {
  opacity: 0.6;
  cursor: pointer;
  filter: blur(1px);
  transition: 0.3s;
}
#aside-content #card-toc:hover .toc-content .toc-link:not(.active) span {
  filter: blur(0px);
  opacity: 1;
}
#aside-content #card-toc .toc-content .toc-link:not(.active) span:hover {
  color: var(--HiPeach-lighttext);
}
颜色代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:root {
  --HiPeach-white: #fff;
}

[data-theme="light"] {
  --HiPeach-hovertext: #3b70fc;
  --HiPeach-card-bg: #fff;
  --HiPeach-lighttext: #6f42c1;
  --HiPeach-secondtext: rgba(60, 60, 67, 0.6);
}

[data-theme="dark"] {
  --HiPeach-hovertext: #0a84ff;
  --HiPeach-card-bg: #1d1e22;
  --HiPeach-lighttext: #f2b94b;
  --HiPeach-secondtext: #a1a2b8;
}

Twikoo评论

参考教程
魔改步骤

在 [Blogroot]\source\css\custom.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
/* 评论区评论大框 */
.twikoo .tk-comments-container>.tk-comment {
  /* 内边距 */
  padding: 1rem;
  /* 圆角 */
  border-radius: var(--HiPeach-radius);
  /* 背景颜色 */
  background: var(--HiPeach-card-bg);
  /* 变动动画时长 */
  transition: .3s;
}

/* 浅色模式评论区评论大框 */
[data-theme=light] .twikoo .tk-comments-container>.tk-comment {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式评论区评论大框阴影悬浮加深 */
[data-theme=light] .twikoo .tk-comments-container>.tk-comment:hover {
  /* 阴影（浅色模式突出层次感） */
  box-shadow: var(--card-hover-box-shadow);
}

/* 黑暗模式评论区评论大框 */
[data-theme=dark] .twikoo .tk-comments-container>.tk-comment {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--HiPeach-card-border-width);
  /* 边框颜色 */
  border-color: var(--HiPeach-card-border);
}

/* 设备信息 */
.twikoo .tk-extra {
  /* 圆角 */
  border-radius: var(--HiPeach-radius);
  /* 背景颜色 */
  background: var(--HiPeach-card-bg);
  /* 内边距 */
  padding: 0.4rem;
  /* 底边距 */
  margin-bottom: 1rem;
  /* 变动动画时长 */
  transition: .3s;
}

/* 浅色模式设备信息 */
[data-theme=light] .twikoo .tk-extra {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式设备信息阴影悬浮加深 */
[data-theme=light] .twikoo .tk-extra:hover {
  /* 阴影 */
  box-shadow: var(--card-hover-box-shadow);
}

/* 黑暗模式设备信息 */
[data-theme=dark] .twikoo .tk-extra {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--HiPeach-card-border-width);
  /* 边框颜色 */
  border-color: var(--HiPeach-card-border);
}

/* 加载更多按钮 */
.twikoo .tk-expand {
  /* 圆角 */
  border-radius: var(--HiPeach-radius);
}

/* 浅色模式加载更多按钮 */
[data-theme=light] .twikoo .tk-expand {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式加载更多按钮（鼠标悬浮时） */
[data-theme=light] .twikoo .tk-expand:hover {
  /* 阴影 */
  box-shadow: var(--card-hover-box-shadow);
  /* 背景颜色 */
  background-color: var(--btn-bg);
}

/* 黑暗模式加载更多按钮（鼠标悬浮时） */
[data-theme=dark] .twikoo .tk-expand:hover {
  /* 背景颜色 */
  background-color: var(--HiPeach-blue);
}

/* 黑暗模式加载更多按钮 */
[data-theme=dark] .twikoo .tk-expand {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--HiPeach-card-border-width);
  /* 边框颜色 */
  border-color: var(--HiPeach-card-border);
}
颜色代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:root {
  --cxl2020mc-radius: 7px;
  --cxl2020mc-card-border-width: 1px;
}

[data-theme=light] {
  --cxl2020mc-border-color: #e3e8f7;
  --cxl2020mc-card-bg: #fff;
  --cxl2020mc-card-border: #e3e8f7;
  --style-border-always: 1px solid var(--cxl2020mc-card-border);
  --cxl2020mc-blue: #425AEF;
}

[data-theme=dark] {
  --cxl2020mc-border-color: #42444a;
  --cxl2020mc-card-bg: #1d1b26;
  --cxl2020mc-card-border: #42444a;
  --style-border-always: 1px solid var(--cxl2020mc-card-border);
  --cxl2020mc-blue: #0084FF;
}