根据QQ号获取QQ昵称、头像信息教程

先编写一个JS文件，随便自己命名，最后引用即可

比如我这里创建一个getQQinfo.js文件，如果是Joe主题，请先在【Joe/assets/js】下创建此js文件,并在需要此评论功能的页面引入此js文件，Joe主题在【Joe/public/include.php】中引入即可。

<script src="<?php _JStorageUrl('assets/js/getQQinfo.js'); ?>"></script>

然后去找一个获取QQ信息的接口api
我这里直接引用韩小韩API里面的接口 韩小韩API 直接访问过去，找到如下图的接口

在getQQinfo.js文件中编写如下代码

function fn_qqinfo() {
    var qq_num = $('#qqinfo').val();
    if (qq_num) {
        if (!isNaN(qq_num)) {
            $.ajax({
                    url: 'https://api.vvhan.com/api/qq',//韩小韩API提供的获取qq信息的接口
                    type: "get",
                    data: {
                        qq: qq_num,
                    },
                    dataType: "json",
                    success: function(res) {
                        if(res.success) {
                            $("#mail").val(qq_num + '@qq.com');
                            $('#comment').focus();
                            $("#author").val(res.name === "" ? 'QQ游客' : res.name);
                            $('div.ajax-user-avatar img').attr('src', res.imgurl);
                        }else{
                            $("#author").val('QQ游客');
                            $('textarea[name="text"]').focus();
                        }
                    },
                    error: function(err) {
                        $("#author").val('QQ游客');
                        $("#mail").val(qq_num + '@qq.com');
                        $('textarea[name="text"]').focus();
                    }
                });
        } else {
            $("#mail").val('你输入的好像不是QQ号码');
            $("#qqinfo").val('');
            $("#author").val('');
        }
    } else {
        $("#qqinfo").val('');
        $("#author").val('');
    }
}

在主题中修改评论HTML代码

如果是Joe主题，需要在【Joe/public/comment.php】中去修改如下代码

<div class="head">
    <div class="list">
        <input type="text" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." />
    </div>
    <div class="list">
        <input type="text" value="<?php $this->user->hasLogin() ? $this->user->mail() : $this->remember('mail') ?>" autocomplete="off" name="mail" placeholder="请输入真实邮箱，用于接收回信..." />
    </div>
    <div class="list">
        <input type="text" value="<?php $this->user->hasLogin() ? $this->user->url() : $this->remember('url') ?>" autocomplete="off" name="url" placeholder="请输入网址（非必填）..." />
    </div>
</div>

修改为下面的代码

<div class="head" style="margin-bottom: 15px;padding: 8px 10px">
    <div class="qqget_hasLogin ajax-user-avatar" style="margin-right: 1rem;width: 2.5rem;text-align: center;">
        <img class="lazyload" src="https://blog.xccx.cc/usr/themes/Joe-master/public/qq_comment/img/tx.png" data-src="" width="35px" height="35px" class="avatar hasLogin-author  " style="width: 40px;height: 40px;border-radius: 50%;border: 1px solid var(--classA);padding: 2px;"></div>
    <div class="ident qqget_input list" style="display: flex;flex: 1;margin-top: 2px;margin-right: 1rem;">
        <div class="text" style="white-space: nowrap;padding: 11px 1rem 0;border-radius: 5px 0px 0px 5px;background-color: rgba(144, 147, 153, 0.23);color: var(--main);">ＱＱ</div>
        <input type="text" class="form-control " name="qq" id="qqinfo" value="" placeholder="请输入QQ号" onblur="fn_qqinfo()" style="width: 100%;border: none;background: transparent;padding: 0 15px;height: 36px;border-radius: 0px 5px 5px 0px;border: 1px solid #90939950;color: var(--routine);font-family: 'Joe Font'"></div>
    <div class="list " style="margin-right: 1rem; display: flex;margin-top: 2px">
        <div class="text" style="white-space: nowrap;padding: 11px 1rem 0;border-radius: 5px 0px 0px 5px;background-color: rgba(144, 147, 153, 0.23);color: var(--main);">昵称</div>
        <input type="text" class="form-control " name="author" id="author" placeholder="*自动获取" readonly="" autocomplete="off" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" style="width: 100%;border: none;background: transparent;padding: 0 15px;height: 36px;border-radius: 0px 5px 5px 0px;border: 1px solid #90939950;color: var(--routine);font-family: 'Joe Font'">
    </div>
    <div class="list" style="margin-right: 1rem; display: flex;margin-top: 2px">
        <div class="text" style="white-space: nowrap;padding: 11px 1rem 0;border-radius: 4px 0px 0px 4px;background-color: rgba(144, 147, 153, 0.23);color: var(--main);">邮箱</div>
        <input type="text" class="form-control " name="mail" id="mail" placeholder="*自动获取" readonly="" unselectable="on" value="<?php $this->user->hasLogin() ? $this->user->mail() : $this->remember('mail') ?>" style="width: 100%;border: none;background: transparent;padding: 0 15px;height: 36px;border-radius: 0px 5px 5px 0px;border: 1px solid #90939950;color: var(--routine);font-family: 'Joe Font'">
    </div>
</div>     

因为我这个不是Typecho 也不是Joe核心主题代码，只是延用了Joe主题的HTML+JS，跟我这个效果还是有不一样的。

如果有什么疑问，可以评论区留言@我，最终样子截图

没有弃用原本的画图模式，可以放心使用，如果有样式的问题，可以自行调整。