惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

aimingoo的专栏
aimingoo的专栏
博客园 - 三生石上(FineUI控件)
GbyAI
GbyAI
大猫的无限游戏
大猫的无限游戏
M
MIT News - Artificial intelligence
Microsoft Azure Blog
Microsoft Azure Blog
月光博客
月光博客
Engineering at Meta
Engineering at Meta
I
InfoQ
T
Tailwind CSS Blog
N
Netflix TechBlog - Medium
S
SegmentFault 最新的问题
H
Help Net Security
博客园 - 【当耐特】
WordPress大学
WordPress大学
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
美团技术团队
博客园 - 叶小钗
T
The Blog of Author Tim Ferriss
腾讯CDC
雷峰网
雷峰网
Martin Fowler
Martin Fowler
The GitHub Blog
The GitHub Blog
D
Docker

蚊子的前端博客

微说 | 有的人觉得只要不考XX,一定能考好!-蚊子的前端博客 微说 | 春天来了-蚊子的前端博客 明天和意外不知道哪个先来-蚊子的前端博客 微说 | 既然错过了路口,就及时止损,重新规划路线上路-蚊子的前端博客 微说 | 2025年的出生人口数是792万-蚊子的前端博客 微说 | 工作年终总结,让写对接的接口的数量?-蚊子的前端博客 微说 | 温家宝:没有政治体制改革的成功 经济体制改革不可能进行到底-蚊子的前端博客 微说 | 违法犯罪了该不该被禁言?-蚊子的前端博客 微说 | 不明白为什么在推荐去俄罗斯旅游-蚊子的前端博客 微说 | 易中天论骗子-蚊子的前端博客 微说 | 一场大风吹散了秋天-蚊子的前端博客 微说 | 既要、又要、还要、更要!-蚊子的前端博客 又是一年的国庆雨季-蚊子的前端博客 微说 | 预估下2025年的出生人口数据-蚊子的前端博客 微说 | 可惜了我那些小时候的书本-蚊子的前端博客 微说 | 牛马有的是,驴不够了!-蚊子的前端博客 微说 | 能否有一条非户口也能高考的路-蚊子的前端博客 微说 | 小聊中医-蚊子的前端博客 微说 | 将要制作的一款新产品-蚊子的前端博客 微说 | 做人要有信-蚊子的前端博客 微说 | 好一个正义联盟-蚊子的前端博客 微说 | 都是见过吃过的主儿-蚊子的前端博客 微说 | 追求8小时工作制有错吗?-蚊子的前端博客 微说 | 如果尖锐的批评完全消失-蚊子的前端博客 微说 | 很好!-蚊子的前端博客 微说 | 封禁用户可以,但要告知具体原因-蚊子的前端博客 微说 | 面朝大海,春暖花开-蚊子的前端博客 微说 | 程序员的悲哀是什么?-蚊子的前端博客 微说 | 2025年出生人口的预测-蚊子的前端博客 前端在 LiveKit 中如何获取所有的参与者-蚊子的前端博客
如何在博客的评论系统中使用随机头像-蚊子的前端博客
author · 2020-03-10 · via 蚊子的前端博客

我的博客评论系统经过重写后,不再使用微博、GitHub 等第三方系统的登录方式了。而是用户输入昵称和邮箱后,就可以进行评论。那么这样存在的一个问题就是头像如何获取呢?

之前使用微博、GitHub 等第三方授权登录后,可以获取到用户在授权系统里的头像。怎么设置头像呢?

  1. 提现设置好多个头像,用户注册评论时,随机选取一个作为用户的头像;
  2. 使用后台服务,根据邮箱的 hash 值,产生点的随机分布的图片。

我们应该也在某些论坛或者博客里,看到一些方块组成的头像,就是按照第 2 种方法实现的默认头像。

头像服务 #

这两种方案都是可以使用的,不过还有一个更简单的方案:使用gravatar系统里的头像,根据邮箱的 hash 值就能获取到头像了:

<img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=250" />

gravatar的头像-蚊子的博客

不过这个头像网站在国内访问比较慢,也就出现了很多代理的网站,我博客目前使用的是:https://gravatar.loli.net网站。

如果没有这个网站上注册过头像的话,那么获取到的就是默认头像。还没有注册的话,赶快注册一个吧:设置gravatar

设置随机头像 #

当评论中全是默认的话,也不好看。gravatar 也提供了一个参数,可以将默认头像转为其他的随机头像,这样既能有默认头像了,也能区分用户了。

gravatar的随机头像-蚊子的博客

  • s:尺寸,像素为单位
  • d:风格,目前可选 identicon、monsterid、wavatar、retro、robohash 等

我的博客里采用了monsterid的风格:

随机头像-蚊子的博客

<img src="https://gravatar.loli.net/avatar/90e5525c9ee1136883204aadda4e5b37?d=monsterid" />

各位可以评论下,然后看看自己是什么头像!