本文将介绍「修改 Waline 默认头像」、「通过 QQ 邮箱自动获取头像」的方法。

公共头像服务简介

Gravatar

image.png

Gravatar 是 WordPress 母公司 Automattic 推出的一个公共头像服务。你只需要去 Gravatar.com 注册账号绑定自己的域名邮箱，然后上传自己的头像。在逛博客评论的时候，邮箱填写您的域名邮箱，会默认输出你在 Gravatar 上传的头像。

Gravatar 可以说是较知名且应用较广泛的公共头像服务了。Wordpress、GitHub、OpenAI、Figma、Stack Overflow 等网站都在使用 Gravatar 服务。但是由于一些原因，Gravatar 在国内使用体验并不好。

Libravatar

image.png

Libravatar (Libre Avatar) 是一个免费服务，也是一个开放规范，用于托管与电子邮件或 OpenID 地址绑定的个人图像。

Libravatar 受 Gravatar 启发，并提供了额外的功能：允许域名所有者为自己的组织托管图像。Libravatar API 的使用方式和 Gravatar 很像，在大多数情况下，从 Gravatar 迁移到 Libravatar 只需要改一下域名就行。

如果在 Libravatar 找不到头像怎么办？

  • 如果是通过邮件地址获取不到头像，将重定向至图像链接参数指定的默认头像。例如链接 https://seccdn.libravatar.org/avatar/HASH?d=/static/nobody.jpg 中，d 参数指定了默认头像的位置。
  • 如果是通过 MD5 哈希算法获取不到头像，Libravatar 将首先重定向到 Gravatar 试图获取头像。如果还找不到，就将重定向至图像链接参数指定的默认头像。

Cravatar

image.png

Cravatar 是中国认可的头像（China Recognized Avatar）的缩写，又名「初认头像」，是一款免费的公共头像服务。它具有更快的响应速度，且服务完全架设并运行在中国大陆境内。对于国内用户来说，它是一个 Gravatar 完美的替代品。

Cravatar 使用了三级头像匹配：Cravatar 头像 ->Gravatar 头像 ->QQ 头像，大约 70% 的访客都能得到准确的头像。

Cravatar 会对所有头像进行人工审核（也包括来自 Gravatar 和 QQ 的头像），所有包含暴恐、色情、政治等违反中国法律的内容都会被屏蔽，并返回默认头像。这一点可以分担一些国内站长的审核压力。

三种公共头像服务小结

头像服务 获取头像的基本格式 匹配级别 支持的参数 官方 API 文档
Gravatar https://gravatar.com/avatar/HASH Gravatar s,size：图像大小
d,default：默认头像		 链接
Libravatar https://seccdn.libravatar.org/avatar/HASH Libravatar
Gravatar		 同上 链接
Cravatar https://cravatar.cn/avatar/HASH

https://cn.cravatar.com/avatar/HASH		 Cravatar
Gravatar
QQ 头像		 同上 链接

除了使用 d 或 default 参数可以指定自己设置的默认头像外，还可以使用服务内置的默认头像：

参数 简介 Gravatar Libravatar Cravatar
没有指定 d 参数 如果图像链接没有指定默认头像，那么将返回这个图像。 image.png image.png image.png
404 如果没有与电子邮件哈希关联的图像，则不加载任何图像，而是返回 HTTP 404（未找到文件）响应 支持 支持 支持
mp 一个简单的卡通风格的人物轮廓 image.png image.png
还可以使用 mm		 image.png
identicon 一个几何图案（随机生成） image.png 同 Gravatar 同 Gravatar
monsterid 具有不同颜色、面孔的“怪物”（随机生成） image.png 同 Gravatar 同 Gravatar
wavatar 具有不同特征和背景的人脸（随机生成） image.png 同 Gravatar 同 Gravatar
retro 8 位色的像素人脸（随机生成） image.png 同 Gravatar 同 Gravatar
robohash 具有不同颜色、面部的机器人（随机生成） image.png 同 Gravatar 同 Gravatar
pagan 复古冒险游戏的角色（随机生成） 不支持 image.png 不支持
blank 透明的 PNG 图像。 image.png
（一张透明头像）		 不支持 同 Gravatar

顺便提一嘴国内最近出现的 WeAvatar，它的特点是支持手机号匹配头像（前提是在其服务中有账号），且支持根据用户名生成字母头像。个人感觉可能不太实用，还要多注册个号比较麻烦。但毕竟从目前来看还是公益服务，这里就简单支持一下：WeAvatar

更多 Gravatar 镜像源参考：Gravatar 头像镜像源收集 （2024年） - 秋风于渭水 (tjsky.net)

Waline 配置头像服务

通过服务端环境变量配置

服务端中环境变量 GRAVATAR_STR 指定了获取头像的地址。

环境变量名称 Waline 默认值 备注
GRAVATAR_STR https://seccdn.libravatar.org/avatar/{{mail\|md5}} Gravatar 头像的地址，基于 nunjucks 语法。

可以看到 Waline 默认使用 Libravatar 提供的公共头像服务。修改这个值可以切换服务，或增加 d 参数修改默认头像。

下面将演示修改默认头像的方法（假设你使用 Vercel 部署服务端）。

打开 Vercel 中的 Waline 项目，选择 setting->Environment Variables：

image.png

添加以下键值对：

image.png

我们通过 d 参数指定默认头像为「8 位色的像素人脸（随机生成）」。

点击 Save 后，重新部署 Waline 项目即可。

通过修改 index.js 文件更灵活地配置头像

通过修改 Vercel 对应的 Github 仓库下的 index.js 文件（或者 index.cjs）可以更灵活指定评论者的头像。具体使用详看接下来由 Waline 官方提供的例子。

假设你使用的头像服务不支持通过数字 QQ 邮箱获取头像，那么你可以通过以下方式增加此功能。

首先打开 Vercel 对应 Waline 项目的 Github 仓库，修改 index.js 文件，将以下内容添加至方框位置：

1
2
3
4
5
6
7
8
9
10
11
/*
此方法或传入一个 comment 对象，你可以通过 comment.mail 获取邮箱。若返回值为 string 类型，则会直接调用返回值作为头像地址，否则正常生成 MD5。
*/
async avatarUrl(comment) {
    const reg = new RegExp('(\\d+)@qq\\.com$', 'i');
    const mail = comment.mail;
    if (reg.test(mail)) {
      const q = mail.replace(/@qq\.com/i, '').toLowerCase();
      return 'https://q1.qlogo.cn/headimg_dl?dst_uin=' + q + '&spec=4';
    }
  },

完整代码示例：

image-20230428162327261

本文参考