样式引入

  • 下载源码
  • [BlogRoot]\themes\butterfly\source\css\引入下载的MyStyle\MyStyle.css文件
  • 在主题配置文件引入
1
2
3
4
inject:
head:
# 美化和标签CSS
- <link rel="stylesheet" href="/css/MyStyle/MyStyle.css" media="defer" onload="this.media='all'"/>

视觉美化

阿里云Iconfont

  • 打开iconfont的网站,点击导航栏的人像图标,会跳出注册界面,按要求注册账户。
  • 选择自己需要的图标,把鼠标移到图标上,会显示三個个按钮(依次是添加入库、收藏和下载),而我们需要的是把图标添加入库
  • 加入购物车后,点击购物车,并把图标加入项目

  • 添加到项目之后,点击Font class,然后再点击暂无代码,点击生成文字,网站会自动生产CSS链接,我们只需要复制链接就行

  • 可以点开链接把代码引入自己的CSS文件中,也可以复制链接,在主题配置文件中引入CDN
  • 使用格式为iconfont icon名字
  • 修改图标大小和颜色:引入以下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
/*.icon-bilibili:before {
content: "\e600";
} */
/* 卡片处小图标 */
.card_icon_bilibili {
/* 修改颜色 */
color: #FF69B4;
/* 修改大小 */
font-size: 24px;

}

.card_icon_git{
/* 修改颜色 */
color: #6495ED;
/* 修改大小 */
font-size: 24px;
}

.card_icon_qq{
/* 修改颜色 */
color:#FF8C00 ;
/* 修改大小 */
font-size: 24px;
}

.card_icon_csdn{
/* 修改颜色 */
color: #FF0000;
/* 修改大小 */
font-size: 24px;
}

.card_icon_zhihu{
/* 修改颜色 */
color: #00BFFF;
/* 修改大小 */
font-size: 24px;
}

fontawesome

鼠标样式

  • 在主题配置文件中引入CSS
1
2
3
4
5
6
7
8
9
/*设置鼠标样式*/
body {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
default;
}
a,img {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}

页脚渐变

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
/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
0% {
background-position: 0 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
}
}

@keyframes Gradient {
0% {
background-position: 0 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0 50%;
}
}
#footer {
background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
-o-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#footer:before {
background-color: rgba(0, 0, 0, 0);
}

1
2
3
4
/*页脚a标签字体颜色*/
#footer-wrap a {
color: #00c4b6;
}

背景渐变

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
#web_bg {
background: -webkit-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -moz-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -o-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -ms-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: linear-gradient(
90deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
}

并把主题配置文件中的background设置为 "#efefef" ,否则有可能不会生效

文章透明度

1
2
3
4
5
6
7
8
9
10
* 文章页背景 */
.layout>#post {
/* 以下代表白色透明度为0.3*/
background: rgba(255,255,255,.3);
}
/* 所有背景(包括首页卡片、文章页、页面页等) */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
/* 以下代表白色透明度为0.3 */
background: rgba(255,255,255,.3);
}

关于选择器名称可能不同,解决方法是通过F12调试查看对应的选择器名称

昵称颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 博主昵称颜色 */
.author-info__name {
color: #ff7242;
}

/* 首页中间打字效果上方 博客昵称颜色*/
#page-header #site_title {
color: #80bdab;
}
/* 顶部导航栏 博客昵称颜色*/
#nav a {
color: #f9f2f4;
}

图片虚影特效

  • 引入以下CSS样式即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*图片虚影*/
.post_bg{
-webkit-animation: imgblur 2s 1 ease-in-out;
animation: imgblur 2s 1 ease-in-out;
}
@-webkit-keyframes imgblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
@keyframes imgblur {
0% {
filter: blur(5px);
}
100% {
filter: blur(0px);
}
}

MAC代码框美化

Mono本地字体

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
/*以下是本地字体引入*/
@font-face {
font-family : 'JetBrains Mono' ; /*字体名称*/
src : url('https://cdn.jsdelivr.net/gh/xiaoliblog/xiaoliblog.github.io/css/fonts/JetBrainsMono/fonts/webfonts/JetBrainsMono-Medium.woff2');/*字体资源*/
}

#article-container pre, #article-container code{
font-family: 'JetBrains Mono' !important;
font-size:16px !important;
}

/*以下是代码颜色搭配,自行引入CSS*/

/*代码颜色,代码框背景*/
#article-container figure.highlight,#article-container pre{
color:#a9a9a9;background:#f6f8fa
}
/*顶部栏代码种类字体颜色和背景*/
#article-container figure.highlight .highlight-tools{
color:#a9a9a9;background:#f3f3f3
}
/*侧边栏行数颜色和背景*/
#article-container figure.highlight .gutter pre{
color:#999;background:#f6f8fa
}
/*HTML属性颜色*/
#article-container figure.highlight .attr{
color:#39adb5;
}

/*HTML属性值*/
#article-container figure.highlight .string{
color:#f6aa43;
}
  • 然后找的主题配置文件_config.xml引入CSS即可
1
2
3
inject:
head:
- <link rel="stylesheet" href="/css/JetBrainsMono.css">

主题颜色

  • 找到主题配置文件里theme_color
1
2
3
4
5
6
7
8
9
10
11
12
13
14
theme_color: #(自定义主题色)
enable: true
main: "#49B1F5" #文章颜色
paginator: "#00c4b6" #分页器颜色
button_hover: "#FF7242" # 鼠标移动到按钮上的显示的颜色
text_selection: "#00c4b6" #选择文字的背景颜色
link_color: "#99a9bf" #链接颜色
meta_color: "#858585"
hr_color: "#A4D8FA" # 小剪刀颜色、小摩托颜色
code_foreground: "#F47466" # 代码`code`的颜色
code_background: "rgba(27, 31, 35, .05)" # 代码`code`的背景颜色
toc_color: "#00c4b6"
blockquote_padding_color: "#49b1f5" # > >> >>> 描述颜色
blockquote_background_color: "#49b1f5"

公告栏装饰

  • C:\lzyblog\themes\Butterfly\_config.yml 里找到 card_announcement: 下的 content: 后面添加
1
2
3
card_announcement: #公告栏
enable: true
content: 城市的轮廓,你的孤独<img src="https://cdn.jsdelivr.net/gh/lzyblog/image@main/2020/11/19/33a1542ce0a798e62e404f0bd948149f.png">