修改 icarus 主题中采用  Valine 评论插件时用户头像显示成其他样式

修改 icarus 主题中采用 Valine 评论插件时用户头像显示成其他样式

当为 icarus 主题配置了 Valine 评论插件后,按照官方文档所说,当访客进行留言评论时,如果留下 Gravatar 中注册的 Email 地址时,则留言的用户头像显示为该 Email 对应的头像。其他用户则默认显示成 mp 神秘人(一个灰白头像),非常不美好。(且发现自己就算留下了 Email 地址,还是未能正确显示出来想要的 Gravatar 头像,很是奇怪。可能是头像还未生效,过几天再验证。)因此,需要将其修改为富有趣味的头像,且若访客的留言的 email 地址为同一个时,则不在随机赋予其他头像,而是采用第一次赋予的头像。这样也非常有利于快速分辨用户留言。

下面记录下自己将 mp 类型头像修改为 Gravatar 提供的其他类型头像的关键:

  1. 打开 themes\icarus\layout\comment文件夹中的valine.ejs文件,在其 js 脚本中添加一行读取 avatar 属性的语句。(注意,
    1
    2
    3
    4
    5
    6
    7
    8
    9
    new Valine({
    el: '#valine-thread' ,
    notify: <%= get_config('comment.notify') %>,
    verify: <%= get_config('comment.verify') %>,
    app_id: '<%= get_config('comment.app_id') %>',
    app_key: '<%= get_config('comment.app_key') %>',
    placeholder: '<%= get_config('comment.placeholder') %>',
    avatar: '<%= get_config('comment.avatar') %>'
    });
  2. 在 icarus 主题配置文件 _config.yml 中配置 comment 部分添加avatar 属性。
1
2
3
4
5
6
7
8
9
10
11
comment:
# Name of the comment plugin
#可选valine,disqus(科学上网)等
# Name of the comment plugin
type: valine
app_id: ************** # (必填) LeanCloud application id
app_key: ************** # (必填) LeanCloud application key
notify: false # (可选) 是否接收邮件通知
verify: false # (可选) 是否显示验证码
placeholder: ヾノ≧∀≦)o 来啊,说点什么! # (可选) 评论框占位符
avatar: monsterid

说明:

参数值 表现形式 备注
空字符串'' Gravatar官方图形 Gravatar官方图形
mp 神秘人(一个灰白头像) 神秘人(一个灰白头像)
identicon 抽象几何图形 抽象几何图形
monsterid 小怪物 小怪物
wavatar 用不同面孔和背景组合生成的头像 用不同面孔和背景组合生成的头像
retro 八位像素复古头像 八位像素复古头像
robohash 机器人 一种具有不同颜色、面部等的机器人
hide 不显示头像
  1. 至此就重新生成、发布即可。

原效果:

upload successful

最终效果:
upload successful

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×