由于不会修改导航栏右上角的样式，手机端很多按钮不知道放哪，参考了Leonus的样式遂把按钮放在移动端侧边菜单栏。又由于不会调整按钮随着菜单栏的展开而向下移动的样式，所以把按钮放在菜单上面不动，实在是没有金刚钻，只能粗糙点了🤭
参考样式
示例
白天黑夜代码
修改布局，打开[BlogRoot]\themes\butterfly\layout\includes\sidebar.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
31
32
33
| #sidebar
#menu-mask
#sidebar-menus
.avatar-img.is-center
img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
.sidebar-site-data.site-data.is-center
a(href=url_for(config.archive_dir) + '/')
.headline= _p('aside.articles')
.length-num= site.posts.length
a(href=url_for(config.tag_dir) + '/' )
.headline= _p('aside.tags')
.length-num= site.tags.length
a(href=url_for(config.category_dir) + '/')
.headline= _p('aside.categories')
.length-num= site.categories.length
.sidebar-icons
a(href='https://www.aligu.top' title='去往主站' class="icon-button")
i.fas.fa-bus
a(href='javascript:toggleWinbox()' title='切换背景' class="icon-button")
i.fas.fa-tools
a(href='https://music.aligu.top' title='听听歌曲' class="icon-button")
i.fas.fa-headphones
a(href='javascript:toRandomPost()' title='随便逛逛' class="icon-button")
i.fa-solid.fa-paper-plane
a(href='javascript:switchNightMode()' title='暗黑模式' class="icon-button")
i.fas.fa-adjust
hr.custom-hr
!=partial('includes/header/menu_item', {}, {cache: true})
|
修改样式，打开[BlogRoot]\themes\butterfly\source\css_layout\sidebar.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
| #sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: auto
padding-left: 5px
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
display: flex
flex-direction: column
&.open
transform: translate3d(-100%, 0, 0)
.avatar-img
margin: 20px auto
.sidebar-icons
display: flex
justify-content: space-around
margin: 30px 0 20px 5px
width: 96%
background: transparent
.icon-button
display: flex
flex-direction: column
align-items: center
color: var(--font-color)
font-size: 1.25em
text-decoration: none
transition: color 0.3s ease
font-weight: 900
i
font-size: 0.95em
&:hover
color: none
.sidebar-site-data
padding: 0 10px
hr
margin: 20px auto
.menus_items
padding: 0 10px
.site-page
@extend .limit-one-line
position: relative
display: block
padding: 3px 28px 3px 20px
color: var(--font-color)
font-size: 1.15em
border-radius: 6px
&:hover
background: var(--text-bg-hover)
i:first-child
width: 15%
text-align: left
&.group
& > i:last-child
position: absolute
top: .78em
right: 13px
transition: transform .3s
&.hide
& > i:last-child
transform: rotate(90deg)
& + .menus_item_child
display: none
.menus_item_child
margin: 0
padding-left: 25px
list-style: none
|
样式修改比较多，原来的代码如下：
原来的样式代码sidebar.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
| #sidebar
#menu-mask
position: fixed
z-index: 102
display: none
width: 100%
height: 100%
background: alpha($dark-black, .8)
#sidebar-menus
position: fixed
top: 0
right: -($sidebar-width)
z-index: 103
overflow-x: hidden
overflow-y: scroll
padding-left: 5px
width: $sidebar-width
height: 100%
background: var(--sidebar-bg)
transition: all .5s
&.open
transform: translate3d(-100%, 0, 0)
& > .avatar-img
margin: 20px auto
.sidebar-site-data
padding: 0 10px
hr
margin: 20px auto
.menus_items
padding: 0 10px
.site-page
@extend .limit-one-line
position: relative
display: block
padding: 3px 28px 3px 20px
color: var(--font-color)
font-size: 1.15em
border-radius: 6px
&:hover
background: var(--text-bg-hover)
i:first-child
width: 15%
text-align: left
&.group
& > i:last-child
position: absolute
top: .78em
right: 13px
transition: transform .3s
&.hide
& > i:last-child
transform: rotate(90deg)
& + .menus_item_child
display: none
.menus_item_child
margin: 0
padding-left: 25px
list-style: none
|
由于把深浅色模式切换按钮放在侧边栏，就把移动端首页右上角按钮取消了，在custom.css中添加媒体查询：
1
2
3
4
5
6
|
@media (max-width: 768px) {
#nightmode-button {
display: none;
}
}
|
nightmode-button 这个id是Fomalhaut🥝的导航栏里的，[BlogRoot]\themes\Butterfly\layout\includes\header\nav.pug，看自己情况修改:
id来源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| nav#nav
span#blog-info
a#site-name(href=url_for('/')) #[=config.title]
#menus
if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
#search-button
a.site-page.social-icon.search(title="检索站内任何你想要的信息")
i.fas.fa-search.fa-fw
!=partial('includes/header/menu_item', {}, {cache: true})
a.sun_moon.faa-parent.animated-hover(onclick='switchNightMode()', title=_p('rightside.night_mode_title') id="nightmode-button")
svg.faa-tada(style="height:20px;width:20px;fill:currentColor;position:relative;top:4px", viewBox='0 0 1024 1024')
use#modeicon(xlink:href='#icon-moon')
#toggle-menu
a.site-page(href="javascript:void(0);")
i.fas.fa-bars.fa-fw
|
