全球通用头像Gravatar使用教程

Globally Recognized Avatar,翻译成中文叫“全球通用头像”。

Gravatar的起源是国外的独立WordPress博客(当然现在已和WordPress彻底打通),当访客到任何一个支持Gravatar的网站留言时,此网站会根据你留言时填写的Email地址显示你匹配的头像,头像是保存在Gravatar服务器上的,所以你需要到Gravatar的网站注册并上传你的头像。如果没有注册你相应的Email及上传头像,那么你访问的网站就会显示一个默认的头像。

现在国内外大部分的博客类网站都已经支持Gravatar服务了,你可以通过Gravatar头像打造你自己的标志了。每个Email地址对应一个头像,所以如果你想换头像换马甲,那么直接修改留言时的名字和Email地址就可以了!

使用Gravatar完全免费,不过由于不可描述的原因,Gravatar在国内访问并不是十分稳定,有些时候你可能需要一个梯子才能访问到。

Gravatar服务的使用方法:

  • 进入Gravatar网站(网址https://en.gravatar.com),点击页面中的Create Your Own Gravatar按钮,跳转到注册页面,输入你的Email、用户名(并不太重要)、登录密码(以后修改头像要用)。其间有些要求,比如邮箱地址如果注册过了会红字提示,用户名只能是4个字符以上的小写字母否则红字提示等等,注意修改符合要求即可。点击Sign Up按钮,接下来的页面中如果出现We sent you a confirmation email!这些字样,那就说明你的提交有效。

  • 进入你的邮箱,查收Activate XXX的邮件,点击邮件中的Activate Account链接,跳出的页面显示Your WordPress.com account has been activated!表明你的账号注册成功并激活了。

  • 点击页面中的登录按钮,或者重新打开Gravatar网站点击右上角的Sign In按钮,接下来用你刚才注册的Email地址和密码登录,然后点击Add a new image链接,然后就通过上传图片(Upload new)或者使用在线图片(From url)等功能来设置与你Email地址绑定的头像了。

  • 上传完图片,会有页面让你裁剪你的图片,即设置头像显示哪一部分,拖动框体即可。

  • 之后的页面是让你选择你图片的评级(这个在国外比较规范),因为有的朋友可能喜欢使用比较少儿不宜的图片,会影响小朋友的身心健康的。如果你的图片是比较一般的,就不用选择R/X之类的评级,直接选择G评级(通用型),这样大多数网站就可以显示你的头像。否则比如如果你选择了最高级X级,但某网站设置之显示R级以下的,那么你的头像就无法在该网站上显示出来。

  • 可能需要站方短暂审核一下,一般如果选择评级G,而你的图片没什么特别的,很快就会通过。遇上慢的情况一般也就十分钟左右。

完成了以上的步骤后,在其他支持Gravatar的网站上留言或评论时,输入你的这个Email地址,那么网站上就能显示你的头像了,再也不是万年不变的默认头像了。

如果已经设置过的头像需要修改,那么还是登录Gravatar网站,用你的Email和密码登录,即可重新上传和修改头像。

下图为我的头像

看不到是因为有墙,找个梯子

网站中使用gravatar生成的头像

avatar代表您在线的图像,当你与网站互动时,你的名字旁边会出现一张图片。

Gravatar是一个全球通用的头像。你只需上传一次并创建自己的个人资料,然后当你加入任何支持Gravatar的网站时,你的Gravatar图片会自动显示

使用方法

  • 在gravatar网站上上传图片,生成自己的头像

  • 填写个人资料,这样在登录支持gravatar的网站时,就会显示个人信息,当然也可以不填写

开发使用说明

gravatar依赖邮箱生成的哈希值作为图片地址的一部分,所以需要把邮箱地址哈希化

邮箱地址哈希化总共由三个步骤:

  • 邮箱地址首尾去空白

  • 所有字母转变成小写字母

  • 哈希化

代码实现

const crypto = require('crypto');

function gravatar(mail) {
  let size = 100
  llet hash = Crypto.createHash('md5').update(mail.trim().toLowerCase()).digest("hex")
  return `http://www.gravatar.com/avatar/${hash}?s=${size}&d=identicon`;
}

let url = gravatar('zxhyJack@126.com')
console.log(url)

上面的代码可以生成头像的地址,直接访问就可以看到图像

  • s 是指图片的大小,默认是 80px × 80 px,图片大小的范围是1-1024px

  • d = identicon 可以随机生成一个图片,以后再次登录的时候就不会改变了

默认头像

如果图片的url地址只是http://www.gravatar.com/avatar/${hash},不加参数,显示的头像分两种情况

  • 一种是已经在gravatar网站上添加过对应邮箱的头像,访问这个url的时候则直接显示设置的图片

  • 另一种是没有添加过邮箱的头像,访问这个url时会显示默认的图片G

  • 如果没有给邮箱添加过头像,但是不想要默认的图片G,可以添加参数d=identicon,则可以随机生成头像,但是生成之后就不会再变了

posted on 2023-04-05 00:06  何苦->  阅读(1439)  评论(0编辑  收藏  举报

导航