给博客添加一个小菜单【butterfly】

前提

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

修改nav.pug

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

  #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

或直接使用替换好的

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，并添加以下代码

/* 左上角菜单样式 */
.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文件中添加以下样式代码

.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进行固定
我这里是固定在右上角

#menus {
  display: flex;
  align-items: center;
  width: 100%;
}

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

添加菜单内容

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

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

前提

修改nav.pug

修改nav.styl

给小菜单添加可见图标

添加菜单内容

更多修改

评论