逐心

Typecho自带评论改QQ头像 第二波

Admin • 2017-11-17 • 日常笔记

之前暑假的时候，博主刚用上Typecho博客程序，就给自带的评论功能改造过，把获取Gravatar头像给改成了获取QQ头像。不过当初有些问题没解决，就一直搁置在那。
详情请看：Typecho自带评论功能 Gravatar头像改QQ头像

所留存问题：
评论需填写QQ邮箱，如果填写的邮箱非qq号@qq.com格式，则无法获取真实头像。

今晚在看别人程序的时候，突然出现了一点灵感，改造了半个多小时，总算是完善了这个功能了，下面就给大家说下改造步骤吧。如果看过博主第一篇改造QQ头像的文章的话，就会知道最后因为提交QQ号会出现“邮箱地址不合法”而导致无法评论。
今晚我在看别人开发的一款程序，程序里有个功能是同步输入两个input的内容，突然想到能不能第一个输入框输出QQ号，第二个input里直接显示QQ号@qq.com呢？这样放在我博客评论里不就OK了？
果断打开本宝宝的开发神器“Hbuilder”，写了一个JS小功能，发现可以完美实现，perfect！！！
代码如下：

<script language="javascript">
function qqemail(){
    document.all["input2"].value=document.all["input1"].value+'@qq.com'
}
</script>
<input type="text" id="input1" onkeyup="qqemail()">

这一段js方法的意思是，让input1这个输入框绑定一下qqemail()这个方法，每次输入内容都会触发方法，会使input2的内容等于input1的内容，并且会在尾部添加“@qq.com”这段字符串。
上面图片便是我们模板里的实际代码，将输入email的输入框copy一份，修改为输入QQ号的内容，因为我们是实际提交的是邮箱，所以将原本的email的input不可以删除，只是通过css的display属性将此input隐藏。

完成代码修改之后，我们测试评论了一下，发现完全可行。至此，通过提交QQ号码来获取头像这一功能算是完成了。

不过呢，以博主我的尿性，自己有的就坚决不用别人的，所以我考虑将原本的QQ头像获取接口给改成自己之前开发的QQ头像云存储的头像获取接口。
QQ头像云存储：点此查看
因为QQ头像云存储的头像接口无法通过邮箱来获取，所以我打算直接截取输出数据库内邮箱地址的“@”字符之前的QQ号。
在该模版内，获取评论邮箱地址的代码为$comments->mail;，我们之前就写过代码$number=$comments->mail;，所以变量$number便是QQ邮箱。
通过PHP的字符串分割函数explode，我们写出代码$qqnum = explode("@",$number);，然后我们通过输出$qqnum[0],所得到的内容便是QQ号，最终我写出如下代码。

<span itemprop="image">
<?php
$number = $comments->mail;
$qqnum = explode("@",$number); 
echo '<img src="http://qqimg.wg1997.cn/qqimg.php?qq='.$qqnum[0].'" width="46px" height="46px" style="border-radius:5px;float:left;margin-top:0px;margin-right:10px;margin-bottom:-2px">';
?>
</span>

通过博主的实际测试，这段代码完美运行，下面附带几张改造后的评论区域的图片！

最后这张图可以看到，评论区域的头像链接已经改为QQ头像云存储的QQ头像获取接口的链接。

至此，博主给评论区域的改造的问题都通过另类的方法处理了，本次改造也宣告正式结束，也感谢朋友你能一直看到最后，Thanks！

最后为大家附上本博客改造后模板包：点此下载