Hexo: 添加Valine评论(邮件通知、评论列表头像)

Hexo 博客和 Valine 模块部署有好几个月了,Valine 模块部署本身并不复杂,但部署后发现头像无法显示设置的图像,这个问题困扰了至少1个月,今天请教高手终于解决了这个问题,是时候好好总结下 Valine 模块的部署历程了。

之所以选择 Valine 模块,一方面因为 Valine 评论模块延续了Hexo模板简洁的风格,两者匹配得可谓天衣无缝,另一方面国内可选的评论模块有些已经不再支持,有些模块的UI各人不太喜欢。

关于 Valine 模块

Valine 诞生于2017年8月7日,是一款基于 Leancloud 的快速、简洁且高效的无后端评论系统,支持但不限于静态博客。

具有以下特性:

  • 快速
  • 安全
  • Emoji
  • 无后端实现
  • MarkDown 全语法支持
  • 轻量易用(~15kb gzipped)
  • 文章阅读量统计 v1.2.0+

Valine 部署

Valine 是基于 leancloud的评论模块,评论数据都存储在 Leancloud 平台,因此需要先在 leancloud 申请帐号。

申请 Leancloud 帐号

申请 Leancloud 步骤比较简单,首先进行 Leancloud 控制台创建应用(个人使用开发版),之后获取应用的 App ID 和 App Key,后面配置博客的主题配置文件会用到。

配置安全域名

登录leancloud控制台,选择 设置 -> 安全中心 -> Web 安全域名,这里设置成博客的域名地址和本地地址即可,如图:

配置主题配置文件

修改博客主题配置文件 /d/hexo/themes/next/_config.yml,配置 Valine 的 enable、appid、appkey 参数,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: your leancloud app id
appkey: your leancloud app key
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 留言 # comment box placeholder
avatar: # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

以上的 appid和appkey为本文开始在Leancloud创建应用的 App ID 和 App Key。

评论模块验证

之后访问博客,可以看到如下评论模块:

并且可以留言评论了,以上就是 Valine 模块的基本部署过程。

开启 Valine 评论邮件通知

以上使用 Valine 模块实现了最基本的评论功能,但功能还需要完善,例如评论邮件通知、评论管理等功能,正好 Valine Admin 可以满足需求,Valine Admin 是Valine评论模块的扩展和增强。

这块内容主要参考 valine-admin-document

云引擎”一键”部署

在Leancloud云引擎设置界面,填写代码库并保存:https://github.com/DesertsP/Valine-Admin.git,如图:

设置 Web 二级域名

Valine Admin 同时提供评论WEB管理后台,能方便的管理评论,例如标记为垃圾评论或删除评论。

在云引擎设置页面,设置Web二级域名,如下

二级域名用于评论后台管理,这里设置为 https://postgres.leanapp.cn

之后访问出现登录界面,如图:

用户名为leancloud的登录邮箱, 密码设置如下:

点请示重置后Leancloud会给你发一封密码重置的邮件,这里设置的密码为评论管理WEB后台的密码。之前不知道密码存储在云引擎的user对象里,多亏了博採眾長的指导。

设置环境变量

设置环境变量,如下图:

以上参数需正确配置,我的参数配置如下:

配置完参数后,之后切换到云引擎页面点部署。

验证评论邮件通知功能

假设我为博主且游客评论时填写了邮箱,以下场景能收到博客评论通知邮件:

1、用博主的帐号评论时,博主能收到通知邮件。
2、游客评论后,博主能收到通知邮件。
3、博主回复游客,游客能收到通知邮件。

Valine 头像设置

Valine 部署完成后使用了默认图像,查阅 Valine官网后,了解到 Valine 使用的是 Gravatar作为评论列表头像,评论时提供 Gravatar 注册的邮箱即可显示设置的头像。之后我在 Gravatar 修改头像一直没生效(gravatar.cat.net 有七天的缓存),评论列表头像没生效问题折腾了一个月左右,早已超出了7天的缓存期,后来咨询了一位高手终于解决,这里记录下。

评论头像没有刷新的原因为:Valine 默认用的是第三方CDN,第一次请求的时候缓存源站的头像,当再请求的时候就不需要返回源站请求,可能这个第三方CDN缓存刷新时有问题导致有些用户刷新成功,有些用户没有刷新,可以通过更换其它CDN解决,这里设置成 Gravatar 的CDN。

avatar 参数

Valine 的 avatar 参数用来设置评论头像,avatar 参数可选值如下:

我这里将 avatar 设置成空,表示使用的是默认的评论图像。

Gravatar 设置

登录 gravatar,注册账号并设置头像,我的设置如下:

Next 主题设置

主题配置文件增加 avatar_cdn 参数,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: UK8DCa4kSCj0Th48U4nGPxrO-gzGzoHsz
appkey: gxPalmYtqejoIqRUifA1Lqg6
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 留言 # comment box placeholder
avatar: # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size
avatar_cdn: https://www.gravatar.com/avatar/

目前Valine的版本不支持 avatar_cdn 参数,这里手工加一个并设置成Gravatar的CDN。

之后修改Valine模板文件 /d/hexo/themes/next/layout/_third-party/comments/valine.swig,增加 avatar_cnd这行代码,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% if theme.valine.enable and theme.valine.appid and theme.valine.appkey %}
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

<script type="text/javascript">
var GUEST = ['nick','mail','link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(item=>{
return GUEST.indexOf(item)>-1;
});
new Valine({
el: '#comments' ,
verify: {{ theme.valine.verify }},
notify: {{ theme.valine.notify }},
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
placeholder: '{{ theme.valine.placeholder }}',
avatar:'{{ theme.valine.avatar }}',
guest_info:guest,
pageSize:'{{ theme.valine.pageSize }}' || 10,
avatar_cdn:'{{ theme.valine.avatar_cdn }}',
});
</script>
{% endif %}

评论头像终于刷新来了,如下图:

参考

最后推荐和张文升共同编写的《PostgreSQL实战》,本书基于PostgreSQL 10 编写,共18章,重点介绍SQL高级特性、并行查询、分区表、物理复制、逻辑复制、备份恢复、高可用、性能优化、PostGIS等,涵盖大量实战用例!

购买链接:https://item.jd.com/12405774.html

PostgreSQL实战
感谢支持!
0%