由于 GFW 的关系,使用 gravatar 的博客评论头像经常会出现“图裂特效”,这肯定是很多站长小伙伴都遇到过的困扰。网络上也很多教程,通过更换 avatar 的来源,来解决图裂的问题。确实可以解决图裂困扰,但是这头像的加载速度确实还有待提高,下面本文就分享 3 种将头像缓存到本地的方法。
一、代码方案
代码缓存方案来自 Willin Kan 大师,内容摘自 WP 大学,以下是具体做法:
①、建立缓存目录
在 wp-content 的同級目录建立一个文件夹,命名为 avatar ,设置该文件夹的权限为 0755 (如果 0755 不行,就试一下 0777)。
②、设置默认头像
准备一张大小适合的默认头像,命名为"default.jpg" ,放在 avatar 文件夹里面。
③、添加缓存代码
将下面的代码复制到模板的 functions.php 文件中即可:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function my_avatar($avatar) { $tmp = strpos($avatar, 'http'); $g = substr($avatar, $tmp, strpos($avatar, "'", $tmp) - $tmp); $tmp = strpos($g, 'avatar/') + 7; $f = substr($g, $tmp, strpos($g, "?", $tmp) - $tmp); $w = get_bloginfo('wpurl'); $e = ABSPATH .'avatar/'. $f .'.jpg'; $t = 1209600; //設定14天, 單位:秒 if ( !is_file($e) || (time() - filemtime($e)) > $t ) { //當頭像不存在或文件超過14天才更新 copy(htmlspecialchars_decode($g), $e); } else $avatar = strtr($avatar, array($g => $w.'/avatar/'.$f.'.jpg')); if (filesize($e) < 500) copy($w.'/avatar/default.jpg', $e); return $avatar; } add_filter('get_avatar', 'my_avatar'); |
二、插件方案
前不久,知更鸟博主鸟哥在 begin 群里分享了一款将 gavatar 头像缓存到本地的插件,个人试用了下,发现还不错,这款插件的名字就叫:nix-gravatar-cache。貌似原版插件有点问题,鸟哥还 DIY 了一把。
如果,发现装了原版的有问题,那么就下载鸟哥改过的版本吧!
三、Nginx 方案
我在测试这个插件的过程中,看了下生效后的头像路径,突然灵感一现:这缓存完全可以通过 Nginx 的 proxy 反向代理来缓存到本地啊!就类似于方向代理谷歌,解决被墙问题。
说干就干,经过折腾测试,发现果然好用!下面分享一下具体做法。
①、编译 Nginx
如果你之前已经实操了过张戈博客分享的 Nginx 缓存教程,相信这一步就可以忽略。
Nginx 反向代理缓存需要集成 ngx_cache_purge 模块,如果没有,则需要重新编译 Nginx,具体做法请参考张戈博客之前分享的文章:
《为网站开启 Nginx 缓存加速,支持 html 伪静态页面》之代理模式,新增该缓存模块,并在 http 上下文模块中添加 proxy 缓存规则,比如:
123456789 proxy_connect_timeout 5;proxy_read_timeout 60;proxy_send_timeout 5;proxy_buffer_size 16k;proxy_buffers 4 64k;proxy_busy_buffers_size 128k;proxy_temp_file_write_size 128k;proxy_cache_path /tmp/cache/proxy_cache levels=1:2 keys_zone=cache_one:200m inactive=30d max_size=5g;proxy_temp_path /tmp/cache/proxy_cache/temp;
②、Nginx 配置
在网站现有规则中加入如下规则,反向代理 gavatar 并缓存到本地:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
location /avatar { proxy_pass http://cn.gravatar.com; proxy_redirect off; proxy_set_header Host cn.gravatar.com; proxy_cache cache_one; proxy_cache_valid 200 302 304 365d; proxy_cache_valid 301 1d; proxy_cache_valid any 1m; add_header Images-Cache "$upstream_cache_status from $host"; add_header Pragma public; add_header Cache-Control "public, must-revalidate, proxy-revalidate"; access_log off; log_not_found off; expires max; } |
③、PHP 代码
在主题目录下的 functions.php 中插入如下代码:
1 2 3 4 5 6 |
//更改gavatar来源 function mytheme_get_avatar($avatar) { $avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com"),"zhangge.net",$avatar); //请修改为自己的首页域名 return $avatar; } add_filter( 'get_avatar', 'mytheme_get_avatar', 10, 3 ); |
即可将 WordPress 头像地址更改成自己的域名,因为头像地址二级目录字段是/avatar/,所以会匹配到我们在上一步 Nginx 新增的反向代理规则,从而从 cn.gravatar.com 拉取头像并缓存到服务器本地。
很明显这个方法支持各种建站程序(需要修改网站代码),比 PHP 代码或插件的逼格、效率都更高!而且还不会出现外部 url 地址了!
四、折腾拓展
上一篇文章,张戈博客分享了目前在用的优化方案,里面有一条是建议静态资源使用二级域名,并拒绝 cookies 的写入。所以本文还能继续拓展折腾一下:将头像地址改成二级域名。比如右键查看张戈博客评论头像,可以发现已经变成 res.zhangge.net 了。其实就是新增一个 res.zhangge.net 的 server 模块而已,非常简单,感兴趣的朋友可以自己折腾一下,本文就不多做说明了。
2015年06月19日 下午4:49
很全面,一站式解决,不错!
2015年06月21日 上午9:59
为什么每次来了都需要输入用户信息,有没有吧案发解决一下?
2015年06月21日 上午10:05
你自己的问题,我博客js记录信息用了一年多了。要不就是浏览器禁止了cookies记忆,要不就不是同一个环境。
2015年06月21日 上午11:09
哦哦,那估计是
2015年06月21日 下午3:53
Nginx反代的方法不错,学习了。
2015年06月23日 下午2:13
张戈,请问一下为什么我网站的文章分享到微信朋友圈后会被转码,你的为什么不会?
2015年06月30日 下午1:30
我还没分享过微信,没见过这个问题。
2015年06月23日 下午6:22
很全面,一站式解决,不错
2015年06月25日 上午12:38
我用的是新浪的sae做的WordPress,就是延迟很高
2015年06月30日 上午11:54
我现在用的是第一种,不过这个文件夹是放在主题里面比较方便
2015年06月30日 下午1:30
嗯,第一种简单易用。
2015年07月03日 上午11:38
用了第一个方法,超级棒。谢谢
2015年07月03日 上午11:39
识别浏览器用的那个插件,还是纯代码
2015年07月08日 上午1:42
我比较喜欢第一种方案!简单实用!
2015年07月21日 下午4:20
nginx反向代理,我服务器国内的反代cn.gxxx的
2015年09月06日 下午4:30
这两天多说好像是不能外链了,折腾来折腾去,发现:Gravatar 除了给中国版,直接替换成 cn.gravatar.com 就很好用了。。。
请问张戈,像咱们的头像源码部分如下:
第一个SRC 是我们看到的头像,第二个 srcset 一般是用不到的,该如何修改才能去掉第二个呢?
2015年09月06日 下午4:31
评论系统把 代码过滤掉了。。。
2015年12月16日 上午9:13
试下这个····
2016年05月27日 下午4:33
大神 你好!
请问你的域名:res.zhangge.net是直接绑定在zhangge.net上的,还是使用七牛云镜像或者使用的res.zhangge.net反代的zhangge.net
2016年05月27日 下午9:13
前者
2016年05月28日 上午7:26
按照http://zhangge.net/5042.html开启了缓存,也配置了多站点,但是搞反代的时候报错,去处 proxy_cache cache_web2;就可以,这样是不是就不缓存,怎么解决啊大神,谢谢! 面前a使用了很多大神博客的技术在网站上十分感谢
2016年05月28日 下午2:47
将站点配置文件打包发到我邮箱 ge#zhangge.net 看看
#换成@
2016年07月16日 下午12:11
张哥,proxy_pass地址能带参数吗?
2016年12月09日 上午8:55
学习了,谢谢分享。
2017年08月22日 上午8:50
gravatar头像昨天提交,在别人网站评论不显示头像,网上查说是需要时间缓存,我看博主的这个网站显示出来了,不知道是什么原因。
2017年10月22日 上午9:56
请问博主,如何缓存国内第三登陆(微信 微博 QQ)头像到本地呢。我的网站有用第三方登录,可以获取用户头像,但是用了是一种方法后,这些头像就不存在了 只出现了代码 网址 laowei8.co m