本教程针对Butterfly主题3.6.0版本,不同版本可能不支持此教程的内容

本教程主要是针对Butterfly主题下的Valine评论系统的美化,添加博主,小伙伴,访客等标签,以及评论者的操作系统,浏览器的图标。效果如下图:

image-20210207172424500

引入修改版valine.min.js

在主题配置文件中查找 valine.min.js ,找到后将原本的 valine.min.js 注释掉,引入修改的 valine.min.js

1
valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

image-20210207173309134

修改版valine.min.js的作者为 HClonely

修改valine.pug

在themes\butterfly\layout\includes\third-party\comments\目录下找到 valine.pug ,用编辑器打开它

在图片所示的位置添加以下代码:

1
2
3
master: '此处写博主邮箱的32位小写md5编码',
friends: ["此处写小伙伴邮箱的32位小写md5编码"],
tagMeta: ["博主","小伙伴","访客"],

image-20210207173955432

运行

做出以上修改后保存文件,就可以运行了

先运行 hexo clean ,后运行 hexo g

新版Butterfly主题已经支持Valine评论框的背景图了,我这里就不写教程了,请大家阅读主题文档