我们主要是修改安知鱼主题默认的中控台图标，在这里就不给大家截图，修改之后的效果，可以自己替换之后看效果就可以。
1.修改CSS文件
在博客主题 /themes/anzhiyu/source/css_layout/ 目录下，找到 nav.styl 文件，在里面搜索 #nav-group ，就会找到如下文件代码
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
| #nav-group
max-width: 1400px;
width: 100%;
display: flex;
position: relative;
align-items: center;
#page-header.nav-fixed #center-console
& + label i
background: var(--font-color);
#center-console
display: none
& + label
--icon-size: 1.375rem;
position: relative;
right: 0;
top: 0;
bottom: 0;
height: var(--icon-size);
width: var(--icon-size);
cursor: pointer;
transition: 1s;
margin-left: 1rem
&:hover
i
&.left
width: calc(var(--icon-size)/2.5);
&.center
opacity: 0.5
width: calc(var(--icon-size)/2.5);
&.right
width: calc(var(--icon-size)/2.5);
height: calc(var(--icon-size)/1.15);
transform: none;
i
background: var(--light-grey);
position: absolute;
border-radius: calc(var(--icon-size)*.15);
transition: .5s var(--animation-on);
inset: 0;
margin: auto;
right: auto;
width: calc(var(--icon-size)/3);
height: calc(var(--icon-size)/3);
transform: translateY(calc(var(--icon-size)/4));
&.left
width: 100%;
transform: translateY(calc(var(--icon-size)/-4));
&.right
left: auto;
right: 0;
width: calc(var(--icon-size)/2);
&:checked + label
right: 0
top: 0.5rem;
z-index: 31;
&:hover
&::after
background: var(--anzhiyu-main) !important;
&::after
content: "";
width: 35px;
height: 35px;
display: block;
position: absolute;
z-index: -1;
top: -6px;
left: -6.3px;
background: var(--anzhiyu-fontcolor) !important;
border-radius: 50px;
&:is(.widget, .widget:hover) i
height: calc(var(--icon-size)/4.5);
background: var(--anzhiyu-white) !important;
i.left
width: 100% !important;
transform: rotate(-45deg) !important;
i.center
width: 0 !important;
i.right
width: 100% !important;
transform: rotate(45deg) !important;
[data-theme="dark"] #center-console:checked + label:is(.widget, #center-console:checked + label .widget:hover) i
background: var(--anzhiyu-black) !important;
#body-wrap
.nav-fixed #travellings_button
&::after
background: var(--anzhiyu-main) !important;
|
用下面的代码将其替换
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
| #nav-group
max-width: 1400px;
width: 100%;
display: flex;
position: relative;
align-items: center;
#page-header.nav-fixed #center-console
& + label i
background: var(--font-color);
#center-console
display: none
& + label
--icon-size: 1.30rem;
--line-thickness: calc(var(--icon-size)/6);
position: relative;
right: 0;
top: 0;
bottom: 0;
height: var(--icon-size);
width: var(--icon-size);
cursor: pointer;
transition: 1s;
margin-left: 1rem
&::after
content: "";
width: 36px;
height: 36px;
display: block;
position: absolute;
z-index: -1;
top: -6px;
left: -6.3px;
background: transparent;
border-radius: 50px;
transition: background 0.2s;
&:hover
&::after
background: var(--anzhiyu-main) !important;
i
width: calc(var(--line-thickness)*0.8);
height: calc(var(--line-thickness)*0.8);
background: #ffffff !important;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
i
background: var(--light-grey);
position: absolute;
border-radius: calc(var(--icon-size)*.15);
transition: .5s var(--animation-on);
margin: 0;
transform: none !important;
&.left
bottom: 0;
top: 0;
width: 8px;
height: 11px;
border-radius: 1px;
&.top
left: auto;
right: 1%;
top: 0;
width: 12px;
height: 8px;
border-radius: 1px;
&.right
right: 0;
bottom: auto;
top: 43%;
width: 8px;
height: 11px;
border-radius: 1px;
&.bottom
left: 0;
right: auto;
bottom: 0;
width: 12px;
height: 8px;
border-radius: 1px;
&:checked + label
right: 0
top: 0.5rem;
z-index: 31;
&:hover
&::after
background: var(--anzhiyu-main) !important;
&::after
content: "";
width: 35px;
height: 35px;
display: block;
position: absolute;
z-index: -1;
top: -6px;
left: -6.3px;
background: var(--anzhiyu-fontcolor) !important;
border-radius: 50px;
&:is(.widget, .widget:hover) i
height: calc(var(--icon-size)/4.5);
background: var(--anzhiyu-white) !important;
i.left
width: calc(var(--icon-size) * 0.8) !important;
height: calc(var(--icon-size)/6) !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) rotate(-45deg) !important;
border-radius: calc(var(--icon-size)*.15) !important;
background: #ffffff !important;
transition: none !important;
i.top
width: 0 !important;
transition: none !important;
i.right
width: calc(var(--icon-size) * 0.8) !important;
height: calc(var(--icon-size)/6) !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) rotate(45deg) !important;
border-radius: calc(var(--icon-size)*.15) !important;
background: #ffffff !important;
transition: none !important;
i.bottom
width: 0 !important;
transition: none !important;
|
2.替换pug文件
在博客根目录 /themes/anzhiyu/layout/includes/header 文件夹下，找到 nav.pug 文件，在里面找到
1
2
3
4
5
6
7
8
| if theme.centerConsole.enable
input#center-console(type="checkbox")
label.widget(for="center-console" title=_p('console.title') onclick="anzhiyu.switchConsole();")
i.left
i.widget.center
i.widget.right
!=partial('includes/anzhiyu/console', {}, {cache:true})
|
里面的代码替换为
1
2
3
4
5
6
7
8
9
| if theme.centerConsole.enable
input#center-console(type="checkbox")
label.widget(for="center-console" title=_p('console.title') onclick="anzhiyu.switchConsole();")
i.widget.left
i.widget.top
i.widget.right
i.widget.bottom
!=partial('includes/anzhiyu/console', {}, {cache:true})
|
和容易看出差一点，自己选择修改就可以。
3.结束语
最后 Hexo 三板斧，就可以在页面侧边栏查看效果。欢迎大家在评论区给予指正，让我们共同打造快节奏时代，不受算法牵制的属于我们自己的小空间！
