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
文章作者: biss
文章链接: https://blog.biss.click/posts/3e61a389/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
网站
相关推荐
2025-08-10
在侧边栏中添加欢迎信息
效果展示 开始折腾申请腾讯地图的api key 🪧引用站外地址，不保证站点的可用性和安全性 腾讯地图 Tencent 自行查看文档,要注意在填写信任域名时不填 https:// 添加js在主题 /source/js/目录下添加 txmap.js 有一个更完善的js脚本 🪧引用站外地址，不保证站点的可用性和安全性 txmap.js github 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858...
2025-08-18
使用GitHub推送Hexo到服务器
1panel没有宝塔的webhook功能，之前一直使用在服务器上建立裸仓库，直接推送到服务器的方法。现在找到一种新的方法。 建立GitHub仓库因为服务器部署在香港，可以直连GitHub，国内可以使用gitee或者GitHub镜像加速。 在本地安装git 打开git bash配置用户名和邮箱 12git config --global user.name "yourname"git config --global user.email "youremail" 可以使用 git config –list查看当前所有的配置 在github上创建自己的账号（在自己的电脑和服务器上） 创建SSH Key a:打开Git Bash，输入pwd查看当前路径 b.输入ssh-keygen -t rsa –C “youremail@example.com” (输入完毕后程序同时要求输入一个密语字符串(passphrase)，空表示没有密语。接着会让输入2次口令(password)，空表示没有口令。3次回车即可完成当前步骤) 在Git...
2025-08-14
自定义页脚（新）
添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...
2025-08-02
部署历程
前提条件在开始之前，请确保你已满足以下条件： 服务器: 安装了 1Panel 面板的 Linux 服务器 拥有服务器的 SSH 访问权限（本文示例将使用 root 用户，你可以根据实际情况替换为其他有权限的用户）。 服务器上已安装 Git。 1Panel 配置: 已通过 1Panel 创建了一个网站（例如 blog.yourdomain.com），并记下该网站的 根目录（Document Root）。通常在 1Panel 中，路径类似于 /opt/1panel/apps/openresty/openresty/www/sites/你的网站目录/index。请务必替换为你的实际路径。本地环境: 你的电脑上已安装并配置好 Hexo 博客环境。 你的电脑上已安装 Git。 已安装 Hexo Git 部署插件： 1npm install hexo-deployer-git --save SSH 密钥认证 (关键): 你需要在本地电脑生成 SSH 密钥对（如果还没有的话）。 必须将你的本地电脑的 SSH 公钥 添加到服务器上对应用户（如 root）的 ~/.ssh...
2026-01-16
自定义字体
今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
2025-08-12
利用插件自定义页脚菜单
安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友链接的话,再运行以下指令： 1npm i yamljs --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613...

评论
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协议版权声明