
Butterfly 分类标签导航栏
前言
本文用于 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
11hexo.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
12hexo.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
22function 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
19extends 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
19extends 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