港子工坊

Follow my heart.

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

博主今天安装完新的博客程序之后,发现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截图20170715204353.jpg

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

QQ截图20170715204714.jpg

幸亏获取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>

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

QQ截图20170715205659.jpg

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

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

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

评论卡

已有 51 条评论

  1. 美股行情
    2017年07月22日

    很实用啊,谢谢了

  2. 夜色静好
    2017年08月13日

    测试头像

  3. 美股指数
    2017年09月04日

    感谢感谢!很有用的信息

  4. 腾讯
    2017年10月23日

    试试看

  5. 聆听苏音
    2017年11月15日

    可以给我完整的评论模块代码不,

  6. 冷亦
    2017年12月05日

    支持一下

  7. test
    2017年12月17日

    测试头像哦

  8. keycc
    2017年12月22日

    试一试

  9. 你摸
    2017年12月23日

    53

  10. 大宝健
    2017年12月29日

    已经更改回来了

  11. 我是来看头像的
    2018年02月27日

    哈哈,看头像

  12. 马云
    2018年03月10日

    666

    1. 自由随心
      2018年04月09日

      哎呦,你这ID有趣啊!

    2. 123
      5月24日

  13. p4tt3rn
    2018年03月22日

    ceshi

  14. SHIH
    2018年05月05日

    我就是试试头像

    1. SHIH
      2018年05月05日

      好像失败了耶

  15. gg
    2018年05月15日

    这个功能很强大啊

  16. 11
    2018年05月26日

    测试

  17. 黑色
    2018年05月31日

    测试一下

  18. sleepets
    2018年06月19日

    测试头像

  19. Neal
    2018年07月24日

    hahahaha

  20. s
    2018年08月22日

    试试

  21. 小睿
    2018年09月14日

    头像?

  22. Noob
    2018年09月30日

    test qq

  23. 神奇
    2018年10月09日

    测试头像

  24. share1223
    2018年10月15日

    测试看看。

  25. 骚九
    2018年10月22日

    不错

  26. 测试
    2018年10月29日

    测试一下

  27. 哈哈哈
    2018年11月07日

    睡觉觉!你在你家

  28. ingran
    2018年11月16日

    测试头像测试头像!


  29. 2018年11月23日

    测试

  30. shenlan
    2018年11月27日

    测一下我的头像

  31. 徐懋之
    2018年12月03日

    测试头像

  32. 你好啊
    2018年12月22日

    测试头像


  33. 2018年12月28日

  34. 测试
    1月5日

    带带

  35. 随风
    1月7日

    测试头像

  36. 老云博客
    1月16日

    看看头像

  37. 清秋
    1月26日

    试试

  38. 22
    2月9日

    哈哈

  39. funnt
    3月16日

    测试

    1. 温馨提示
      3月19日

      现在看来你的头像显示已经被403了

      1. admin
        3月20日

        已经恢复了,我自己的头像API炸了,所以换回了腾讯的API

  40. 夏目
    3月24日

    试试

  41. 猫猫
    4月20日

    测试

  42. qq
    4月30日

    现在估计报错了吧

  43. MOS
    5月4日

    测试头像

  44. andy
    5月16日

    test

  45. 吃吃吃
    5月21日

    谢谢谢谢

  46. tx
    5月26日

    直接把评论里人家的邮箱或者QQ号给爆出来了,这个BUG这么明显。。。可以用嘛?