港子工坊

落子无悔,人生无返

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

之前暑假的时候,博主刚用上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”这段字符串。
copy.jpg上面图片便是我们模板里的实际代码,将输入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>

通过博主的实际测试,这段代码完美运行,下面附带几张改造后的评论区域的图片!
hou1.jpghou2.jpghou3.jpg
最后这张图可以看到,评论区域的头像链接已经改为QQ头像云存储的QQ头像获取接口的链接。

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

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

评论卡

已有 40 条评论

  1. 港子工坊
    2017年11月17日

    博主测试改造后评论功能。

  2. 心度
    2017年11月17日

    666哦

  3. world
    2017年11月18日

    支持

  4. 聆听苏音
    2017年11月18日

    嗯哼?我下了你的这个改造后的模板包,然而里面并没有把评论改了,,

    1. admin
      2017年11月18日

      之前传错了,传的是原版的模板,我重新打包了一次模板,你可以重新下载。

  5. 啦啦啦
    2017年11月19日

    wp能不能用这种方法?

    1. admin
      2017年11月19日

      理论上说所有程序都可以用这种方法,自己按需修改即可!

  6. 梁兴健
    2017年11月21日

    厉害了

  7. PrajnaSmoke
    2017年12月06日

  8. 小猫
    2017年12月08日

    博主来测试测试啦, 顺便问一下 那这样就填写QQ号 邮箱评论插件会不会用不了呢 要怎么办呢。

    1. admin
      2017年12月09日

      不会的,访客填写的是QQ号,可提交到数据库的还是QQ邮箱。

      1. 小猫
        2017年12月15日

        试了一下,好像邮箱不起作用,不知道是不是我的问题ヽ(●-`Д´-)ノ

  9. coffee
    2017年12月18日

    看到最后了,竟然还有下载地址!惊喜,坚持就是胜利✌

  10. SniperXu
    2017年12月28日

    不错 学习一下

  11. 大宝健
    2017年12月29日

    有原版评论吗?有时候别人不一定用QQ,所以。。。。能否提供原版评论呢

  12. 小嵘
    1月17日

    。。。。好厉害。。

  13. 吖远zzy
    2月6日

    要是我并不适用QQ,所以并没有QQ呢?这很尴尬。。。

  14. 我是来看头像的
    2月27日

    老姐,你把QQ都暴露了,头像地址里面就是QQ号 啊~

    1. admin
      2月27日

      感谢建议,我会考虑把头像真实地址进行加密处理。

  15. 111
    3月10日

    1111

  16. Roogle
    4月2日

    我就过来测个头像

  17. 亿七
    4月9日

    我也来试试!

  18. 醉仆人
    4月13日

    厕所

  19. keccak
    5月3日

    测试代码头像是否正常显示,2018-05-03 06:49:17

  20. djj
    5月15日

    2333333

  21. 情随事迁
    5月15日

    可以的 get新技能

  22. 大林
    6月11日

    牛批

  23. 蜡笔小新
    6月24日

    我试一下

  24. 菠萝菠萝蜜
    7月5日

    测试李莫愁

  25. 那依
    8月16日

    很是实用啊

  26. 哈哈
    9月5日

    试试麻花疼的

  27. 晨光
    9月7日

    测试一下

  28. mo
    9月19日

    测试

  29. 小蛮
    10月13日

    谢谢分享不错

  30. 6969
    10月16日

    如果不是QQ?

    1. dhdh
      10月26日

      dhhdjd

  31. 雨致
    11月4日

    测试测试测试

  32. mutiko
    11月12日

    大佬,我用了您的,为什么下面的状态栏总是高一截导致看不到 评论的提交按钮

  33. inrna
    11月19日

    ceshixia

  34. 啊啊
    昨天 15:51

    测试