引入
在参考实现了Eurkon大佬这篇文章里的Butterfly分类标签导航栏后，发现在分类导航栏目展现了所有分类，这就导致二级分类无法索引，造成404访问错误，问题原因同之前写的记录一次 Butterfly 主题首页分类磁贴魔改（建议先看完这篇文章再继续往下看，想”白嫖”的可以直接复制修改后的代码）一样，这里我们参照之前文章的修改逻辑，来进行修改，实现分类导航栏目只展现一级分类。
分析过程
参考Eurkon大佬的Butterfly 分类标签导航栏的文章，我们找到catalog_list.js这个脚本。
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
})
|
可以看到，这里根据获取到的type变量来分别获取分类页面或者标签页面的分类或标签数据对象进行导航栏的呈现。这里，我们针对分类数据，当获取分类数据对象时，我们做一个过滤，只呈现一级分类数据，其他多级分类忽略，以实现分类导航栏只呈现一级分类的效果。
问题解决
在经过上述分析后，最终修改好的catalog_list.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
|
hexo.extend.helper.register('catalog_list', function (type) {
let html = ``
if(type === 'categories'){
hexo.locals.get(type).map(function (item) {
if(typeof(item.parent) != 'string'){
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
}
if(type === 'tags'){
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
}
})
|
最终呈现效果如下:
参考
