Gravatar(英语:Globally Recognized Avatar)是一项用于提供在全球范围内使用的头像服务。只要你在 Gravatar 的服务器上上传了你自己的头像,你便可以在其他任何支持 Gravatar 的博客、论坛等地方使用它。

一、更换 Gravatar 头像源

有时候 Gravatar 头像默认的源或者修改的源失效了,无法显示图像,因此需要更换 Gravatar 头像源。

下面是一些推荐的源:(点击地址可查看是否存活)

源名称源地址/镜像文件夹
Cravatar(推荐)https://cravatar.cn/avatar/
七牛 (推荐)https://dn-qiniu-avatar.qbox.me/avatar/
极客族 (推荐)https://sdn.geekzu.org/avatar/
和令奇(推荐)https://cdn.helingqi.com/avatar/
九月的风https://cdn.sep.cc/avatar/
V2EXhttps://cdn.v2ex.com/gravatar/
Ihuanhttps://gravatar.ihuan.me/avatar/
lolihttps://gravatar.loli.net/avatar/
WeAvatarhttps://weavatar.com/avatar/

具体实现有2种办法:

方法一: 修改根目录下的 config.inc.php

    /** 更换头像源 */
    define('__TYPECHO_GRAVATAR_PREFIX__', 'http://dn-qiniu-avatar.qbox.me/avatar/');

方法二:修改 /var/Typecho/Common.php 文件的 gravatarUrl() 代码块

找到 gravatarUrl()代码块,如下所示

/**
 * 获取gravatar头像地址
 *
 * @param string|null $mail
 * @param int $size
 * @param string|null $rating
 * @param string|null $default
 * @param bool $isSecure
 *
 * @return string
 */
public static function gravatarUrl(
    ?string $mail,
    int $size,
    ?string $rating = null,
    ?string $default = null,
    bool $isSecure = true
): string {
    if (defined('__TYPECHO_GRAVATAR_PREFIX__')) {
        $url = __TYPECHO_GRAVATAR_PREFIX__;
    } else {
        $url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
        $url .= '/avatar/';
    }

    if (!empty($mail)) {
        $url .= md5(strtolower(trim($mail)));
    }

    $url .= '?s=' . $size;

    if (isset($rating)) {
        $url .= '&r=' . $rating;
    }

    if (isset($default)) {
        $url .= '&d=' . $default;
    }
    return $url;
}

修改头像源部分,将下面的

$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

替换成推荐的源地址及镜像文件夹,如:

$url = $isSecure ? 'https://cravatar.cn' : 'https://cdn.helingqi.com';  //镜像源
$url .= '/avatar/'; //(镜像源文件夹)

二、通过 QQ 邮箱,自动调用 QQ 头像

Gravatar 头像是需要注册的,如果我们没有注册,那只能使用他指定的默认头像,这就有点遗憾了,于是可以想想其他方法,比如 QQ 头像就有 API 接口可供调用。

1.有关接口

1) QQ 头像 API 接口

QQ 头像 API 接口地址示例1:http://q1.qlogo.cn/g?b=qq&nk=10000&s=100

QQ 头像 API 接口地址示例2 http://q2.qlogo.cn/headimg_dl?dst_uin=10000&spec=5

参数说明:

参数描述
bqq(固定参数)
nk/dst_uinQQ号
s头像尺寸(详情见下表)

头像大小说明:

s/spce尺寸
140 × 40
240 × 40
3100 × 100
4140 × 140
5640 × 640
4040 × 40
100100 × 100

2) QQ 昵称 API 接口(暂时用不上,写出来备查)

https://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=10000

这是QQ空间的一个Api接口(JSONP格式),该接口可以返回如下内容

portraitCallBack({"149740947":["http://qlogo4.store.qq.com/qzone/149740947/149740947/100",23,-1,0,0,0,"Hyer",0]})

其中的http://qlogo4.store.qq.com/qzone/149740947/149740947/100是 QQ 空间头像(无权访问),Hyer就是 QQ 昵称.

2. 修改 /var/Typecho/Common.php 文件的 gravatarUrl() 代码块

这里要实现的功能是:如果有 QQ 头像则使用 QQ 头像,否则使用 Gravatar 头像

找到 gravatarUrl()代码块,替换成如下代码即可。

/**
 * 获取gravatar头像地址
 *
 * @param string|null $mail
 * @param int $size
 * @param string|null $rating
 * @param string|null $default
 * @param bool $isSecure
 *
 * @return string
 */
public static function gravatarUrl(
    ?string $mail,
    int $size,
    ?string $rating = null,
    ?string $default = null,
    bool $isSecure = true
): string {
    
    $reg = "/^\d{5,11}@[qQ][Qq]\.(com)$/";
    if (preg_match($reg, $mail)) {
        $img    = explode("@", $mail);
        $url = "//q2.qlogo.cn/headimg_dl?dst_uin={$img[0]}&spec={$size}";
    } else {

        if (defined('__TYPECHO_GRAVATAR_PREFIX__')) {
            $url = __TYPECHO_GRAVATAR_PREFIX__;
        } else {
            $url = $isSecure ? 'https://cravatar.cn' : 'https://cravatar.cn';  //镜像源
            $url .= '/avatar/'; //(镜像源文件夹)
        }
        if (!empty($mail)) {
            $url .= md5(strtolower(trim($mail)));
        }
        $url .= '?s=' . $size;

        if (isset($rating)) {
            $url .= '&r=' . $rating;
        }

        if (isset($default)) {
            $url .= '&d=' . $default;
        }
    }
    return $url;
}

三、显示用户的头字母

如果既没有注册 Gravatar 头像,又没有留 QQ 邮箱,那又将使用他指定的默认头像了,于是又有人想出了使用用户头字母来作为图像的办法,并留下了 function ,我们只要对代码稍作修改即可。

1.修改主题文件夹下的 function.php 文件,在最后添加一个下面的两个函数

/**
 * 获取首字母头像
 * @param $text
 * @return string
 */
function letter_avatar($text)
{
    $total = unpack('L', hash('adler32', $text, true))[1];
    $hue = $total % 360;
    list($r, $g, $b) = hsv2rgb($hue / 360, 0.3, 0.9);
    $bg = "rgb({$r},{$g},{$b})";
    $color = "#ffffff";
    $first = mb_strtoupper(mb_substr($text, 0, 1));
    $src = base64_encode('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100" width="100"><rect fill="' . $bg . '" x="0" y="0" width="100" height="100"></rect><text x="50" y="75" font-size="70" text-copy="fast" fill="' . $color . '" text-anchor="middle" text-rights="admin" alignment-baseline="central">' . $first . '</text></svg>');
    return 'data:image/svg+xml;base64,' . $src;
}
function hsv2rgb($h, $s, $v)
{
    $r = $g = $b = 0;
    $i = floor($h * 6);
    $f = $h * 6 - $i;
    $p = $v * (1 - $s);
    $q = $v * (1 - $f * $s);
    $t = $v * (1 - (1 - $f) * $s);
    switch ($i % 6) {
        case 0:
            $r = $v;
            $g = $t;
            $b = $p;
            break;
        case 1:
            $r = $q;
            $g = $v;
            $b = $p;
            break;
        case 2:
            $r = $p;
            $g = $v;
            $b = $t;
            break;
        case 3:
            $r = $p;
            $g = $q;
            $b = $v;
            break;
        case 4:
            $r = $t;
            $g = $p;
            $b = $v;
            break;
        case 5:
            $r = $v;
            $g = $p;
            $b = $q;
            break;
    }
    return [
        floor($r * 255),
        floor($g * 255),
        floor($b * 255)
    ];
}

调用该函数的语句就是 <?php echo letter_avatar('hollowman') ?>,但我们需要根据需要才调用对应的图像,那就还要又实现的思路。

2. 将原调用语句 <?php $comments->gravatar('40', ''); ?>修改成如下语句,并设置好样式

<!-- 如果没有注册gavatar图像,也没有qq邮箱,则显示首字母图像像 -->
<div class="avatar-bg" style="background-image:url(<?php echo letter_avatar($comments->author); ?> ">
    <?php $comments->gravatar('40', 'blank'); ?>
</div>

样式代码

/* 默认avatar图像 */
.avatar {
  border-radius: 50%;
  display: block;
  margin: auto;
}

/* 首字母图像背景 */
.avatar-bg {
  border-radius: 50%;
  display: block;
  margin: auto;
  background-size: cover;
  width: 40px;
  height: 40px;
}

分析:

  • 1) 增加了一个上级div,其大小设置为与avatar图像大小相同,并在该div中调用首字母图像作为背景;
  • 2) 修改了gravatar('40', '')函数,增加了一个 blank 参数。增加这个参数后,则在只有默认 avatar 头像的情况下,该图像会变为透明,从而让背景的图片显示出来。