QQ爹博客 QQ爹博客

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

in Typecho 文章转载请注明来源!

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

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

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

function themeInit($archive)
{
if( $_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实时获取评论头像》

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

typechogravatarajax头像
发表新评论
  • ]
已有 12 条评论
  1. 胡家小子
    胡家小子 10Chrome 66
    回复

    收下了

  2. mr.tcsy
    mr.tcsy火狐浏览器 58
    回复

    CTRL+D,移除此书签

  3. 野兔
    野兔 10火狐浏览器 61
    回复

    牛逼牛逼666

  4. Sakura
    SakuraEdge 13
    回复

    已收藏,以后弄wp的时候也许会用到吧。。。

    1. Jrotty
      Jrotty本文作者 10Chrome 67
      回复

      @Sakura 之前看到别的主流博客都有类似的教程文章就typecho没有,于是水一下

  5. c0sMx
    c0sMx VistaOpera浏览器
    回复

    看来 WordPress 与 Typecho 的相似点还不少。

    1. Jrotty
      Jrotty本文作者 10Chrome 67
      回复

      @c0sMx 都是php哈,这种小功能差异比较少

    2. 香菇
      香菇 7QQ浏览器 10
      回复

      @c0sMx 看阁下的UA,想必不是一般人。

  6. 香菇
    香菇 10傲游浏览器 5
    回复

    《论 te function.php 的应用场景》

    1. Jrotty
      Jrotty本文作者客户端
      回复

      @香菇 水文利器

前篇 后篇
雷姆
拉姆