AI正在绞尽脑汁想思路ING···
BiのAI摘要
HunYuan-Lite

最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。

PC 菜单栏

修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.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
nav#nav
  span#blog-info
    a(href=url_for('/') title=config.title)
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo))
      if theme.nav.display_title
        span.site-name=config.title
    
  #menus
-    if (theme.algolia_search.enable || theme.local_search.enable)
-      #search-button
-        a.site-page.social-icon.search
-          i.fas.fa-search.fa-fw
-          span=' '+_p('search.title')
  !=partial('includes/header/menu_item', {}, {cache: true})
+  #nav-right
+    if (theme.algolia_search.enable || theme.local_search.enable)
+      #search-button
+        a.site-page.social-icon.search
+          i.fas.fa-search.fa-fw
+    #toggle-menu
+      a.site-page
+        i.fas.fa-bars.fa-fw
+       #toggle-menu
+         a.site-page
+           i.fas.fa-bars.fa-fw

新建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
#nav-right{
  flex:1 1 auto;
  justify-content: flex-end;
  margin-left: auto;
  display: flex;
  flex-wrap:nowrap;
}
  
/* 导航栏居中 */
#sidebar #sidebar-menus .menus_items .menus_item {
    margin: 10px 0;
}
#sidebar #sidebar-menus .menus_items a.site-page {
    padding-left: 0;
}
#sidebar #sidebar-menus .menus_items .site-page {
    position: relative;
    display: block;
    padding: 6px 30px 6px 22px;
    color: var(--font-color);
    font-size: 1.15em;
    border: var(--style-border-always);
    background: var(--icat-card-bg);
    font-size: 14px;
    border-radius: 12px;
}
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
    text-align: left;
    padding-left: 10px;
}

PE端

修改[blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug内容。

1
2
3
4
5
6
7
8
9
10
if theme.menu
  .menus_items
    each value, label in theme.menu
      if typeof value !== 'object'
-       .menus_item
+        .icat_menus_item
          - const valueArray = value.split('||')
          a.site-page(href=url_for(trim(valueArray[0])))

    ···

修改[blogRoot]/themes/butterfly/source/css/_layout/head.styl 内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    ···

  .menus_items
    display: inline

    .menus_item
+    .icat_menus_item
      position: relative
      display: inline-block
      padding: 0 0 0 14px

      &:hover
        .menus_item_child
          display: block

    ···

修改[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

    ···

    .menus_items
      padding: 0 10px 40px

+      .menus_item
+        margin: 10px 0

      .site-page
        @extend .limit-one-line
        position: relative
        display: block
        padding: 6px 30px 6px 22px
        color: var(--font-color)
        font-size: 1.15em
+        border: var(--icat-style-border-always)
+        background: var(--icat-essay-card-bg)
+        font-size: 14px
+        border-radius: 12px

        &:hover
          background: var(--text-bg-hover)

        i:first-child
          width: 15%
          text-align: left
+          padding-left: 10px

        &.group
          & > i:last-child
            position: absolute
            top: .78em
            right: 18px
            transition: transform .3s

          &.hide
            & > i:last-child
              transform: rotate(90deg)

            & + .menus_item_child
              display: none

      .menus_item_child
        margin: 0
        list-style: none
        padding-top: 6px

+#sidebar
+  #sidebar-menus
+    .icat_menus_item
+      display: inline-block
+      width: 50%
+
+      .site-page
+        text-align: center
+        margin: 4px
+        display: flex
+        flex-direction: column
+        align-items: center
+        padding: 8px 0
+        border-radius: 12px
+        font-size: 14px
+
+        i:first-child
+          padding-left: 0
+
+        & > .icat-essay
+          font-weight: 500
+
+        span
+          margin-top: -8px

在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
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
#sidebar #sidebar-menus .menus_items .menus_item_child {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul {
    padding-left: 0;
}
#sidebar #sidebar-menus .menus_item_child li {
    width: calc(50% - 8px);
    margin: 4px;
}
#sidebar #sidebar-menus .menus_item_child .site-page.child {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    border: var(--style-border-always);
    background: var(--icat-card-bg);
    font-size: 14px;
}
#nav.hide-menu #toggle-menu {
    padding: 0 0 0 12px;
}
#sidebar #sidebar-menus .icat_menus_item .site-page {
    text-align: center;
    margin: 4px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 0;
    border-radius: 12px;
    font-size: 14px;
}
@media screen and (max-width: 768px) {
    #sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
        margin-top: 4px;
    }
    #sidebar #sidebar-menus .menus_items .icat_menus_item .site-page i:first-child {
        text-align: center;
        padding-left: 0;
    }
}
/* 子菜单美化 */

#sidebar .open > .avatar-img img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
#sidebar .open > .avatar-img img {
    border: 5px #fff solid;
}
#sidebar .open > .avatar-img::before {
    bottom: 8px;
    height: 12px;
    width: 12px;
}
#sidebar .open > .avatar-img::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(65%);
    background: #6bdf8f;
    border: 5px solid #fff;
    border-radius: 50%;
    transition: filter 375ms ease-in .2s,transform .3s;
    z-index: 2;
}
/* 头像美化 */

#sidebar #sidebar-menus .sidebar-site-data {
    padding: 0;
    margin-left: 10px;
    background: var(--icat-card-bg);
    border-radius: 12px;
    border: var(--style-border-always);
}
@media screen and (max-width: 768px) {
    .site-data {
        width: 94%;
    }
}
/* 侧边栏的统计栏美化 */
  
/* PE端菜单栏美化 */

参考

🪧引用站外地址，不保证站点的可用性和安全性
Meuicat的博客
Meuicat