custom categoryBar

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),