butterfly自带的侧边按钮外观一般,来重写一个

  • 先关掉默认的侧边按钮
1
2
3
4
5
# aside (側邊欄)
# --------------------------------------

aside:
button: false

1.修改themes/butterfly/layout/includes/layout.pug:

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
......

include ./rightside.pug
!=partial('includes/third-party/search/index', {}, {cache: true})
include ./additional-js.pug
+ .consolebtn(onclick="btf.scrollToDest(0,500)")
+ i.fas.fa-arrow-up
+ span#percent 0
+ include ./waves.pug
+ #console_open_close_btn(onclick='showconsolebtn()')
+ i.fas.fa-gear.fa-spin
+ #console-pannel
+ | 控制台
+ .console-item
+ .console-button(onclick='hideaside()')
+ i.fas.fa-arrows-alt-h
+ .text 侧栏隐显
+ .console-item
+ .console-button(onclick='toggleTheme()')
+ i.fas.fa-adjust
+ .text 暗色模式
+ .console-item
+ .console-button(onclick='hidehometop()')
+ i.fas.fa-grip-vertical
+ .text 顶部隐显
+ .console-item
+ .console-button(onclick='toRandomPost()')
+ i.fas.fa-shuffle
+ .text 随机文章
+ script(src="/js/console.js")

2.新建themes/butterfly/source/css/_layout/console.styl

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
#console_open_close_btn
position: fixed
border-radius: 100vh
width: 40px
height 40px
padding: 4px
z-index: 10002
background: var(--heo-theme)
bottom: 97px
border: 2px solid #e3e8f7
right: 7px

[data-theme="dark"] #console_open_close_btn
border: 2px solid #3d3d3f

#console_open_close_btn i
line-height: 2
position: relative
bottom: 7%
align-items: center
display: flex
justify-content: center
color: var(--heo-font)

#console-pannel
position: fixed
bottom: 145px
display: block
z-index: 10002
background: var(--heo-theme)
transition: right .5s
color: var(--heo-font)
width: 115px
right: -115px
height: fit-content
padding: 10px
border-radius: 20px
font-weight: 600
border: 2px solid #e3e8f7

[data-theme="dark"] #console-pannel
border: 2px solid #3d3d3f

#console-pannel .console-item .console-button
display: flex

#console-pannel .console-item .console-button i
flex: 1
margin-right: 4px
line-height: 2

#console-pannel .close-button
right: 20px
position: absolute

.consolebtn
position: fixed
bottom: 15px
overflow: hidden
right: 15px
background: #94ddee
border-radius: 100vh
border: 2.5px solid #00d0ff
height: 80px
width: 80px
z-index: 10000
user-select: none

[data-theme="dark"] .consolebtn
background: #3d3d3d
border: 2.5px solid #F2B94B

.consolebtn span#percent
font-size: 30px
justify-content: center
align-items: center
display: flex
font-weight: 700
color: #fff
text-shadow: 2px 1px #000
margin: auto
z-index inherit
top: 6px
position: relative

.consolebtn i
font-size: 30px
justify-content: center
align-items: center
display: none
color: #fff
text-shadow: 2px 1px #000
font-weight: 700
margin: auto
z-index inherit
top: 20px
position: relative

.consolebtn:hover i
display: flex

.consolebtn:hover span#percent
display: none

.consolebtn .main-hero-waves-area
width: 100%
height 50%
position: absolute
bottom: 0
left: 0
.parallax>use:nth-child(1)
fill: #1a55ffbd
.parallax>use:nth-child(2)
fill: #1a55ff82
.parallax>use:nth-child(3)
fill: #1a55ff36
.parallax>use:nth-child(4)
fill: #1a55ff

[data-theme="dark"] .consolebtn .main-hero-waves-area
.parallax>use:nth-child(1)
fill: #F2B94Bbd
.parallax>use:nth-child(2)
fill: #F2B94B82
.parallax>use:nth-child(3)
fill: #F2B94B36
.parallax>use:nth-child(4)
fill: #F2B94B

3.引入如下css(此部分来自安知鱼的波浪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
/* 波浪css */
.main-hero-waves-area {
width: 100%;
left: 0;
position: relative;
bottom: -11px;
top: 12px;
z-index: 5;
}
.waves-area .waves-svg {
width: 100%;
height: 5rem;
}
/* Animation */

.parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
fill: #18171d;
}

@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}

.post-bg .main-hero-waves-area {
top: 420px !important;
}

4.引入console.js

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// 返回顶部 显示网页阅读进度
window.onscroll = percent; // 执行函数
// 页面百分比
function percent() {
let a = document.documentElement.scrollTop || window.pageYOffset, // 卷去高度
b =
Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
) - document.documentElement.clientHeight, // 整个网页高度 减去 可视高度
result = Math.round((a / b) * 100), // 计算百分比
btn = document.querySelector("#percent"); // 获取图标
(btn.innerHTML = result);
}

document.getElementById("page-name").innerText = document.title.split(" | blog")[0];

function toggleTheme() {
var currentTheme = document.documentElement.getAttribute("data-theme");
var targetTheme = currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", targetTheme);
new Vue({
data: function () {
this.$notify({
title: "切换成功",
message: "dark/light",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 4000
});
}
})
}

function showconsolebtn() {
var consolebtn = document.getElementById('console-pannel');
if (consolebtn.style.right === '7px') {
consolebtn.style.right = '-115px';
} else {
consolebtn.style.right = '7px'
}
}

function hideaside() {
var aside = document.getElementById('aside-content');
var postmodule = document.getElementsByClassName('maininner')[0];
if (aside.style.display === 'none') {
aside.style.display = 'block';
postmodule.style.width = '74%';
new Vue({
data: function () {
this.$notify({
title: "设置成功",
message: "已显示侧边栏",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 4000
});
}
})
}
else {
aside.style.display = 'none';
postmodule.style.width = '100%';
new Vue({
data: function () {
this.$notify({
title: "设置成功",
message: "已隐藏侧边栏",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 4000
});
}
})
}
}

function hidehometop() {
var hometop = document.getElementsByClassName('hometop')[0];
if (hometop.style.display === 'none') {
hometop.style.display = 'block';
new Vue({
data: function () {
this.$notify({
title: "设置成功",
message: "已显示顶部",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 4000
});
}
})
}
else {
hometop.style.display = 'none';
new Vue({
data: function () {
this.$notify({
title: "设置成功",
message: "已隐藏顶部",
position: 'top-left',
offset: 50,
showClose: true,
type: "success",
duration: 4000
});
}
})
}
}

5.修改themes/butterfly/layout/post.pug

1
2
3
4
5
6
extends includes/layout.pug

block content
- #post
+ #post.maininner
if top_img === false

6.修改themes/butterfly/layout/index.pug

1
2
3
4
block content
include ./includes/mixins/post-ui.pug
- #recent-posts.recent-posts
+ #recent-posts.recent-posts.maininner

7.引入vueelement-ui(来自fomal)

  • themes/butterfly/layout/includes/layout.pug

    1
    2
    3
    4
    5
    6
    7
    doctype html
    html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside)
    head
    include ./head.pug
    + link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css")
    + script(async='' src='https://cdn1.tianli0.top/npm/vue@2.6.14/dist/vue.min.js')
    + script(async='' src='https://cdn1.tianli0.top/npm/element-ui@2.15.6/lib/index.js')