hexo-butterfly 主题添加 tag 标签文章数量上下标。

本文操作引用自 Butterfly 标签云增加文章数上下标博客，故不声明为原创。

需要修改的文件

找到 Blog\themes\butterfly\scripts\helpers\page.js 文件，定位其中 cloudTags 这个函数的注册处，这里用了一个类似 C++ 中 lambda 表达式的方式注册了一个函数，用于处理彩色的标签云，你可以在 butterfly 主题中搜索，找到更多关于这个函数的调用处

plaintext
1
2
Blog\themes\butterfly\layout\includes\widget\card_tags.pug
Blog\themes\butterfly\layout\includes\page\tags.pug

我们需要修改的是这个函数中最终显示 tag 的位置，在后面追加一个上标 <sup>${tag.length}</sup> 或者下标 <sub>${tag.length}</sub> 即可！其中 tag 对象的 length 参数就是这个 tag 的文章数量。

修改前

js
1
result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`

修改后

js
1
result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`

效果

修改完成之后 hexo 三板斧操作一下

bash
1
hexo cl && hexo s

可以在本地预览到效果

image.png

侧边栏也是有的。

image.png

这样就搞定啦！