1. 前言

本文是对Heo博主写的Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式文章的补充,增加了动态标签条,并且可以自动获取全站分类和标签名称。

2. 预览

image-20210814211626863

image-20210814212127747

3. 配置

3.1 新建PUG文件

首先是分类条,在themes/butterfly/layout/includes/处新建文件categoryBar.pug

1
2
3
4
#category-bar
.category-bar-items#category-bar-items
!=getarray_bar("category")
a.category-bar-more(href="/categories/") 更多

其次是标签条,在themes/butterfly/layout/includes/处新建文件tagBar.pug,因为样式一样,所以没有更改id和class名称。

1
2
3
4
#category-bar
.category-bar-items#category-bar-items
!=getarray_bar("tag")
a.category-bar-more(href="/tags/") 更多

3.2 新建Hexo辅助函数

theme/butterfly/scripts/helpers/中创建get_arrays.js

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
hexo.extend.helper.register('getarray_bar', function (types) {
if (!types) {
types = "category"
}
const categoriesBar = function (categories) {
if (!categories || !categories.length) return ``
const categoryArr = []
hexo.locals.get('categories').map(function (category) {
categoryArr.push({ name: category.name, value: category.length })
})
categoryArr.sort((a, b) => { return b.value - a.value })
let strCategoriesBar = ``
for (let i = 0; i < categories.length; i++) {
strTemp=`
<div class="category-bar-item" id="${categoryArr[i].name}">
<a href="/categories/${categoryArr[i].name}/">${categoryArr[i].name}</a>
</div>`
strCategoriesBar+=strTemp
}
return strCategoriesBar
}
const tagsBar = function(tags) {
if (!tags || !tags.length) return ``
const tagArr = []
hexo.locals.get('tags').map(function (tag) {
tagArr.push({ name: tag.name, value: tag.length })
})
tagArr.sort((a, b) => { return b.value - a.value })
let strTagsBar = ``
for (let i = 0; i < tags.length; i++) {
strTemp=`
<div class="category-bar-item" id="${tagArr[i].name}">
<a href="/tags/${tagArr[i].name}/">${tagArr[i].name}</a>
</div>`
strTagsBar+=strTemp
}
return strTagsBar
}
if (types == "category"){
return categoriesBar(this.site.categories)
}
if (types == "tag"){
return tagsBar(this.site.tags)
}
})

3.3 引用模块

在需要的位置引用该模块,例如:

在分类页面引用:找到theme/butterfly/layout/category.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
+ .category-in-bar
+ .category-in-bar-tips
+ i.fa-fw.fas.fa-folder-open
+ include includes/categoryBar.pug
.article-sort-title= _p('page.category') + ' - ' + page.category
+articleSort(page.posts)
include includes/pagination.pug

在标签页引用:找到theme/butterfly/layout/tag.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
+ .category-in-bar
+ .category-in-bar-tips
+ i.fa-fw.fas.fa-tags
+ include includes/tagBar.pug
.article-sort-title= _p('page.tag') + ' - ' + page.tag
+articleSort(page.posts)
include includes/pagination.pug

4. 引入js和css文件

这一部分和Heo博主的教程Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式 | 张洪Heo (zhheo.com)一致。

不过如果添加了标签条,js文件需要增加一个函数

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
//标签条
function tagsBarActive(){
var urlinfo = window.location.pathname;
urlinfo = decodeURIComponent(urlinfo)
//console.log(urlinfo);
//判断是否是首页
if (urlinfo == '/'){
if (document.querySelector('#tags-bar')){
document.getElementById('首页').classList.add("select")
}
}else {
// 验证是否是分类链接
var pattern = /\/tags\/.*?\//;
var patbool = pattern.test(urlinfo);
//console.log(patbool);
// 获取当前的标签
if (patbool) {
var valuegroup = urlinfo.split("/");
//console.log(valuegroup[2]);
// 获取当前分类
var nowTag = valuegroup[2];
if (document.querySelector('#category-bar')){
document.getElementById(nowTag).classList.add("select");
}
}
}
}
tagsBarActive()