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

推荐订阅源

Y
Y Combinator Blog
宝玉的分享
宝玉的分享
月光博客
月光博客
小众软件
小众软件
Jina AI
Jina AI
WordPress大学
WordPress大学
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 【当耐特】
博客园 - 三生石上(FineUI控件)
博客园 - 司徒正美
大猫的无限游戏
大猫的无限游戏
The Cloudflare Blog
G
Google Developers Blog
M
MIT News - Artificial intelligence
N
Netflix TechBlog - Medium
云风的 BLOG
云风的 BLOG
MyScale Blog
MyScale Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
爱范儿
爱范儿
U
Unit 42
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
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 主题,对其衍生再发行版本的可用性不做保证

前言

魔改永无止境,借鉴永不停止!

参考教程
查看效果

Preview

修改主题配置文件

修改 _config.butterfly.yml

1
2
3
4
5
6
7
beautify:
enable: true
field: post # site/post
- title-prefix-icon: # '\f0c1'
- title-prefix-icon-color: # '#F47466'
+ title-prefix-icon: '\f863'
+ title-prefix-icon-color: "#F47466"

修改自定义CSS文件

以下CSS样式可添加进任何已引入的.css文件中
例如,在 [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

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
-webkit-animation: ccc 1.6s linear infinite;
animation: ccc 1.6s linear infinite;
}
@-webkit-keyframes ccc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
@keyframes ccc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
#content-inner.layout h1::before {
color: #ef50a8;
margin-left: -1.55rem;
font-size: 1.3rem;
margin-top: -0.23rem;
}
#content-inner.layout h2::before {
color: #fb7061;
margin-left: -1.35rem;
font-size: 1.1rem;
margin-top: -0.12rem;
}
#content-inner.layout h3::before {
color: #ffbf00;
margin-left: -1.22rem;
font-size: 0.95rem;
margin-top: -0.09rem;
}
#content-inner.layout h4::before {
color: #a9e000;
margin-left: -1.05rem;
font-size: 0.8rem;
margin-top: -0.09rem;
}
#content-inner.layout h5::before {
color: #57c850;
margin-left: -0.9rem;
font-size: 0.7rem;
margin-top: 0rem;
}
#content-inner.layout h6::before {
color: #5ec1e0;
margin-left: -0.9rem;
font-size: 0.66rem;
margin-top: 0rem;
}
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
color: rgb(90,135,255);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
color: rgb(90,135,255);
-webkit-animation: ccc 3.2s linear infinite;
animation: ccc 3.2s linear infinite;
}


#rightside_config i.fas.fa-cog.fa-spin {
animation: fa-spin 5s linear infinite;
}

完成

如你所见,就是这么简单
请使用 Hexo三连 秘法
然后进入任意文章查看效果

头像头像

HiPeach

月波微澜

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