organize the post folder

source/_posts/2025.08/custom-category-bar.md

@@ -0,0 +1,138 @@
+---
+title: 自定义分类条
+categories: 建站手札
+tags: 网站
+series: webcustom
+summary: 自定义分类条
+abbrlink: '33249733'
+date: 2025-08-14 16:25:49
+---
+{% note warning 1 %}
+修改有风险，请注意备份
+{% endnote %}
+今天来自定义分类条
+# 添加pug
+新建文件`[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug`文件，写入：
+```pug
+.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/'))= __('更多分类')
+```
+# 样式文件
+以上就是该滚动条的结构，下面我们开始实现样式的定义，新建文件`[BlogRoot]\themes\butterfly\source\css\_layout\category-bar.styl`写入以下文件：
+
+```scss
+#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)
+```
+# 添加js
+打开`[BlogRoot]\themes\butterfly\source\js\main.js`，添加js函数，`refreshFn`函数的上面：
+```js
+  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");
+        }
+    }
+};
+```
+引用函数
+```js
+window.refreshFn = function () {
+  initAdjust()
+
+  if (GLOBAL_CONFIG_SITE.isPost) {
+    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
+    GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
+  } else {
+    GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
+    GLOBAL_CONFIG.runtime && addRuntime()
+    addLastPushDate()
+    toggleCardCategory()
+    setCategoryBarActive()      // 自己加的，用于切换类别栏目
+  }
+```
+# 添加到主题
+修改`[BlogRoot]\themes\butterfly\layout\includes\mixins\indexPostUI.pug`，添加
+```diff
+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
+```
+# 参考
+{% link liushen博客,Liushen,https://blog.liushen.fun/posts/a64defb4/ %}