【个人博客网站】博客美化（三）：关于Butterfly的导航栏的一些教程

本文最后更新于 about 2 years ago，文中所描述的信息可能已发生改变。

TIP提示

回到顶部按钮使用的方法引用右键菜单中定义的方法，没有定义的请查看相应位置的注释进行修改

自定义CSS

添加自定义cssnav_menu.css

css

/* 请根据需要修改 */

/* 顶部调节 */
#nav {
    transition: 0.3s;
    background: rgba(254, 254, 254, .7);
    backdrop-filter: saturate(180%) blur(20px);
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}
#nav a {
    border-radius: 8px;
    color: #4c4948;
}
#nav a:hover {
    background: #5CA1FF;
    transition: 0.3s;
}
#sidebar #sidebar-menus .menus_items .site-page:hover {
    color: white;
    border-radius: 0 0 5px #5CA1FF;
}
#nav .menus_items .menus_item .menus_item_child li:hover a {
    color: white !important;
}
#nav .menus_items .menus_item .menus_item_child li {
    font-weight: 700;
    margin: 5px;
    border-radius: 5px !important;
    transition: all 0.3s;
}
div#menus {
    display: flex;
    align-items: center;
}
#page-header #nav .nav-button a {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#nav .site-page {
    padding-bottom: 0px;
}
#nav *::after {
    background-color: transparent !important;
}

/* 百分比显示 */
#nav-totop {
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}
#nav-totop:hover .totopbtn i {
    opacity: 1;
}
#nav-totop #percent {
    font-size: 10px;
    background: white;
    color: #5CA1FF;
    width: 25px;
    height: 25px;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    font-weight: 700;
}
.nav-fixed #nav-totop #percent,
.page #nav-totop #percent {
    background: #4c4948;
    color: white;
    font-size: 13px;
}
#page-header:not(.is-top-bar) #percent {
    transition: 0.3s;
}
#page-header:not(.is-top-bar) #nav-totop {
    width: 0;
    opacity: 0;
    transition: width 0.3s, opacity 0.2s;
    margin-left: 0 !important;
}
#nav-totop:hover #percent {
    opacity: 0;
    transform: scale(1.5);
    font-weight: 700;
}

#page-header #nav #nav-right div {
    margin-left: 0.5rem;
    padding: 0;
}

/* 按钮调节 */
#nav #search-button {
    font-size: 1.5em;
}
#nav #darkmode_navswitch {
    font-size: 1.3em;
}
.nav-button {
    cursor: pointer;
}
#nav-totop .totopbtn i {
    position: absolute;
    display: flex;
    opacity: 0;
}

/* 网站名称返回按钮 */
#site-name,
.shuoshuo {
    white-space: nowrap;
    overflow: hidden;
}
#site-name {
    padding: 5px 8px;
    position: relative;
}
#site-name *:not(i):hover {
    display: none !important;
}
#blog_name #site-name:hover::after {
    opacity: 1;
    transform: scale(1.01);
}
#blog_name #site-name::after {
    opacity: 0;
    background-color: #5CA1FF !important;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: '\f015';
    box-shadow: 0 0 5px #5CA1FF;
    font-family: 'Font Awesome 6 Free';
    text-align: center;
    color: white;
}
#site-name i {
    position: absolute;
    top: 50%;
    left: 50% !important;
    transform: translate(-50%, -50%);
    left: 0;
    opacity: 0;
}
#site-name:hover i {
    opacity: 1;
}

/* 子菜单横向 */
#nav .menus_items .menus_item .menus_item_child li {
    display: inline-block;
}
#nav .menus_items .menus_item:hover .menus_item_child {
    box-sizing: content-box;
    display: block;
    transform: translateX(-50%);
    right: auto;
    left: auto !important;
}

/* 子菜单空隙 */
#nav .menus_items .menus_item .menus_item_child {
    top: 65px;
}

/* 圆角隐藏 */
ul.menus_item_child {
    overflow: hidden;
    border-radius: 5px;
}

/* 一级菜单居中 */
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#menus>div.menus_items>div>a {
    letter-spacing: 0.3rem;
    font-weight: 700;
    height: 40px;
    line-height: 40px;
    padding: 0em 0.3em 0em 0.5em;
}
#nav .menus_items .menus_item {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
}
#nav .menus_items .menus_item>a>i:last-child {
    display: none;
}

.page #nav a:hover {
    color: white !important;
    background: #5CA1FF;
    transition: 0.3s;
    box-shadow: 0px 0px 5px #5CA1FF;
}
#page-header #nav a:hover,
#page-header.nav-fixed #nav a:hover,
#page-header.nav-fixed #nav #site-name:hover,
#page-header.nav-fixed #nav #toggle-menu:hover {
    color: white;
}

/* 显示标题回到顶部 */
#page-name::before {
    font-size: 18px;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    color: white !important;
    top: 6px;
    left: 0;
    content: '回到顶部';
    background-color: #5CA1FF;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    opacity: 0;
    box-shadow: 0 0 3px #5CA1FF;
}
#page-name:hover:before {
    opacity: 1;
}
#page-name {
    position: relative;
    padding: 10px 30px;
}

/* 容器布局 */
#name-container {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    bottom: 60px;
}
#name-container:hover {
    transform: translateX(-50%) scale(1.03);
}
center#name-container {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
}

/* 固定样式 */
.nav-fixed #nav {
    transform: translateY(58px) !important;
    -webkit-transform: translateY(58px) !important;
    -moz-transform: translateY(58px) !important;
    -ms-transform: translateY(58px) !important;
    -o-transform: translateY(58px) !important;
}
.nav-fixed.nav-visible #name-container {
    top: 60px;
    transition: 0.3s;
}
.nav-fixed #name-container {
    top: 15%;
    transition: 0.3s;
}
.nav-fixed.nav-visible #menus .menus_items {
    bottom: -10px;
    transition: 0.3s;
}
.nav-fixed #menus .menus_items {
    bottom: 60px;
    transition: 0.3s;
}

.mask-name-container {
    width: 1200px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
    .mask-name-container {
        width: 600px;
    }
}
@media screen and (max-width: 500px) {
    .mask-name-container {
        display: none;
    }
}

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328

自定义js

添加自定义cssnav_menu.js

var OriginTitile = document.title;// 防止和动态标题冲突，保持显示原标题
// 返回顶部 显示网页阅读进度
window.onscroll = percent;// 执行函数
// 页面百分比
function percent() {
    let a = document.documentElement.scrollTop, // 卷去高度
        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"); // 获取图标

        result<=100||(result=100),btn.innerHTML=result;

        document.getElementById("page-name").innerText = OriginTitile.split(" | 梦念逍遥")[0] //按照安知鱼的说法，这个放在函数外面也行
}

main.js

为了处理顶栏一闪而过的bug修改本地themes/butterfly/source/js/main.js，注意有引用线上版本的话一定要使用本地版本改完再自行上传线上版本

  window.scrollCollect = () => {
        return btf.throttle(function (e) {
          const currentTop = window.scrollY || document.documentElement.scrollTop
          const isDown = scrollDirection(currentTop)
          if (currentTop > 56) {
            $header.classList.add('is-top-bar') 
            if (isDown) {
              if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
              if (isChatBtnShow && isChatShow === true) {
                chatBtnHide()
                isChatShow = false
              }
            } else {
              if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
              if (isChatBtnHide && isChatShow === false) {
                chatBtnShow()
                isChatShow = true
              }
            }
            $header.classList.add('nav-fixed')
            if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
              $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
            }
          } else {
            if (currentTop === 0) {
              $header.classList.remove('nav-fixed', 'nav-visible') 
              $header.classList.remove('is-top-bar') 
            }
            $rightside.style.cssText = "opacity: ''; transform: ''"
          }

          if (document.body.scrollHeight <= innerHeight) {
            $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
          }
        }, 200)()
      }

index.pug

修改themes/butterfly/layout/includes/header/index.pug

其中nav-visible控制默认显示的是导航栏菜单，替换成is-top-bar就是默认显示站点标题

pug

  if top_img !== false
    - var imgSource = top_img && top_img.indexOf('/') !== -1 ? `background-image: url('${url_for(top_img)}')` : `background: ${top_img}`
    - var bg_img = top_img ? imgSource : ''
    - var site_title = page.title || page.tag || page.category || config.title
    - var isHomeClass = is_home() ? 'full_page' : 'not-home-page'
    - var isHomeClass = is_home() ? 'full_page nav-fixed nav-visible' : 'not-home-page'
    - is_post() ? isHomeClass = 'post-bg' : isHomeClass
  else
    - var isHomeClass = 'not-top-img'

nav.pug

替换themes/butterfly/layout/includes/header/nav.pug

pug

- const { darkmode } = theme
nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]

  div.mask-name-container
    center(id="name-container")
        //- 这里换成自己站点的全称
        //- href="javascript:rmf.scrollToTop()"修改为onclick="btf.scrollToDest(0,500)"
      a(id="page-name" href="javascript:rmf.scrollToTop()") 梦念逍遥 - 无梦之境
    
  #menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      div.nav-button#search-button
        a.site-page.social-icon.search
          i.fas.fa-search.fa-fw
    
    if darkmode.enable && darkmode.button
      div.nav-button#darkmode_navswitch
        a.darkmode_switchbutton(type="button" title=_p('rightside.night_mode_title') onclick="rmf.switchDarkMode()")
          i.fas.fa-adjust

    div.nav-button#nav-totop
      a.totopbtn
        i.fas.fa-arrow-up
        span#percent(onclick="btf.scrollToDest(0,500)") 0
    

    !=partial('includes/header/menu_item', {}, {cache: true})

    #toggle-menu
      a.site-page
        i.fas.fa-bars.fa-fw

自定义CSS ​

自定义js ​

main.js ​

index.pug ​

nav.pug ​

自定义CSS

自定义js

main.js

index.pug

nav.pug