分类标签索引导航条

原生Butterfly切换分类、标签必须返回一级分类页，比较麻烦，给分类标签添加一个导航条，不用来回切换页面，方便索引

参考：

• 动态分类标签条，自动获取全站分类与标签进行展示 | justlovesmile

1. 修改分类导航栏\themes\butterfly\layout\category.pug

extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/indexPostUI.pug
    +indexPostUI
  else
    include ./includes/mixins/article-sort.pug
    #category
+     #catalog-bar
+       i.fa-fw.fas.fa-shapes
+       #catalog-list
+         !=catalog_list("categories")
+       a.catalog-more(href="/categories/")!= '更多'
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug

2. 修改标签导航栏\themes\butterfly\layout\tag.pug

extends includes/layout.pug

block content
  if theme.tag_ui == 'index'
    include ./includes/mixins/indexPostUI.pug
    +indexPostUI
  else
    include ./includes/mixins/article-sort.pug
    #tag
+     #catalog-bar
+       i.fa-fw.fas.fa-tags
+       #catalog-list
+         !=catalog_list("tags")
+       a.catalog-more(href="/tags/")!= '更多'
      .article-sort-title= _p('page.tag') + ' - ' + page.tag
      +articleSort(page.posts)
      include includes/pagination.pug

3. 在\themes\butterfly\scripts\helpers\目录下新建文件catalog_list.js

hexo.extend.helper.register('catalog_list', function (type) {
  let html = ``
  hexo.locals.get(type).map(function (item) {
    html += `
    <div class="catalog-list-item" id="/${item.path}">
      <a href="/${item.path}">${item.name}<sup>${item.length}</sup></a>
    </div>
    `
  })
  return html
})

4. 样式

/* 分类目录条、标签目录条 */
#catalog-bar {
    padding: .4rem .8rem;
    border-radius: 7px;
    display: flex;
    box-shadow: var(--card-box-shadow);
    margin-bottom: 1rem;
    justify-content: space-between;
}

#catalog-bar i {
    line-height: inherit;
}

#catalog-list::-webkit-scrollbar {
  display: none;
}

#catalog-list {
    /* width: 100%; */ /* 分类、标签多时启用 */
    margin: 0 .5rem;
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
}

.catalog-list-item a {
    margin: 0 .2em;
    padding: 0.2em 0.3em 0.3em;
    font-weight: bold;
    border-radius: 6px;
    color: var(--font-color);
    transition: all .3s ease-in-out;
}

.catalog-list-item:hover a {
    background: var(--text-bg-hover);
    color: var(--btn-color);
}

a.catalog-more {
    min-width: fit-content;
    font-weight: bold;
    color: var(--font-color);
}

a.catalog-more:hover {
    color: #00c4b6;
}

.catalog-list-item.selected a {
    background: var(--btn-hover-color);
    color: var(--btn-color);
}

当前分类/标签高亮

function catalogActive() {
    let $list = document.getElementById('catalog-list')
    if ($list) {
        // 鼠标滚轮滚动
        $list.addEventListener('mousewheel', function (e) {
            // 计算鼠标滚轮滚动的距离
            $list.scrollLeft -= e.wheelDelta / 2
            // 阻止浏览器默认方法
            e.preventDefault()
        }, false)

        // 高亮当前页面对应的分类或标签
        let path = decodeURIComponent(window.location.pathname).replace(/page\/[0-9]+\//g, '')
        let $catalog = document.getElementById(path)
        $catalog?.classList.add('selected')

        // 滚动当前页面对应的分类或标签到中部
        $list.scrollLeft = ($catalog.offsetLeft - $list.offsetLeft) - ($list.offsetWidth - $catalog.offsetWidth) / 2
    }
}
catalogActive();

// 开启pjax时添加
document.addEventListener('pjax:complete', function () {
    catalogActive();
});