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头像的接口也支持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头像 第二波:点此进入
标签: Gravatar头像, QQ头像, Typecho评论功能
分享:
已有 70 条评论
2017年07月22日
很实用啊,谢谢了
2017年08月13日
测试头像
2017年09月04日
感谢感谢!很有用的信息
2017年10月23日
试试看
2017年11月15日
可以给我完整的评论模块代码不,
2017年12月05日
支持一下
2017年12月17日
测试头像哦
2017年12月22日
试一试
2017年12月23日
53
2017年12月29日
已经更改回来了
2018年02月27日
哈哈,看头像
2018年03月10日
666
2018年04月09日
哎呦,你这ID有趣啊!
2020年03月26日
为了这个而来
2019年05月24日
2018年03月22日
ceshi
2018年05月05日
我就是试试头像
2018年05月05日
好像失败了耶
2018年05月15日
这个功能很强大啊
2018年05月26日
测试
2018年05月31日
测试一下
2018年06月19日
测试头像
2018年07月24日
hahahaha
2018年08月22日
试试
2018年09月14日
头像?
2018年09月30日
test qq
2018年10月09日
测试头像
2018年10月15日
测试看看。
2018年10月22日
不错
2018年10月29日
测试一下
2018年11月07日
睡觉觉!你在你家
2018年11月16日
测试头像测试头像!
2018年11月23日
测试
2018年11月27日
测一下我的头像
2018年12月03日
测试头像
2018年12月22日
测试头像
2018年12月28日
啊
2019年01月05日
带带
2019年01月07日
测试头像
2019年01月16日
看看头像
2019年01月26日
试试
2019年02月09日
哈哈
2019年03月16日
测试
2019年03月19日
现在看来你的头像显示已经被403了
2019年03月20日
已经恢复了,我自己的头像API炸了,所以换回了腾讯的API
2019年03月24日
试试
2019年04月20日
测试
2019年04月30日
现在估计报错了吧
2019年05月04日
测试头像
2019年05月16日
test
2019年05月21日
谢谢谢谢
2019年05月26日
直接把评论里人家的邮箱或者QQ号给爆出来了,这个BUG这么明显。。。可以用嘛?
2019年08月13日
试试看
2019年08月23日
测试一下
2019年08月29日
66666
2019年09月05日
乖宝宝
2019年09月05日
11111
2019年10月01日
测试评论
2019年10月19日
我原来测试一下
2020年02月06日
可以冒名顶替别人的QQ头像
2020年03月10日
厉害,不过你这评论模板能不能借我下?谢谢楼主!
2020年03月20日
测试测试
2020年03月29日
``
2020年04月08日
看看头像
2020年04月27日
收藏了
2020年05月16日
测试
2020年05月16日
ceshi
2020年07月23日
支持
2020年08月02日
我来康康效果,嘻嘻
2020年10月23日
在?KK头像