前言

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

  • 2022-08-15 适配多分类文章,优化代码
  • 2022-08-16 当分类/标签较多时,导航栏会滚动至当前页面高亮标签。

效果预览

分类导航栏

分类导航栏

标签导航栏

标签导航栏

新建 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="/${item.path}">
<a href="/${item.path}">${item.name}<sup>${item.length}</sup></a>
</div>
`
})
return html
})

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

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="/${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

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: .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 增加以下内容:

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

// 高亮当前页面对应的分类或标签
let $catalog = document.getElementById(decodeURIComponent(window.location.pathname))
$catalog.classList.add('selected')

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

使用分类导航栏

[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\tag.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

参考文章

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