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

title, categories, tags, series, abbrlink, summary, date

title	categories	tags	series	abbrlink	summary	date
自定义分类条	建站手札	网站	webcustom	33249733	这篇文章介绍了如何在博客系统中自定义分类栏的设计和实现过程。首先，通过Pug模板语言创建了一个名为categoryBar.pug的文件，用于定义分类栏的结构和样式。接着，在Stylus样式文件category-bar.styl中详细定义了分类栏的样式，包括内边距、背景颜色、边框圆角等，并设置了滚动条的样式。最后，在JavaScript文件main.js中添加了一个setCategoryBarActive函数，用于根据当前页面路径自动激活相应的分类项。此外，还讨论了如何将自定义的分类栏集成到主题中，并提供了相关的Pug混入代码。整个过程确保了分类栏的可定制性和易维护性。	2025-08-14 16:25:49

{% note warning 1 %} 修改有风险，请注意备份 {% endnote %} 今天来自定义分类条

添加pug

新建文件[BlogRoot]\themes\butterfly\layout\includes\categoryBar.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写入以下文件：

#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函数的上面：

  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");
        }
    }
};

引用函数

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，添加

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/ %}