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

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

需要修改的文件

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

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的文章数量。

修改前

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

修改后

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

效果

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

1
hexo cl && hexo s

可以在本地预览到效果

image.png

侧边栏也是有的。

image.png

这样就搞定啦！