逐心者

Typecho自带评论功能 Gravatar头像改QQ头像

Admin • 2017-07-15 • 日常笔记

博主今天安装完新的博客程序之后，发现Typecho博客程序自带的评论功能里，头像是调用的Gravatar头像。

相信大部分做过网站的朋友都知道，Gravatar是一个全球性的头像设置平台，除中国以外大部分网站都是调用的此平台头像，但因为我们伟大的祖国有一般人射不穿的城墙（网友们都懂的๑乛◡乛๑），所以用这个头像平台的用户很少，导致大部分使用此头像平台的网站，评论区总会有很多Gravatar官方头像（因为他们都没去设置过...）。

嗯。。。博主我就是因为墙的问题，一直懒得在Gravatar上设置头像（其实主要是因为那个网站太丑了）(●´∀｀●)~~

经过我的慎重考虑，最后决定将这个头像获取接口改为QQ头像的，毕竟是个网友就有QQ嘛，头像问题也就搞定啦。

说弄，咱就开始弄嘛，直接在后台进模板设置，找到评论区相关的模版文件：comments.php。

然后打开博客网站，找到评论区，发了条测试评论，F12审查元素看了看头像的div。

最终锁定到comments.php的如下代码：

<div class="comment-author" itemprop="creator" itemscope itemtype="http://schema.org/Person">
  <span itemprop="image"><?php $comments->gravatar('100', ''); ?></span>
  <div class="comment-meta" style="font-size: 12px;">
    <cite class="fn" itemprop="name"><?php $comments->author(); ?></cite><br/>
    <span itemprop="commentTime"><?php $comments->dateWord(); ?></span>
  </div>
</div>

其中第二行的span标签应该就是头像区块，其中的php代码段输出的内容就是头像的img标签了，愣一看有点懵比，又看了看上下级行的代码，感觉发现了点什么，去数据库看了看，发现comments是数据库表，后面的应该是输出字段，可却没有gravatar这个字段，所以我觉得应该是在哪里写的这个方法，可找遍了模板就是没找到，最终放弃。

反正已经找到了输出img标签的地方了，就好说了，果断删掉$comments->gravatar('100', '');，再去文章页刷新一看，头像果然消失了，再重新输出一个img标签就好了。

先去电脑里找了一下我之前写过的一个QQAPI接口程序，找到获取QQ头像的接口。

http://q2.qlogo.cn/headimg_dl?dst_uin=QQ号&&spec=100

这是一个输出100*100大小的QQ头像的接口，把其中的"QQ号"改为要获取的QQ号码，直接访问链接便是头像。

可问题是怎么获取评论者的QQ号呢，考虑许久之后，决定把填写邮箱改为填写QQ号码，说干就干吧，把input的type="email"改成type="text"，让他不检测邮箱格式，再去改掉显示的提示文字。

再测试评论一下试试看，oh！ fuck！ 天不容我，给我提示这玩意！

这让我很不爽，后台处理还有条件限制，去看下表单提交文件，啥？ 真不想骂人。。。这叫啥处理文件，目录都被格式化了，行吧，我不找了，我填邮箱还不行，以后再慢慢找吧。

幸亏获取QQ头像的接口也支持QQ邮箱获取，老天保佑，又改回type="email"，提示内容也改成了填写QQ邮箱。

嗯，接下来搞定头像获取就好啦，去数据库看了看，存邮箱的字段名是mail，所以获取内容应该是$comments->mail;，先new个变量获取下邮箱吧$number=$comments->mail;。

接下来就好说了，把接口里的"QQ号"改为"$number"，然后echo一下就好喽。

<span itemprop="image"><?php $number=$comments->mail; echo '<img src="http://q2.qlogo.cn/headimg_dl?bs='.$number.'&dst_uin='.$number.'&dst_uin='.$number.'&;dst_uin='.$number.'&spec=100&url_enc=0&referer=bu_interface&term_type=PC">'; ?></span>

保存下模板吧，去评论区看下，获取到了，可是大小、位置不大对啊，再改下样式吧。

最终得到的代码段如下

<span itemprop="image"><?php $number=$comments->mail; echo '<img src="http://q2.qlogo.cn/headimg_dl?bs='.$number.'&dst_uin='.$number.'&dst_uin='.$number.'&;dst_uin='.$number.'&spec=100&url_enc=0&referer=bu_interface&term_type=PC" width="46px" height="46px" style="border-radius:5px;float:left;margin-top:0px;margin-right:10px;margin-bottom:-2px">'; ?></span>

最终效果看下，感觉还不错耶，感觉这个新博客越来越适合我啦 ๑乛◡乛๑

此次改造至此完成，下面再改改什么呢，嗯，值得考虑，如果有网友觉得这个博客还有什么需要改进的地方，欢迎在下面评论呦，如果有好建议，博主会感谢你的(●´∀｀●)

因本改造有部分问题未能解决，如果你通过本文改造了贵站功能，可继续查看博主写的第二篇关于改造该功能的文章来解决本文的遗留问题！

Typecho自带评论改QQ头像 第二波：点此进入