Hexo使用Valine评论系统不显示自定义头像的解决方案

情况

我的Hexo站点使用的是Valine评论系统，Valine的头像调用的是的 Gravatar 数据，但是好几天过去了，头像依然没有显示，按理说全球 CDN 同步也该结束了，我就去看了一下头像图片的地址，发现了一个大坑。

Vlaine已经修复该问题

Vaine已经在最新的v1.2.4-v1.2.5, 2018-07-14中修复了该BUG，请大家更新至最新的Valine版本即可~
更新日志：
Vlaine更新日志

Gravatar 简介

我们可以在https://cn.gravatar.com上创建用户，并上传自己的头像，经过几点的数据全球化同步，头像会根据你得 E-mail 进行匹配，也就是说，同样使用 Gravatar 作为头像系统的站点，都可以显示你的头像了。

Valine

根据 Valine 头像的介绍，https://valine.js.org/avatar.html
Valine 官网宣称默认头像的风格可以这样进行选择

以 NexT 主题为例，在NexT主题中，找到：

1	avatar: mm # gravatar style

这里设置成上面图片对应的默认头像风格参数值，但是Valine 官网的参数值已经不再适用了，根据 Gravatar 官方介绍，https://cn.gravatar.com/site/implement，新的参数值是：

404: do not load any image if none is associated with the email hash, instead return an HTTP 404 (File Not Found) response
mp: (mystery-person) a simple, cartoon-style silhouetted outline of a person (does not vary by email hash)
identicon: a geometric pattern based on an email hash
monsterid: a generated ‘monster’ with different colors, faces, etc
wavatar: generated faces with differing features and backgrounds
retro: awesome generated, 8-bit arcade-style pixelated faces
robohash: a generated robot with different colors, faces, etc
blank: a transparent PNG image (border added to HTML below for demonstration purposes)

所以，在 Hexo 中，如果使用 Valine 作为评论系统，如果头像出现问题，一定要把这里的值改为 mp，而不是 mm。
mp 是神秘人的参数，你也可以选择其他参数。

后续

如果修改了之后，并做了如下操作，依旧不起作用

1 2	hexo clean hexo g

在查看头像图像的 src 地址后，发现后面还是跟着 xxx.jpg?%d=mm 的参数，那就需要修改 Valine.min.js 文件了。

修改 Valine.min.js 文件

获取官方的 Valine.min.js 文件

点击获取官方最新版Valine.min.js文件
有问题的是:1.2.5版本，已经在v1-2-4-v1-2-5-2018-07-14修复了该问题。
1.2.5点击下载：https://unpkg.com/valine@1.2.5/dist/Valine.min.js

修改错误参数

找到

1	ds: ["mm", "identicon", "monsterid", "wavatar", "retro", ""], //1.2.5版本在275行

将里面的mm改为mp，接着找到

1	t.verify = e.verify \|\| !1, v.params = "?d=" + (i.indexOf(o) > -1 ? o : "mm") //1.2.5版本在292行

同样，将里面的 mm 改为 mp

上传正确版本

将改好的 Valine.min.js 文件上传到例如七牛等文件托管平台，然后获取 Valine.min.js 的外部链接。

使 Valine.min.js 生效

我以 Hexo 的 NexT 主题为例，在如下目录:

1	/blog/themes/next/_config.yml

找到 NexT 主题的 _config.yml 主题配置文件
在最后几行，找到

1
2
3

# valine comment
# Example: https://cdn.jsdelivr.net/npm/valine@1.1.8/dist/Valine.min.js
  valine: https://xxxx.xxx/Valine.min.js //将这行的地址替换成你上传的修改好的 Valine.min.js 的文件地址。

切记 valine: 和 Valine.min.js 地址之间有个空格！！！

此时，头像后面的参数改为 xx.jpg?%d=mp 了，自己的头像也就显示出来了。