自定义导航栏

建站手札 #网站
文章导读 摘要由 Qwen 生成

这篇文章介绍了如何在最新版的Butterfly 5.4中自定义导航栏，包括PC端和PE端的修改方法以及CSS文件的调整。主要内容包括修改header\nav.pug和menu_item.pug文件中的内容，调整head.styl和sidebar.styl中的CSS样式，以及在CSS文件中添加新的样式规则。这些修改旨在实现导航栏的个性化设置，如菜单项的显示、位置调整、背景颜色变化等，以提升网站的用户体验和视觉效果。

ARTICLE SERIES

博客定制手记

第 7 / 14 篇
  1. 01 配置说说页面
  2. 02 在侧边栏中添加欢迎信息
  3. 03 自定义右键菜单
  4. 04 利用插件自定义页脚菜单
  5. 05 博客添加AI总结
  6. 06 利用 SiteMap 随机访问站内页面
  7. 07 自定义导航栏
  8. 08 自定义分类条
  9. 09 自定义页脚（新）
  10. 10 使用GitHub推送Hexo到服务器
  11. 11 在侧边栏添加日历和倒计时
  12. 12 自定义字体
  13. 13 添加typesense搜索
  14. 14 添加网站左上角菜单

注意：本文为早期 Hexo / Butterfly 魔改记录，本站现已迁移到 Astro，相关代码、路径或插件可能已经失效，仅作历史参考。

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

PC 菜单栏

修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug的内容

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文件

#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内容。

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 内容

    ···

  .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内容


    ···

    .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文件中添加

#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 · meuicat.com

自定义导航栏

/posts/3e61a389/
作者
biss
发布于
许可协议
CC BY-NC-SA 4.0
网站
订阅 打赏

Comments

自定义导航栏

Ctrl + 右键：浏览器原生菜单