Butterfly 分类标签导航栏

前言

本文用于 butterfly 魔改，博主没有测试是否适配于其他主题，以及自定义样式 CSS 可能需要一定的前端知识进行优化。

• 2022-08-15 适配多分类文章，优化代码
• 2022-08-16 当分类/标签较多时，导航栏会滚动至当前页面高亮标签。
• 2023-03-21 修复分类/标签翻页导致无法定位当前分类/标签的问题

效果预览

分类导航栏

标签导航栏

新建 catalog_list.js

[Blogroot]\themes\butterfly\scripts\helpers\ 目录下新建文件 catalog_list.js，type 参数表示生成 分类导航栏 categories 还是 标签导航栏 tags，其中 <sup>${item.length}</sup> 是使用上标显示文章数量，可参考Butterfly 标签云增加文章数上下标。

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

注：如果之前有问过博主如何 显示 分类/标签 时带 emoji，但相应 分类/标签 页面不带 emoji 的小伙伴可以修改为：

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}">${(hexo.config.emoji && hexo.config.emoji[item.name] || '') + item.name}<sup>${item.length}</sup></a>
    </div>
    `
  })
  return html
})

新增自定义样式

其中部分是博主魔改后的样式，如 --main: #1677B3、--second: #fff、--card-border: 1px solid rgba(150,150,150,0.2);、--light-text: #ff7242、--border-radius: .5rem。

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

#catalog-bar:hover {
  border-color: var(--main);
}

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

#catalog-list {
  /* 分类/标签较少时，可以选择不设置 width，居中显示 catalog-list-item */
  /* width: 100%; */
  margin: 0 .5rem;
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
}

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

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

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

.catalog-list-item.selected a {
  background: var(--light-text);
  color: var(--second);
}

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

a.catalog-more:hover {
  color: var(--main);
}

当前所在分类/标签页高亮

自定义 js 增加以下内容：

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

使用分类导航栏

[Blogroot]\themes\butterfly\layout\category.pug 增加以下内容：

extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui
      +postUI
      include includes/pagination.pug
  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

使用标签导航栏

[Blogroot]\themes\butterfly\layout\tag.pug 增加以下内容：

extends includes/layout.pug

block content
  if theme.tag_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts
      +postUI
      include includes/pagination.pug
  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

Hexo 三连

执行 Hexo 三连

hexo clean && hexo g && hexo s

参考文章

1. 张洪Heo Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式