前言

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

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

效果预览

分类导航栏

分类导航栏

标签导航栏

标签导航栏

新建 catalog_list.js

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

1
2
3
4
5
6
7
8
9
10
11
hexo.extend.helper.register('catalog_list', function (type) {
  let html = ``
  hexo.locals.get(type).map(function (item) {
    html += `
    <div class="catalog-list-item" id="${type + '-' + item.name}">
      <a href="/${type}/${item.name}/">${item.name}<sup>${item.length}</sup></a>
    </div>
    `
  })
  return html
})

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

1
2
3
4
5
6
7
8
9
10
11
12
hexo.extend.helper.register('catalog_list', function (type) {
  let html = ``
  const theme = hexo.theme.config
  hexo.locals.get(type).map(function (item) {
    html += `
    <div class="catalog-list-item" id="${type + '-' + item.name}">
      <a href="/${type}/${item.name}/">${theme.emoji[item.name] + item.name}<sup>${item.length}</sup></a>
    </div>
    `
  })
  return html
})

新增自定义样式

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

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
57
58
59
60
61
62
63
/* 分类目录条、标签目录条 */
#catalog-bar {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  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 0.5rem;
  display: flex;
  white-space: nowrap;
  overflow-x: scroll;
}

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

.catalog-list-item a {
  padding: .3rem;
  font-weight: bold;
  border-radius: 8px;
  color: var(--font-color);
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
}

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

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

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

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

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

自定义 js 增加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function catalogActive (type) {
  let xscroll = document.getElementById('catalog-list')
  if (xscroll) {
    // 鼠标滚轮滚动
    xscroll.addEventListener('mousewheel', function (e) {
      //计算鼠标滚轮滚动的距离
      xscroll.scrollLeft -= e.wheelDelta / 2
      //阻止浏览器默认方法
      e.preventDefault()
    }, false)

    // 高亮当前页面对应的分类或标签
    let path = window.location.pathname
    path = decodeURIComponent(path)
    let pattern = type == 'tags' ? /\/tags\/.*?\// : /\/categories\/.*?\//
    if (pattern.test(path)) {
      document.getElementById(type + '-' + path.split('/')[2]).classList.add('selected')
    }
  }
}
catalogActive('categories')
catalogActive('tags')

使用分类导航栏

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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\category.pug 增加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 三连

1
hexo clean && hexo g && hexo s