1. 前言
本文是对Heo博主写的Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式文章的补充，增加了动态标签条，并且可以自动获取全站分类和标签名称。
2. 预览
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)
if (urlinfo == '/'){
if (document.querySelector('#tags-bar')){
document.getElementById('首页').classList.add("select")
}
}else {
var pattern = /\/tags\/.*?\//;
var patbool = pattern.test(urlinfo);
if (patbool) {
var valuegroup = urlinfo.split("/");
var nowTag = valuegroup[2];
if (document.querySelector('#category-bar')){
document.getElementById(nowTag).classList.add("select");
}
}
}
}
tagsBarActive()
|
