AI正在绞尽脑汁想思路ING···
BiのAI摘要
HunYuan-Lite

修改有风险，请注意备份

今天来自定义分类条

# 添加pug

新建文件`[BlogRoot]\themes\butterfly\layout\includes\categoryBar.pug`文件，写入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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/'))= __('更多分类')

# 样式文件

以上就是该滚动条的结构，下面我们开始实现样式的定义，新建文件`[BlogRoot]\themes\butterfly\source\css\_layout\category-bar.styl`写入以下文件：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    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)

# 添加js

打开`[BlogRoot]\themes\butterfly\source\js\main.js`，添加js函数，`refreshFn`函数的上面：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
      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");
            }
        }
    };

引用函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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`，添加

    1
    2
    3
    4
    5
    6
    7
    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

# 参考

🪧引用站外地址，不保证站点的可用性和安全性
liushen博客
Liushen
文章作者: biss
文章链接: https://blog.biss.click/posts/33249733/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Bi's Blog！
网站
相关推荐
2026-01-16
自定义字体
今天感觉网站的字体有些不好看，想换一下，搜索发现网站用woff或者woff2字体，在手机端和电脑都能完美显示 2026年2月3日更新：好像谷歌字体库可以在大陆直连了，速度也很快，所以这篇文章好像没什么必要了。 选择字体首先在网上查找自己喜欢的字体，这里有一个网站 🪧引用站外地址，不保证站点的可用性和安全性 中文开源字体集 Open Source Fonts Collection for Chinese 开源字体 找到一个自己喜欢的，如果有woff或者woff2格式下载下载保存。没有也没关系，转换网站： 🪧引用站外地址，不保证站点的可用性和安全性 转换网站 ttf2woff2 利用这个网站把下载的ttf字体文件转换成woff2格式。 添加字体新建一个css文件 ...
2026-01-16
在侧边栏添加日历和倒计时
突然看到某个网站侧边栏有日历和倒计时，就研究了一下，抄下来了（🤭）效果图： 添加js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111document.addEventListener("DOMContentLoaded", () => { initializeCard();});document.addEventListener("pjax:complete", () => { initializeCard();});function initializeCard() ...
2025-08-25
为博客添加CMS系统
序言因为喜欢wordpress之类动态博客的在线编辑功能，但是又不想抛弃hexo，特别是这个花里胡哨的模板，所以想着给博客添加一个cms系统，在搜索一番后发现这种CMS系统叫无头CMS，然后找到一个很好的系统：sveltia-cms 🪧引用站外地址，不保证站点的可用性和安全性 sveltia-cms sveltia 安装安装包在博客根目录下运行npm i @sveltia/cms 创建必要文件然后在博客source目录下创建admin目录并在其下新建index.html 123456789101112<!doctype html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, init...
2025-08-11
自定义右键菜单
演示本站右键即可查看,和原有菜单相比比较美观 新建pug文件在 \themes\butterfly\layout\includes新建 rightmenu.pug 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475#rightMenu.js-pjax .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.history.forward();") i.fa.fa-arrow-right ...
2025-08-12
利用 SiteMap 随机访问站内页面
在网上查找博客美化过程时发现基本上都有“随便逛逛”的功能，于是自己也添加一个。比较简单只有js代码，但是先要安装插件 前置条件1npm install hexo-generator-sitemap --save 在站点配置文件 _config.yaml中添加： 1234567sitemap: path: - sitemap.xml - sitemap.txt rel: false tags: true categories: true 添加js在主题目录下添加·\themes\butterfly\source\js\random.js 12345678910111213function randomPost() { fetch('/sitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {...
2025-08-14
自定义页脚（新）
添加CSS修改有风险，注意备份 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196...

评论
biss
文章
34
标签
11
分类
5
Follow Me
公告
系列文章
添加网站左上角菜单 2026-02-10
添加typesense搜索 2026-02-05
自定义字体 2026-01-16
在侧边栏添加日历和倒计时 2026-01-16
使用GitHub推送Hexo到服务器 2025-08-18
自定义页脚（新）2025-08-14
自定义分类条 2025-08-14
自定义导航栏 2025-08-13
利用 SiteMap 随机访问站内页面 2025-08-12
博客添加AI总结 2025-08-12
利用插件自定义页脚菜单 2025-08-12
自定义右键菜单 2025-08-11
在侧边栏中添加欢迎信息 2025-08-10
配置说说页面 2025-08-10
最新文章
opencv基础操作 2026-03-15
配置opencv 2026-03-14
自建bitwarden服务 2026-02-25
自建renovate-bot 2026-02-23
新年快乐！2026-02-14
随便逛逛昼夜切换繁简转换阅读模式隐私声明 Cookie协议版权声明