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

看到柳神的网站有这种菜单，但是没有写魔改教程，只好自己慢慢摸索了。

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

预计做好后是这种效果：

首先，修改`\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
    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
    nav#nav
      //- 左侧区域：包含指纹菜单和网站名
      span#blog-info
        #ls-menu-container
          i.fas.fa-fingerprint
          #ls-menu-panel
            .ls-section
              .ls-title 😀 个人网站
              .ls-grid
                a(href="/") #[i.fas.fa-rss] 个人博客
                a(href="https://github.com/bishshi") #[i.fab.fa-github] Github
            .ls-section
              .ls-title 😎 常用服务
              .ls-grid
                a(href="https://git.biss.click/biss") #[i.fas.fa-code] 代码仓库
                a(href="https://mm.biss.click") #[i.fas.fa-pen-nib] 日常yy
                a(href="https://statstic.biss.click") #[i.fas.fa-users] 访客统计
                a(href="https://pic.biss.click") #[i.fas.fa-image] 图床
                a(href="https://chat.biss.click") #[i.fas.fa-robot] AI网站
            .ls-section
              .ls-title 🛸 实用工具
              .ls-grid
                a(href="https://cover.biss.click") #[i.fas.fa-palette] 封面设计

        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

      //- 中间区域：关键！必须在 nav 下一级，以便 JS 切换类名
      if globalPageType === 'post' && theme.nav.display_post_title
        a.nav-page-title(href='javascript:void(0);' onclick='btf.scrollToDest(0, 500)')
          span.site-name=(page.title || config.title)

      //- 右侧区域
      #nav-right
        if theme.menu
          #menus
            != partial('includes/header/menu_item', {}, {cache: true})

        if theme.search.use || true
          #random-post-button
            a.site-page.social-icon#random-post-link(href='javascript:void(0);' onclick='randomPost()')
              i.fas.fa-solid.fa-shuffle
          #search-button
            a.site-page.social-icon.search-typesense-trigger
              i.fas.fa-search.fa-fw
          #toggle-menu
            span.site-page
              i.fas.fa-bars.fa-fw

在合适的目录下新建`nav.css`（例如`\themes\butterfly\source\css\nav.css`），这份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
    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
    #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;
    }

    #nav #menus {
        display: flex;
        justify-content: center;
        width: 100%;
        position: absolute;
        left: 0;
        margin: 0;
        transform: translateZ(0);
    }
    #nav #blog-info {
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
        z-index: 102;
        max-width: fit-content;
    }
    @media screen and (max-width: 900px) {
        #nav {
            padding: 0 15px;
        }
        #nav-group {
            padding: 0 0.2rem;
        }
        #rightside {
            right: -42px;
        }
    }
    /* IPAD菜单栏调整 */

    /* 1. 容器溢出穿透 */
    #nav, #blog-info, #nav-group {
      overflow: visible !important;
    }

    #ls-menu-container {
      position: relative !important;
      display: inline-flex !important;
      align-items: center;
      height: 100%;
      padding: 0 15px;
      cursor: pointer !important;
      z-index: 2000 !important;
    }

    /* 2. 悬浮面板：宽大且高不透明度 */
    #ls-menu-panel {
      position: absolute !important;
      top: 100% !important;
      left: 0 !important;
      margin-top: 15px !important;
      width: 420px;
      padding: 24px;
      border-radius: 18px;

      /* 高不透明度磨砂玻璃 (0.9) */
      background: rgba(255, 255, 255, 0.95) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;

      opacity: 0 !important;
      visibility: hidden !important;
      transform: translateY(12px) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      z-index: 999999 !important;
      cursor: default;
    }

    /* 3. 透明感应桥梁 */
    #ls-menu-panel::before {
      content: "";
      position: absolute;
      top: -20px;
      left: 0;
      right: 0;
      height: 25px;
      background: transparent !important;
    }

    /* 4. 触发效果 */
    #ls-menu-container:hover #ls-menu-panel {
      opacity: 1 !important;
      visibility: visible !important;
      transform: translateY(0) !important;
    }

    #ls-menu-container:hover i.fa-fingerprint {
      color: #49b1f5;
      transform: scale(1.1);
    }

    /* 5. 内部网格：保持两列 */
    .ls-section { margin-bottom: 22px; }
    .ls-section:last-child { margin-bottom: 0; }
    .ls-title {
      color: #333;
      font-weight: 800;
      font-size: 15px;
      margin-bottom: 12px;
      opacity: 0.9;
    }

    .ls-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr); /* 恢复为两列 */
      gap: 10px;
    }

    .ls-grid a {
      color: #444 !important;
      font-size: 14px !important;
      padding: 10px 12px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      transition: all 0.2s ease;
      background: rgba(0, 0, 0, 0.02);
    }

    .ls-grid a:hover {
      background: #49b1f5 !important;
      color: #fff !important;
      transform: translateX(4px); /* 悬停时轻微右移，增加动感 */
    }

    .ls-grid a i {
      margin-right: 12px;
      width: 20px;
      text-align: center;
      font-size: 15px;
    }

    /* 6. 深色模式适配 */
    [data-theme='dark'] #ls-menu-panel {
      background: rgba(30, 30, 30, 0.95) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
    [data-theme='dark'] .ls-title { color: #eee; }
    [data-theme='dark'] .ls-grid a {
      color: #ccc !important;
      background: rgba(255, 255, 255, 0.05);
    }

    #nav.show-title .nav-page-title {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      white-space: nowrap !important;
      z-index: 1000 !important;
    }

    #nav.show-title #menus,
    #nav.show-title .nav-site-title {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    #nav .nav-page-title {
      display: none;
      transition: opacity 0.3s ease;
    }

    #nav #blog-info {
      overflow: visible !important;
    }

然后在`_config.butterfly.yml`里面引用该css

    1
    - <link rel="stylesheet" href="/css/nav.css">

然后重新构建应该就可以看到效果了。

文章作者: biss
文章链接: https://blog.biss.click/posts/7e921903/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
网站
相关推荐
2025-08-26
搭建Owncloud并集成Onlyoffice
引言因为正好有云存储的需求，恰好又有服务器，所以决定自建一个Owncloud网盘服务，集成一个Onlyoffice。 安装网盘建站在官网下载最新的安装包 🪧引用站外地址，不保证站点的可用性和安全性 Owncloud Owncloud 因为使用1panel，所以搭网站很简单，选择php7.3运行环境，添加必要的php扩展，新建一个Mysql数据库，按照正常步骤安装就行了。 调优 配置Redis缓存 在1panel安装Redis，在config/config.php中添加 1234567891011'filelocking.enabled' => true,'memcache.local' => '\OC\Memcache\Redis','memcache.locking' => '\OC\Memcach...
2025-08-12
利用插件自定义页脚菜单
安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...
2026-01-16
在侧边栏添加日历和倒计时
突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
2025-08-10
配置说说页面
又开始折腾啦，这次把说说页面加上，改用moments项目的api 🪧引用站外地址，不保证站点的可用性和安全性 Moments 极简朋友圈 githun@kingwrcy 前期要求硬件要求 一台服务器 一个可自主解析的域名 软件要求 docker环境 反向代理工具（本文以Nginx为例） 介绍与展示这里先给大家展示一下最终的效果，注意该教程可能仅适合部分主题，如果出现主题不适配的情况请自行适配，这里以本站主题 Hexo-theme-butterfly为基础进行修改： 说说页面： ✅来自本站，本站可确保其安全性，请放心点击跳转 我的说说 胡言乱语ing。。。 轻量朋友圈 🪧引用站外地址，不保证站点的可用性和安全性 ...
2025-08-12
博客添加AI总结
之前在wordpress中看到过ai插件，现在使用hexo好像有洪墨AI，但是收费，有点负担不了，于是寻找代替品，真的找到了 🪧引用站外地址，不保证站点的可用性和安全性 liushen开发的插件 ai-summary 首先，安装插件： 1npm install hexo-ai-summary-liushen --save 安装额外插件： 1npm install axios p-limit node-fetch --save 安装后，在Hexo配置文件 _config.yml任意位置添加以下配置： 1234567891011121314151617181920212223242526# hexo-ai-summary-liushen# docs on : https://github.com/willow-god/hexo-ai-summaryaisummary: # 基本控制 enable: true ...
2025-08-14
自定义页脚（新）
添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...

评论
biss
文章
34
标签
11
分类
5
Follow Me
公告
系列文章
添加网站左上角菜单 2026-02-10
添加typesense搜索 2026-02-05
自定义字体 2026-01-16
在侧边栏添加日历和倒计时 2026-01-16
使用GitHub推送Hexo到服务器 2025-08-18
自定义页脚（新）2025-08-14
自定义分类条 2025-08-14
自定义导航栏 2025-08-13
利用 SiteMap 随机访问站内页面 2025-08-12
博客添加AI总结 2025-08-12
利用插件自定义页脚菜单 2025-08-12
自定义右键菜单 2025-08-11
在侧边栏中添加欢迎信息 2025-08-10
配置说说页面 2025-08-10
最新文章
opencv基础操作 2026-03-15
配置opencv 2026-03-14
自建bitwarden服务 2026-02-25
自建renovate-bot 2026-02-23
新年快乐！2026-02-14
随便逛逛昼夜切换繁简转换阅读模式隐私声明 Cookie协议版权声明