前言

此篇文章会持续随着 Butterfly主题版本更新,如果你喜欢那就 Ctrl+D 吧😉

此次修改无修改源码,全部采用外部引用 JSCSS 覆盖实现
可放心使用,后期如需主题升级,可直接根据主题作者文档升级即可。

此片文章是根据 Butterfly-Master(稳定版) 分支更新的
如果你使用的是 Buutterfly-Dev(开发版) 的话
遇到的一切问题本贴不给予回复处理

问题

  1. 安装或者切换主题后hexo s 打开http://localhost:4000/后抱错
1
extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug

未安装pug依赖和渲染插件依赖

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

CSS修改

新建Hexo-Butterfly\themes\Butterfly-Master\source\css\Lete.css(css文件名自定义)

自定义字体

1
2
3
4
5
/* 自定义字体 */
@font-face {
font-family: 'sleek';
src: url('https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2');
}

打开主题配置文件,找到

1
2
3
4
5
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
font-family: 'sleek' # 全局字体
code-font: 'sleek' # 如果你想让代码块也使用自定义字体

UP酱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 隐藏回到顶部按钮,替换为up酱 */

#go-up i {
display: none;
background-color: transparent !important;
}

#go-up {
background-color: transparent !important;
}

#upj {
transform: translate(-70px, -80px) !important;
}

目录折叠按钮颜色

也就是左下角的那个按钮

1
2
3
4
5
6
/* 目录隐藏按钮颜色 */

#toggle-sidebar {
color: #e58a8a !important;
}

版权去划线

1
2
3
4
5
/* 版权链接去掉下划线 */

.layout_post .post-copyright .post-copyright-info a {
text-decoration: none;
}

博主昵称颜色

也就是首页侧边栏头像下面那个昵称

1
2
3
4
/* 博主昵称颜色 */
.author-info__name {
color: #ff7242;
}

评论框样式优化

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
/* 评论框  */

.vwrap {
box-shadow: 2px 2px 5px #bbb;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 30px;
margin: 30px 0px 30px 0px;
}


/* 提交按钮 */

#vcomment button {
padding: 0.3rem 0.8rem;
border-color: #fff;
background-color: #e58a8a;
color: #fff;
font-size: 0.7rem;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}


/* 评论区代码块 */

.v[data-class=v] code {
color: #c7254e;
background-color: #F9F2F4;
}
/* 设置评论框 */

.vcard {
box-shadow: 2px 2px 5px #bbb;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 30px;
margin: 30px 0px 0px 0px;
}


/* 取消回复聊天框 */

.vquote .vcard {
box-shadow: 2px 2px 5px transparent;
background: rgba(255, 255, 255, 0.0);
padding: 0px;
}

页脚透明

1
2
3
4
5
6
/* 页脚透明 */

#footer {
background: transparent !important;
}

a标签颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* a标签默认颜色 */

#article-container a {
color: #00c4b6;
text-decoration: none;
}

/* 鼠标悬停时的颜色 */

#article-container a:hover {
color: #e58a8a;
text-decoration: none;
}
/*a标签颜色*/
a {
color: #00c4b6;
}

首页博客昵称颜色

1
2
3
4
5
6
7
8
/* 首页中间打字效果上方 */
#page-header #site_title {
color: #80bdab;
}
/* 顶部导航栏 */
#nav a {
color: #f9f2f4;
}

页脚超链接

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

页脚字体颜色

1
2
3
4
5
/*页脚自定义字段字体颜色*/
/* 也就是配置文件里的footer_custom_text */
.footer_custom_text {
color: #00c4b6;
}

手机端显示

1
2
3
4
5
6
7
8
/*移动端优化:去除归档、标签、最新文章、公告、、只保留网站统计*/

@media screen and (max-width: 800px) {
#aside_content div:not(:last-child) {
display: none;
font-size: 13px;
}
}

鼠标样式

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
/* 鼠标图标 */

body {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/Jkll8I.png), auto;
}


/*a标签*/

a:hover {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*按钮*/

button:hover {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

#rightside>div>button,
#rightside>div>a {
display: block;
margin-bottom: 2px;
width: 30px;
height: 30px;
color: var(--btn-color);
text-align: center;
font-size: 16px;
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 打赏 */

.post-reward .reward-button {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 文章标签 */

.layout_post .tag_share .post-meta__tags {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 评论区 */

.vcol * {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

.v[data-class=v] .vicon {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

.v[data-class=v] .vbtn {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 回复 */

.vat {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*i标签*/

i:hover {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*up酱*/

#upj:hover {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*页脚a标签*/

#footer-wrap a:hover {
text-decoration: none;
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*分页器*/

#pagination .page-number:hover {
cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}
/* 分页器的三个点(...) */
.space {
color: #00c4b6;
}

滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 滚动条 */

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background-color: #e58a8a;
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;
}

::-moz-selection {
color: #fff;
background-color: #e58a8a;
}

打字效果渐变

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
/* 打字效果渐变 */

@-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%;
}
}

#subtitle {
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;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#subtitle:before {
background-color: rgba(0, 0, 0, 0);
}

JS修改

新建Hexo-Butterfly\themes\Butterfly-Master\source\js\Lete.js(js文件名自定义)

UP酱

1
2
3
4
/*添加图片top*/
var top_up = "<img id='upj' class='upj' style='max-width: 1000%; transform: translate(-70px,-70px);' src='https://cdn.jsdelivr.net/gh/lete114/CDN/Use/up.gif' title='回到顶部' >";
/*添加到返回顶部按钮下*/
document.getElementById("go-up").innerHTML += top_up;

手机端

1
2
3
4
5
6
7
8
/* 手机客户端导航栏默认隐藏 */
var mobile_sidebar_menus = document.getElementById("mobile-sidebar-menus");
var menus_item_child = mobile_sidebar_menus.getElementsByClassName("menus_item_child");
var menus_expand = mobile_sidebar_menus.getElementsByClassName("expand");
for (var i = 0; i < menus_item_child.length; i++) {
menus_item_child[i].style.display = "none";
menus_expand[i].className += " closed";
}

卖萌标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 可爱的Title
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/favicon.ico");
document.title = '(つェ⊂) 我藏好了哦~~';
clearTimeout(titleTime);
} else {
$('[rel="icon"]').attr('href', "/img/favicon.ico");
document.title = '(*´∇`*) 被你发现啦~~' + OriginTitle;
titleTime = setTimeout(function() {
document.title = OriginTitle;
}, 2000);
}
});

气泡

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
// 气泡
function qipao() {
$('#page-header').circleMagic({
radius: 10,
density: .2,
color: 'rgba(255,255,255,.4)',
clearOffset: 0.99
});
}! function(p) {
p.fn.circleMagic = function(t) {
var o, a, n, r, e = !0,
i = [],
d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
l = this[0];

function c() { e = !(document.body.scrollTop > a) }

function s() { o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a }

function h() {
if (e)
for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
requestAnimationFrame(h)
}

function f() {
var t = this;

function e() { t.pos.x = Math.random() * o, t.pos.y = a + 100 * Math.random(), t.alpha = .1 + Math.random() * d.clearOffset, t.scale = .1 + .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" + Math.floor(255 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.random().toPrecision(2) + ")" : t.color = d.color }
t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
}! function() {
o = l.offsetWidth, a = l.offsetHeight,
function() {
var t = document.createElement("canvas");
t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
}(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
for (var t = 0; t < o * d.density; t++) {
var e = new f;
i.push(e)
}
h()
}(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
}
}(jQuery);

// 调用气泡方法
qipao();

页脚博主

1
2
3
$(document).ready(function(e) {
$('.copyright').html('©2020 <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;" class="fa fa-heartbeat"></i> Lete乐特');
});

引入

打开主题配置文件找到inject
bottom下添加

1
2
3
bottom:
- <link rel="stylesheet" href="https://blog.lete114.top/css/Lete.css">
- <script data-pjax src="https://blog.lete114.top/js/Lete.js"></script>

持续更新…

CSS:https://blog.lete114.top/css/Lete.css
JS:https://blog.lete114.top/js/Lete.js