Typecho使用AJAX实时获取评论头像

Typecho教程 typecho gravatar ajax 头像 2018-07-6

前言
刚才在隔壁看到《WordPress使用AJAX实时获取评论头像》,我就想typecho是不是也能实现这个功能呢!

看了《WordPress使用AJAX实时获取评论头像》这个文章后,我理解到,它实际就是给模板内置了个api,通过ajax请求这个api来实时获取邮箱头像地址。懂了原理就简单了

PHP部分
此代码添加到主题functions.php文件

function themeInit($archive)
{
if(isset($_GET['action']) == 'ajax_avatar_get' && 'GET' == $_SERVER['REQUEST_METHOD'] ) {
$host = 'https://secure.gravatar.com/avatar/';
$email = strtolower( $_GET['email']);
            $hash = md5($email);
           $sjtx = 'mm';
 $avatar = $host . $hash . '?d='.$sjtx;
        echo $avatar; 
        die();
    }else { return; }
}

如果你的模板已经添加过了themeInit,那么只要向themeInit内部添加if部分即可。

JS部分
此代码添加到主题js文件

$("input#email").blur(function() {
  var _email = $(this).val();
  if (_email != '') {
    $.ajax({
      type: 'GET',
      data: {
        action: 'ajax_avatar_get',  
        form: ajaxurl, // 修改为你的Ajax路径
        email: _email
      },
      success: function(data) {
        $('.avatar').attr('src', data); // 修改为你自己的头像标签
      }
    }); // end ajax
  }
  return false;
});

代码中的input#email.avatar需要根据自己的模板进行适当修改,代码中的ajaxurl可以直接写自己博客地址,或者当前文章地址也行,可以用js获取地址,也可以直接写死。

后语
其实除了php部分和WordPress稍有不同外,其他没什么不同,js部分直接抄自《WordPress使用AJAX实时获取评论头像》

30条评论

    echo

    在paul的Fantasy主题下,不能用啊,按照代码修改后头像框只是一个破损的图片的形状,发表评论后,评论区的头像也还是系统默认的头像,大佬直到怎么改吗?

    游客 Windows7 368天前回复

      Jrotty
      @echo

      你可以让paul加嘛

      作者 Windows10 368天前回复

    echo

    JS部分第8行,是干什么用的呢?
    form: ajaxurl, // 修改为你的Ajax路径

    游客 Windows7 368天前回复

    ohmyga

    显示报错 Notice: Undefined index

    游客 Windows10 405天前回复

      Jrotty
      @ohmyga

      也许是哪里你操作不当

      作者 Windows10 404天前回复

        ohmyga
        @Jrotty

        是if( $_GET['action']少了个isset ,if( isset($_GET['action'])这样子就不会报错了

        游客 Windows10 381天前回复

          Jrotty
          @ohmyga

          感谢提醒

          作者 Windows7 369天前回复

    保罗

    其实还可以直接利用这个接口跳转过去,不用 Ajax 都可以

    游客 Windows10 429天前回复

      echo
      @保罗

      大佬好,在你的Fantasy主题下,不能用啊,按照代码修改后头像框只是一个破损的图片的形状,发表评论后,评论区的头像也还是系统默认的头像,想请教下该怎么改?

      游客 Windows7 368天前回复

    哈哈

    你这个APP侧栏的捐赠功能是怎么做的呀?

    游客 449天前回复

    tcdw

    在前端做这事情的我。。用的 blueimp-md5 库在前端计算邮箱的哈希值。。

    游客 Windows10 464天前回复

      Jrotty
      @tcdw

      用api比较神秘嘛

      作者 安卓牛轧糖 464天前回复

    Eicky

    这个很牛逼

    游客 MacOS 465天前回复

    萌新

    js文件在哪?

    游客 Windows7 474天前回复

      Jrotty
      @萌新

      新建然后引入或者直接加到现有的js里

      作者 Windows10 473天前回复

    Molerose

    用啊,老板,怪事,我直接复制的,我们用的都是typecho 啊,哈哈哈哈

    游客 Windows7 476天前回复

      Jrotty
      @Molerose

      js部分需要根据实际情况适当修改的

      作者 475天前回复

    Roogle

    这个值得折腾一下,回头给自己的主题也加一下

    游客 Windows10 478天前回复

智能推荐