custom categoryBar

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 public/
 .deploy*/
 _multiconfig.yml
+.hintrc

_config.butterfly.yml

@@ -888,7 +888,7 @@ site_verification:
 # The user interface setting of category and tag page
 # Choose: index - same as Homepage UI / default - same as archives UI
 # leave it empty or index
-category_ui:
+category_ui: index
 tag_ui:
 
 # Rounded corners for UI elements

source/_posts/custom-navbar.md

@@ -1,11 +1,11 @@
 ---
 title: 自定义导航栏
 categories: 建站手札
-series: 网站
+series: webcustom
 summary: 介绍如何修改导航栏
 abbrlink: 3e61a389
 date: 2025-08-13 16:12:25
-tags:
+tags: 网站
 ---
 最近在查找怎样自定义导航栏，奈何没有对应版本的修改教程，本站使用最新版butterfly5.4。
 

themes/butterfly/layout/includes/categoryBar.pug

@@ -0,0 +1,10 @@
+.category-bar-items#category-bar-items(class=is_home() ? 'home' : '')
+  .category-bar-item(class=is_home() ? 'select' : '', id="category-bar-home")
+    a(href=url_for('/'))= __('博客首页')
+  each item in site.categories.find({ parent: { $exists: false } }).data
+    .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
+      a(href=url_for(item.path))= item.name
+  .category-bar-item
+    a(href=url_for('/archives/'))= __('文章存档')
+div.category-bar-right
+  a.category-bar-more(href=url_for('/categories/'))= __('更多分类')

themes/butterfly/layout/includes/mixins/indexPostUI.pug

@@ -2,6 +2,8 @@ mixin indexPostUI()
   - const indexLayout = theme.index_layout
   - const masonryLayoutClass = (indexLayout === 6 || indexLayout === 7) ? 'masonry' : ''
   #recent-posts.recent-posts.nc(class=masonryLayoutClass)
+    #category-bar.category-bar
+      include ../categoryBar.pug 
     .recent-post-items
       each article, index in page.posts.data
         .recent-post-item

themes/butterfly/source/css/_layout/categroy-bar.styl

@@ -0,0 +1,56 @@
+#category-bar
+  padding 7px 11px
+  background var(--card-bg)
+  border-radius 8px
+  display flex
+  white-space nowrap
+  overflow hidden
+  transition 0.3s
+  height 50px
+  width 100%
+  justify-content space-between
+  user-select none
+  align-items center
+  margin-bottom 20px
+
+  .category-bar-right
+    display flex
+    border-radius 8px
+    align-items center
+
+    .category-bar-more
+      margin-left 4px
+      margin-right 4px
+      font-weight 700
+      border-radius 8px
+      padding 0 8px
+
+  .category-bar-items
+    width 100%
+    white-space nowrap
+    overflow-x scroll
+    scrollbar-width: none
+    -ms-overflow-style: none
+    overflow-y hidden
+    display flex
+    border-radius 8px
+    align-items center
+    height 30px
+
+    &::-webkit-scrollbar
+      display: none
+
+    .category-bar-item
+      a
+        padding .1rem .5rem
+        margin-right 6px
+        font-weight 700
+        border-radius 8px
+        display flex
+        align-items center
+        height 30px
+
+      &.select
+        a
+          background #3eb8be
+          color var(--btn-color)

themes/butterfly/source/css/style.css

@@ -214,6 +214,25 @@
      /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
 }
 
+/*分类条*/
+#recent-posts>.category-bar {
+    background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
+            rgba(255, 255, 255, .8),
+            rgba(255, 255, 255, .8),
+            rgba(255, 255, 255, .7))!important;
+    backdrop-filter: blur(10px)!important; 
+     /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
+}
+
+[data-theme=dark] #recent-posts>.category-bar  {
+    background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
+            rgba(35, 37, 58, .8),
+            rgba(35, 37, 58, .8),
+            rgba(24, 40, 72, .7))!important;
+    backdrop-filter: blur(10px)!important; 
+     /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
+}
+
 /*主页文章预览页面*/
 #recent-posts>.recent-post-items>.recent-post-item {
     background: linear-gradient(-45deg, rgba(255, 255, 255, .7),

themes/butterfly/source/js/main.js

@@ -893,6 +893,27 @@ document.addEventListener('DOMContentLoaded', () => {
     tabsFn()
   }
 
+  /**
+   * 自己写的，实现功能切换类别表
+   */ 
+  const setCategoryBarActive = () => {
+    const categoryBar = document.querySelector("#category-bar");
+    const currentPath = decodeURIComponent(window.location.pathname);
+    const isHomePage = currentPath === GLOBAL_CONFIG.root;
+
+    if (categoryBar) {
+        const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
+        categoryItems.forEach(item => item.classList.remove("select"));
+
+        const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
+        const activeItem = document.getElementById(activeItemId);
+
+        if (activeItem) {
+            activeItem.classList.add("select");
+        }
+    }
+  };
+  
   const refreshFn = () => {
     initAdjust()
     justifiedIndexPostUI()
@@ -905,6 +926,7 @@ document.addEventListener('DOMContentLoaded', () => {
       GLOBAL_CONFIG.runtime && addRuntime()
       addLastPushDate()
       toggleCardCategory()
+      setCategoryBarActive()
     }
 
     GLOBAL_CONFIG_SITE.pageType === 'home' && scrollDownInIndex()