in 折腾博客 (1163℃)

昨天在泽泽那块看到了《使用AJAX实时获取评论头像》一文,感觉这种在主题里内嵌API的方式会浪费服务器性能,毕竟频繁访问API多多少少会对机器产生一些影响,故有此文

代码部分

$(document).ready(function(){
var getavatar = md5($("#mail").val());
$("#jq-avatar-replace").attr('src','https://gravatar.loli.net/avatar/'+ getavatar); 
});
$('#mail').bind('input propertychange', function() {
    var getavatar = md5($("#mail").val());
    $("#jq-avatar-replace").attr('src','https://gravatar.loli.net/avatar/'+ getavatar); 
});

说明:#mail为评论信息填写窗口内的邮箱部分,将填邮箱的<input>标签赋上id="mail"即可
#jq-avatar-replace为头像的实时显示,将要显示实时头像的<img>标签赋上id="jq-avatar-replace"即可
https://gravatar.loli.net/avatar/的头像源可按照实际需求进行更换
第一个function是考虑到非首次评论,第二个function是为了实现当输入框内容有变动时头像能跟着变
需要引用jquery和blueimp-md5这两个js文件,jq和这个库需要在上述代码运行之前加载

为啥登录用户无法显示

去Typecho的模板文件夹里找到comments.php,找到<?php if($this->user->hasLogin()): ?>这个东东,然后在他下面另起一行,写上<input id="mail" style="display:none" value="<?php $this->remember('mail'); ?>"/>即可
注:Typecho的邮箱信息是存在Cookie里的,此方法并不是暴露邮箱隐私的做法

主题里有pjax怎么办

本人的主题有pjax,刚才弄的时候忽视了这一点,故重新弄一遍代码,使用pjax方案的可以将上面的代码换成下面的新版代码,如果主题不是pjax(ajax)的可以随意

function avatar_replace_load(){
    var getavatar = md5($("#mail").val());
    $("#jq-avatar-replace").attr('src','https://gravatar.loli.net/avatar/'+ getavatar); 
}
$('#mail').bind('input propertychange', function() {avatar_replace_load();});
$(document).ready(function(){avatar_replace_load();});

重载代码有两条

avatar_replace_load();
$('#mail').bind('input propertychange', function() {avatar_replace_load();});

重载,即重新运行,故想办法让代码在换页面之后再运行一次就ok了

 |   | 

相关标签:#评论 #Gravatar #jQuery #头像

许可协议: 署名-相同方式共享 4.0 国际 转载请保留原文链接及作者