Waline配置--评论区头像

Gravatar#

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

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

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#

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

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

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

支持的参数：s,size：图像大小 d,default：默认头像

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

通过服务端环境变量配置#

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

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

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

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

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

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

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

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

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

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

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

部署#

1
export default function handler(req, res) {
2
    // 安全检查：拦截无 UA 的爬虫或恶意脚本
3
    if (!req.headers['user-agent']) {
4
        return res.status(403).send('Please use a browser to access.');
5
    }
6

7
    // 获取参数与配置信息
8
    const { id } = req.query;
9
    const total = 58;
10
    const username = "用户名";
11
    const repo = "仓库名";
12

13
    // 确定种子：优先使用邮箱 HASH，无 HASH 则回退到访客 IP
14
    let seed = id;
15
    if (!seed) {
16
        const forwarded = req.headers['x-forwarded-for'];
17
        seed = forwarded ? forwarded.split(',')[0] : (req.socket.remoteAddress || "guest");
18
    }
19

20
    // 时间变量：按月刷新哈希结果
21
    const date = new Date();
22
    const timeVar = `${date.getFullYear()}-${date.getMonth() + 1}`;
23
    const finalSeed = seed + timeVar;
24

25
    // 核心算法：Java 风格的字符串哈希实现
26
    let hash = 0;
27
    for (let i = 0; i < finalSeed.length; i++) {
28
        hash = ((hash << 5) - hash) + finalSeed.charCodeAt(i);
29
        hash |= 0;
30
    }
31

32
    // 计算图片序号
33
    const num = (Math.abs(hash) % total) + 1;
34

35
    /**
36
     * 图片分发策略
37
     * 1. 仓库已设为 Private，直接使用 Vercel 本地路径。
38
     * Vercel 会自动从连接的私有仓库中读取 /img 文件夹。
39
     */
40
    const imageUrl = `/img/${num}.webp`;
41

42
    /**
43
     * 【备选：jsDelivr 加速方案】
44
     * 如果以后仓库改回 Public，可以重新启用下方链接并注释掉上面的 imageUrl：
45
     * const imageUrl = `https://fastly.jsdelivr.net/gh/${username}/${repo}@main/img/${num}.webp`;
46
     */
47

48
    // 缓存控制：防止浏览器过度缓存重定向结果
49
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
50

51
    // 执行 302 重定向
52
    return res.redirect(302, imageUrl);
53
}