使用 LetterAvatar 脚本生成首字图片替代默认评论头像

2020年5月13日18:05:54 评论 34

Gravatar 是全球通用头像,如果我们没有设置 Gravatar 头像,那么在网站上留言或评论就会显示默认的头像或者随机头像,这样的话用户体验不是很好。今天为大家分享一下使用 LetterAvatar 脚本自动生成首字图片代替默认头像的方法。

使用方法

LetterAvatar 脚本是通过读取 ALT 属性来自动生成图片的,所以基本思想是:首先给图片添加 ALT 属性,然后判断有无 Gravatar 头像,有的话显示 Gravatar 头像,没有的话显示 LetterAvatar 脚本生成的首字图片头像(比如昵称的第一个字符)。

1、头像添加ALT属性

查看WP官网 get_avatar 默认的可选参数:

其中:$alt 就是 alt 可选参数。

打开主题评论模板,找到类似这句:

替换为:

将评论者名称作为 ALT 属性。

2、判断有无头像

如果没有使用 Gravatar,则给头像 img 标签添加一个 class 属性,比如 letter,示例代码(部分)如下:

因为大部分网站使用了缓存,所以需要同时修改缓存文件中的代码。

3、渲染首字头像

通过 LetterAvatar 脚本渲染首字头像,LetterAvatar 是一个开原项目,将示例中的 JS 脚本添加到你的网站。

示例代码:展开

其中,需要修改一个地方,将:

修改为:

即根据 img 标签查找改为根据 class 查找。

结束语

如果你的网站还在使用默认头像的话,不妨尝试一下这个方法。本文是以 wordpress 为例来说明的,如果网站是用其他程序搭建的,大家可以自行修改一下代码,其实现原理是一样的。如果有任何意见或建议,欢迎在下方评论处留言。

weinxin
关于本站
本站是一个分享建站经验、网站优化以及互联网技巧的个人博客。
  • 版权声明: 发表于 2020年5月13日18:05:54
  • 转载注明:https://www.pieruo.com/21089.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: