Joe主题 根据QQ号获取QQ昵称、头像和QQ邮箱 兼评论模块修改 - 风之涯技术博客

标签搜索

Joe主题 根据QQ号获取QQ昵称、头像和QQ邮箱 兼评论模块修改

小峰
2022年09月12日 / 7 评论 / 100 阅读 / 正在检测是否收录...

根据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);">QQ</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,跟我这个效果还是有不一样的。

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

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

0

评论 (15)

QQ
昵称
邮箱
取消
  1. 头像
    啭捔儚俖遇笕
    Windows 10 . QQ Browser . 江苏省苏州市
    回复
    1. 头像
      晓峰 作者
      Windows 10 . Google Chrome . 北京市丰台区
      @ 啭捔儚俖遇笕

      代码没有问题的哦?是我这边误传了文件,导致变成了反编译效果,比如< 变成了&lt;这样的,>变成了&gt; 你反替换一下吧。 应该是这个的问题

      回复
    2. 头像
      啭捔儚俖遇笕
      Windows 10 . QQ Browser . 江苏省苏州市

      你好 这个代码是不是有问题?有好多无用的代码字符,comment.php这里的好像有好多无用的 导致代码不可用

      回复
      1. 头像
        晓峰 作者
        Windows 10 . Google Chrome . 北京市丰台区
        @ 啭捔儚俖遇笕

        我已经修复了我博客的问题,现在可以正常复制了。

        回复
        1. 头像
          啭捔儚俖遇笕
          Windows 10 . QQ Browser . 浙江省
          @ 晓峰

          昵称获取全是 QQ游客 不知道怎么回事 图像也获取不过来 发表评论后才显示出图像

          回复
          1. 头像
            晓峰 作者
            Windows 10 . Google Chrome . 北京市丰台区
            @ 啭捔儚俖遇笕

            把js中的ajax请求改为get,我没注意这个问题,你去看一下他API的请求方式就应该知道,应该是get请求画图

            回复
          2. 头像
            晓峰 作者
            Windows 10 . Google Chrome . 北京市丰台区
            @ 啭捔儚俖遇笕

            这两天在研究街机游戏网页玩,没注意看你的消息,注意一下接口的参数 我这里的例子是按照我这边的请求接口写的,所以有点误差。routeType:'qq_info',参数去掉,请求方式改为get请求。

            回复
            1. 头像
              啭捔儚俖遇笕
              Windows 10 . QQ Browser . 浙江省
              @ 晓峰

              if (!isNaN(qq_num)) {

                      $.ajax({
                          url: '//api.vvhan.com/api/qq',//韩小韩API提供的获取qq信息的接口
                          type: "get",
                          data: {
                              qq: qq_num,
                          },
                          async: true,
                          dataType: "json",

              还是不行有点郁闷了,获取不到昵称 都是QQ游客 头像也是 发表后才显示

              回复
              1. 头像
                啭捔儚俖遇笕
                Windows 10 . QQ Browser . 浙江省
                回复
                1. 头像
                  晓峰 作者
                  Windows 10 . Google Chrome . 北京市丰台区
                  @ 啭捔儚俖遇笕

                  我估计是他那个接口不允许被调用,我这里本地测试 返回的是一个错误,如下图
                  画图

                  回复
                2. 头像
                  晓峰 作者
                  Windows 10 . Google Chrome . 北京市丰台区
                  @ 啭捔儚俖遇笕

                  我又调整了一下,是他接口返回的描述有问题,我仔细看了一下他的返回结果,如下图画图
                  并没有code参数,修改一下
                  1.首先把接口url补全,加上https:,变成https://api.vvhan.com/api/qq
                  2.修改res.code === 1 变成res.success 即可
                  3.修改$('#author').val(res.name===""?'QQ游客' : res.name);
                  整体如下图
                  画图

                  回复
                3. 头像
                  晓峰 作者
                  Windows 10 . Google Chrome . 北京市丰台区
                  @ 啭捔儚俖遇笕

                  我估计是哪个环节出了问题,方便的话 联系我QQ(83560309)吧

                  回复
                  1. 头像
                    啭捔儚俖遇笕
                    Windows 10 . QQ Browser . 浙江省
                    @ 晓峰

                    多谢 解决了

                    回复
                  2. 头像
                    啭捔儚俖遇笕
                    Windows 10 . QQ Browser . 浙江省
                    @ 晓峰

                    EMMM 发表评论后 再次发布的时候 QQ号要重新填写 才可以 蛋疼 慢慢整吧 先将就用着

                    回复
                    1. 头像
                      晓峰 作者
                      Windows 10 . Google Chrome . 北京市丰台区
                      @ 啭捔儚俖遇笕

                      显示QQ需要改Joe的核心代码,因为数据库并没有QQ这个字段,只有根据QQ邮箱去拆解后显示到框内,可以自行研究。我这里不是Joe的PHP业务代码,所以很简单。

                      回复