Loading... ## 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.效果展示 最终效果: |  |  |  | | :- | :- | :- | 完整页面展示:  后面只需要修改个人资料的邮箱地址就行了,会自动解析出来。 Last modification:August 5th, 2020 at 08:46 pm © 允许规范转载 Support 喜欢就加个鸡腿吧! ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat