烦恼

每次访问别人的博客,想评论时,每次都要输入名字和邮箱甚至网站,这样很麻烦,但我知道有些用了其他浏览器辅助插件进行填充。
不过这次要让自己的博客评论起来更方便,让来访者更好的体验。

我的评论框就是展示,你可以体验一下。

想到基本上每个人都有QQ,那么不妨让来访者只输入QQ号然后就自动填写名字和邮箱,这确实是个好办法。
起初我认为随便输入一个QQ号就可以冒充任何人,但是xta.me的朋友提醒道[毕竟填一大堆名字和邮箱确实很烦。而且填邮箱这些也可能伪装],我想还是加上这个功能,然后写个此功能的教程

方法

这里实现输入QQ号快速评论,即输入了QQ号自动填写邮箱和名字
首先,找到文件comments.php
比如在官方的24行 https://github.com/typecho/typecho/blob/master/usr/themes/default/comments.php

<p>
   <label for="author" class="required"><?php _e('称呼'); ?></label>
   <input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required />
</p>

然后在输入网址的后面复写一个,重要的是 id="qqNum",比如:
html代码

<p>
   <label for="qqNum"><?php _e('快速评论'); ?></label>
   <input placeholder="QQ号输入快速评论" type="text" id="qqNum" class="text" style="font-size: 12px;"/>
</p>

然后Js监控输入事件,注意#qqNum
JavaScript 代码

$(document).on("input propertychange", "#qqNum", function (event) {
        event.preventDefault();
        let oldVal = $(this).val();
        let qq = window.setTimeout(function () {
            let newVal = $("#qqNum").val();
            if (newVal.length > 0 && oldVal === $("#qqNum").val() && !newVal.isNaN) {
                $.ajax({
                    url: 'https://api.krait.cn/?interface=personage&target=tencent&object=' + newVal,
                    dataType: 'jsonp',
                    jsonpCallback: 'portraitCallBack',
                    scriptCharset: "GBK",
                    contentType: "text/html; charset=GBK",
                    success: function (data) {
                        console.log(data);
                        //document.getElementById("comment-form-avatar").getElementsByTagName("img")[0].src = data["avatar_url"];  这里是替换头像,有些的评论框有展示头像的,比如我的就是,可以把comment-form-avatar替换为你绑定的头像div的id
                        $('#author').val(data["nickname"]);
                        $('#mail').val(data["email"]);
                    }
                })
            }
        }, 500);// 这里的500,表示输入过后0.5秒开始请求
    });

别忘记放在<script> //code </script>里面,最好在加在<?php if(!$this->user->hasLogin()): ?> //code <?php endif; ?>因为登录的用户不需要,只是给来访者的。

可以看出这里用到的api接口是https://api.krait.cn/?interface=personage&target=tencent&object=qqNum
为什么呢?这是因为腾讯这个坑爹的不给全接口,而且给非常隐蔽的接口还不能跨站请求。
所以我另写的一个。
我还是附上请求的那个api接口的php源码,这样小伙伴不怕我的死掉了,自己去做一个。

header("Access-Control-Allow-Origin: *");
header("Content-type: text/json; charset=UTF8");
if (
    !isset($_GET["object"]) ||
    $_GET["object"] == null ||
    !is_numeric($_GET["object"]) ||
    strlen($_GET["object"]) < 5) exit('Access Violation');
$object = $_GET["object"];
$apiInterface = 'http://r.qzone.qq.com/fcg-bin/cgi_get_score.fcg?mask=7&uins=';

try {
    $data = $this->curl_file_get_contents($apiInterface . $object);
    $pattern = '/portraitCallBack\((.*)\)/is';
    preg_match($pattern, $data, $result);
    $nickname = json_decode($result[1], true)["$object"][6];
    $json = json_encode(
        array(
            "id" => $object,
            "nickname" => $nickname,
            "avatar_url" => "https://q2.qlogo.cn/headimg_dl?dst_uin=$object&spec=100",
            "email" => $object . "@qq.com"
        ),
        JSON_UNESCAPED_UNICODE
    );
    echo "portraitCallBack(" . $json . ");";
} catch (Exception $e) {
    echo $e;
}

另外也可以增加用Github的资料填充,
和上面相同,把id="qqNum"改为id="githubNum"
然后就是JavaScript代码

function isEmpty(obj) {
        return typeof obj == "undefined" || obj == null || obj == "";
}
$(document).on("input propertychange", "#githubNum", function (event) {
        event.preventDefault();
        let oldVal = $(this).val();
        let github = window.setTimeout(function () {
            let newVal = $("#githubNum").val();
            if (newVal.length > 0 && oldVal === $("#githubNum").val()) {
                $.ajax({
                    url: 'https://api.github.com/users/' + newVal,
                    dataType: 'jsonp',
                    scriptCharset: "GBK",
                    contentType: "text/html; charset=GBK",
                    success: function (data) {
                        console.log(data);
                        let personal = data["data"];
                        //document.getElementById("comment-form-avatar").getElementsByTagName("img")[0].src = personal["avatar_url"];
                        $('#author').val(isEmpty(personal["name"]) ? personal["login"] : personal["name"]);
                        $('#url').val(isEmpty(personal["blog"]) ? personal["html_url"] : personal["blog"]);
                        //$('#mail').val(isEmpty(personal["email"]) ? "@" : personal["email"]);
                    }
                })
            }
        }, 1000);//这里是一秒,尽量长一些
    });

接口是https://api.github.com/users/ name

好了,按照上面的做就实现了快速回复功能。
要体验一下吗,你再往下滑动,体验一下我的。

标签: none

*

  1. xmin

    头像链接不做混淆或加密处理,部分非 gravatar 那我就可以随意拿到 dst_uin 方式进行“骚扰”了,虽然可以被搜索者关闭 Q 号搜索防止,但万能的百度,还是可以通过蛛丝马迹进行索引🙂

  2. 这个评论是我看到的最优秀的评论功能!点赞