前提

情况是有一天博客闲逛，逛到了LiuShen’s Blog - 清羽飞扬，发现他添加了一个左上角小菜单，我觉得有意思，我也想添加一个1
我搜搜看有没有现成的教程可以喂饭到嘴，发现没人做这方面的东西,然后在Prorise - 博客小栈发现同样也有这个样式，我就去问问博主，得到回复是anzhiyu主题自带的，这下事情明朗了，直接下载主题开始扒代码。

修改nav.pug

打开\themes\butterfly\layout\includes\header\nav.pug，在原有的代码中插入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav-group
  //- 添加左上角菜单
  span#blog_name
    if theme.nav.enable
      .back-home-button
        i.anzhiyufont.anzhiyu-icon-grip-vertical
        .back-menu-list-groups
          each group in theme.nav.menu
            .back-menu-list-group
              .back-menu-list-title= group.title
              .back-menu-list
                each item in group.item
                  a.back-menu-item(href=url_for(item.link), title=item.name)
                    img.back-menu-item-icon(src=item.icon alt=item.name)
                    span.back-menu-item-text= item.name

或直接使用替换好的
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
nav#nav
  #nav-group
    //- 添加左上角菜单
    span#blog_name
      if theme.nav.enable
        .back-home-button
          i.anzhiyufont.anzhiyu-icon-grip-vertical
          .back-menu-list-groups
            each group in theme.nav.menu
              .back-menu-list-group
                .back-menu-list-title= group.title
                .back-menu-list
                  each item in group.item
                    a.back-menu-item(href=url_for(item.link), title=item.name)
                      img.back-menu-item-icon(src=item.icon alt=item.name)
                      span.back-menu-item-text= item.name
    
    span#blog-info
      a.nav-site-title(href=url_for('/'))
        if theme.nav.logo
          img.site-icon(src=url_for(theme.nav.logo) alt='Logo')
        if theme.nav.display_title
          span.site-name=config.title
      if globalPageType === 'post' && theme.nav.display_post_title
        a.nav-page-title(href=url_for('/'))
          span.site-name=(page.title || config.title)
          span.site-name
            i.fa-solid.fa-circle-arrow-left
            span= ' ' + _p('post.back_to_home')

  #menus
    if theme.search.use
      #search-button
        span.site-page.social-icon.search
          i.fas.fa-search.fa-fw
          span= ' ' + _p('search.title')
    if theme.menu
      != partial('includes/header/menu_item', {}, {cache: true})

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

这样左上角就会显示一个隐藏的按钮了（因为源代码用的anzhiyu图标，咱是原版butterfly自然不会显示）

修改nav.styl

新建themes\butterfly\source\css\_layout\nav.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
129
130
131
132
133
/* 左上角菜单样式 */
.back-home-button
  display flex
  width 35px
  height 35px
  padding 0 !important
  align-items center
  justify-content center
  margin-right 4px
  transition 0.3s
  border-radius 8px

.back-home-button:hover
  background var(--anzhiyu-main)
  color var(--anzhiyu-white) !important

.back-home-button:hover .back-menu-list-groups
  display: flex;
  opacity: 1;
  transition: .3s;
  top: 55px;
  pointer-events: auto;
  left: 0rem;
  transform: scale(1);

.back-home-button .back-menu-list-groups
  position: absolute;
  top: 45px;
  transform: scale(.8);
  transform-origin: top left;
  left: 0rem;
  /* 半透明毛玻璃背景 */
  background-color: rgba(255, 255, 255, 0.59);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  border: var(--style-border);
  flex-direction: column;
  font-size: 12px;
  color: var(--anzhiyu-secondtext);
  box-shadow: var(--anzhiyu-shadow-border);
  transition: .1s;
  opacity: 0;
  pointer-events: none;

.back-home-button .back-menu-list-group
  display flex
  flex-direction column

.back-home-button .back-menu-list-group .back-menu-list-title
  margin 8px 0 0 16px
  transition 0.3s
  color: #333 /* 白天模式标题颜色 */

.back-home-button .back-menu-list
  display flex
  flex-direction row
  flex-wrap wrap
  width 340px
  justify-content space-between

.back-home-button .back-menu-list::before
  position absolute
  top -24px
  left 0px
  width 100%
  height 25px
  content ""
  transition: 0s

.back-home-button .back-menu-list-groups .back-menu-list-group:last-child .back-menu-list
  margin 0 0 8px

.back-home-button .back-menu-list-group:hover .back-menu-list-title
  color var(--anzhiyu-main)

.back-home-button .back-menu-list-groups:hover
  border var(--style-border-hover)

.back-home-button .back-menu-list .back-menu-item
  display flex
  align-items center
  margin 4px 8px
  padding 4px 8px !important
  transition 0.3s
  width 150px
  border-radius 8px !important
  transition 0.2s !important

.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
  font-size var(--global-font-size)
  margin-left 0.5rem
  color: #333 /* 白天模式文字颜色为黑色 */
  white-space nowrap

.back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-icon
  width 24px
  height 24px
  border-radius 24px
  background var(--anzhiyu-secondbg)

.back-home-button .back-menu-list .back-menu-item:hover .back-menu-item-text
  color var(--anzhiyu-white)

/* 页面头部样式调整 */
#page-header #nav .back-home-button
  cursor pointer
  position relative

#page-header:not(.not-top-img) #nav .back-home-button
  color var(--light-grey)

#page-header.nav-fixed:not(.not-top-img) #nav .back-home-button
  color var(--font-color)

/* 黑夜模式适配 */
[data-theme="dark"]
  .back-home-button .back-menu-list-groups
    background-color: rgba(0, 0, 0, 0.3) /* 深色模式背景更暗 */
  
  .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
    color: #fff /* 深色模式文字颜色为白色 */
  
  .back-home-button .back-menu-list-group .back-menu-list-title
    color: #fff /* 深色模式标题颜色为白色 */

/* 移动端适配 */
@media screen and (max-width: 768px)
  .back-menu-list-groups .back-menu-list .back-menu-item .back-menu-item-text
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

这样菜单列表就能正常显示了

给小菜单添加可见图标

在自定义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
.back-home-button i.anzhiyufont.anzhiyu-icon-grip-vertical {
  display: none;
}

.back-home-button {
  position: relative;
  padding-left: 28px; /* 左侧留出图标空间 + 边距 */
  padding-right: 8px; /* 右侧边距 */
  padding-top: 6px; /* 上边距 */
  padding-bottom: 6px; /* 下边距 */
  display: flex;
  align-items: center;
  min-height: 32px; /* 最小高度确保按钮有足够空间 */
}

.back-home-button::before {
  content: "";
  position: absolute;
  left: 8px; /* 图标左侧边距 */
  top: 50%;
  transform: translateY(-50%);
  width: 18px; /* 图标宽度 */
  height: 18px; /* 图标高度 */
  background-image: url('你的图标路径');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

修改完后，搜索按钮可能会错位，再次添加css进行固定
我这里是固定在右上角

1
2
3
4
5
6
7
8
9
#menus {
  display: flex;
  align-items: center;
  width: 100%;
}

#search-button {
  margin-left: auto;
}

添加菜单内容

在config.butterfly.yml中找到nav配置（一般就在配置的第一项），并仿写

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:
  # Navigation bar logo image
  logo: 
  display_title: true
  display_post_title: true
  # Whether to fix navigation bar
  fixed: false
  home_icon_url: /img/lemon.png 
  enable: true
  menu:
    - title: "我的网站"
      item:
        - name: "博客"
          link: https://seln.cn/
          icon: https://seln.cn/img/ico.jpg
    - title: "友情链接"
      item:
        - name: "阿叶Ayeez"
          link: https://blog.ayeez.cn
          icon: https://blog.ayeez.cn/imgs/photo.jpg
        - name: "裕裕裕"
          link: https://yu-blog.top/
          icon: https://free.picui.cn/free/2025/09/30/68dbd5869ed39.jpg
        - name: "ZY知识库"
          link: https://blog.pljzy.top/
          icon: https://blog.pljzy.top/_astro/logo.BxIxyJV1_Z19cEQW.webp

更多修改

  1. 可能会导致左上角小标题和菜单图标次序错误，可以添加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
    #nav-group {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 20px; /* 根据需要调整内边距 */
    }

    #blog_name {
      display: flex;
      align-items: center;
    }

    #blog-info {
      margin-left: auto;
      display: flex;
      align-items: center;
    }

    .nav-site-title {
      text-decoration: none;
      color: inherit;
    }

    .site-name {
      font-size: 1.2em;
      font-weight: bold;
    }

这样就是菜单在左，标题在右了

  1. 边距修改
    修改完之后，左上角肯定会因为多的样式导致位置变化，添加css移动他
    1
    2
    3
    4
    #nav-group {
        position: relative;
        left: -30px; /* 向左移动30像素，根据需要调整数值 */
    }

    1

    2