Typecho博客通过QQ头像API自动解析邮箱生成头像地址

Author： Anleeno
发布时间：August 3, 2020
472views
No comments
2068 words
Categories： Typecho

## 1.问题的出现

由于我使用的是<a href="https://www.mlwly.cn/archives/fresh.html" target="_blank" rel="nofollow">Fresh后台主题</a>，用的还不错，但是这里有一个问题，Fresh默认解析的头像是Gravatar的灰色头像，当然这里可以在后台更改，只是改了就是固定的了，作为颜值党简直不能忍啊！所以我对源码做了一些修改，以实现当后台更改个人信息栏的邮箱时自动解析当前QQ头像，不是QQ邮箱就默认Gravatar头像。

## 2.预备知识

开始之前先介绍这两种头像来源的接口，它们的调用方式如下：

> QQ头像来源 `http://q1.qlogo.cn/g?b=qq&nk=QQ号&s=100`
> Gravatar头像来源(国内镜像) `http://cdn.v2ex.com/gravatar/md5加密后的邮箱?s=100`

其实很简单，就是字符串拼接，后面的"s"参数代表分辨率，只是Gravatar头像没有要求，而QQ头像必须是100、200、640，其它会报错。

## 3.具体实现

当然我是以Fresh为例讲解的，方法是通用的，找到img标签调用就行了。

### 3.1.定义解析头像的函数

在/var/Typecho/Common.php中定义一个函数：

```
/**
 *解析QQ邮箱头像
 */
public static function getUrlByQQMail($email)
{
     if ($email) {
         if (strpos($email, "@qq.com") !== false) {
             //取到QQ号
             $email = str_replace('@qq.com', '', $email);
             //QQ号可能有英文的，做个判断
             if(is_numeric($email)){
                 //和接口进行拼接，&s是参数，可以为100、200、640，其它报错
                 $url = "https://q1.qlogo.cn/g?b=qq&nk=" . $email . "&s=100";
             }else{
                 $mmail = $email.'@qq.com';
                 //md5加密该邮箱和gravatar头像库组合
                 $email = md5($mmail);
                 $url= "https://cdn.v2ex.com/gravatar/" . $email . "?s=00";
             }
  
         } else {
             //不是QQ邮箱则用md5加密该邮箱和gravatar头像库组合
             $email = md5($email);
             $url= "https://cdn.v2ex.com/gravatar/" . $email . "?s=100";
         }
     } else {
         //没有指定就默认gravatar头像
         $url= "https://cdn.v2ex.com/gravatar/null?s=100";
     }
     return $url;
 }
```

### 3.2.前端代码修改，调用该函数

在主题目录下找到FreshUi.php文件，在显示头像的对应标签作以下修改：

```
<?php echo '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=" data-original="' . Typecho_Common::getUrlByQQMail($user- />mail) . '" alt="' . $user->screenName . '" />'; ?>
```

这就动态获取了个人信息里面的邮箱地址，从而实现了自动解析头像。

由于这个主题有两个显示头像的地方，故两个地方都需要替换，自己F12调试去找。

## 4.效果展示

最终效果：

| ![QQ邮箱1示例](https://www.anleenoxu.top/usr/uploads/2020/08/3129567456.png) | ![QQ邮箱2示例](https://www.anleenoxu.top/usr/uploads/2020/08/2661497397.png) | ![网易邮箱示例](https://www.anleenoxu.top/usr/uploads/2020/08/3386777044.png) |
| :- | :- | :- |

完整页面展示：
![](https://www.anleenoxu.top/usr/uploads/2020/08/1653561238.png)

后面只需要修改个人资料的邮箱地址就行了，会自动解析出来。

Last modification：August 5th, 2020 at 08:46 pm

喜欢就加个鸡腿吧！