前言

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

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

效果预览

分类导航栏

分类导航栏

标签导航栏

标签导航栏

新建 catalog_list.js

[Blogroot]\themes\butterfly\scripts\helpers\ 目录下新建文件 catalog_list.jstype 参数表示生成 分类导航栏 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