惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
V2EX
P
Proofpoint News Feed
D
DataBreaches.Net
C
Check Point Blog
L
LangChain Blog
量
量子位
美
美团技术团队
Vercel News
Vercel News
人人都是产品经理
人人都是产品经理
N
Netflix TechBlog - Medium
V
Visual Studio Blog
Microsoft Security Blog
Microsoft Security Blog
博
博客园 - 【当耐特】
MongoDB | Blog
MongoDB | Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Last Week in AI
Last Week in AI
The GitHub Blog
The GitHub Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
U
Unit 42
腾
腾讯CDC
M
MIT News - Artificial intelligence
Microsoft Azure Blog
Microsoft Azure Blog
Blog — PlanetScale
Blog — PlanetScale

HiPeach

服务器沦为矿机：青龙面板遭恶意植入挖矿程序实录 使用acme.sh自动获取并续签SSL证书 2024 | 迟到的年度总结 Minecraft 15周年：游戏半价折扣 Authy 导出数据 2023 | 年度总结 更改 Minecraft 用户名和皮肤 我的英文名 Twikoo 邮件通知模板 使用 BetterNCM 美化网易云音乐 使用 Mirai 搭建 QQ 机器人 2022 | 年度总结 Butterfly 主题魔改 - 页脚 Butterfly 主题魔改 - 友情链接 Buttetfly 主题魔改 - 关于页面 Butterfly 主题魔改 - 标题图标样式 Butterfly 主题魔改 - 打赏按钮 Vercel + MongoDB 无服务器配置Twikoo评论 Hypixel 安全警报申诉 免费申请EU.ORG域名并转入Cloudflare
Butterfly 主题魔改 - 微调笔记
HiPeach · 2022-12-19 · via HiPeach
博客相关主题魔改

博文迁移计划：本文由博客旧站迁移而来，仅对图片和错误显示的文字进行勘误翻新，对博文本身所述内容不做更改，望周知
魔改系列提示：本教程适用于原版 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; 
color: #49b1f540; 
font-size: 6rem; 
}
颜色代码
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;
}

头像头像

HiPeach

月波微澜

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HiPeach！

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。