Hexo 为Next主题添加评论功能

1. 添加评论功能

之前使用的来必力,最近评论功能一直出不来,用户体验比较差,所以重新评估选择了Valine

1.1 创建账号

这个评论系统是基于 LeanCloud 进行的,先去注册一个账号,点这里进行注册。

点这里创建应用,应用名看个人喜好。选择刚刚创建的应用,点击设置按钮,再点击应用Key按钮,你就能看到你的APP IDAPP KEY了:

为了您的数据安全,请填写应用>设置>安全设置中的Web 安全域名,如下图:

1.2 配置

修改你主题目录下的_config.yml文件:

valine:
enable: true
appid: # 你的 App ID
appkey: # 你的 App Key
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 有什么问题,欢迎留言指正与交流... # comment box placeholder
avatar: robohash # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

发布之后,我们看一下效果如何:

在进行评论之后,我们可以从后台看一下我们的评论数据:

这样我们就可以管理我们的评论数据了。

2. 设置评论头像

目前默认头像有以下7种默认值可选:

下面我们换一种头像展现,在NexT主题中,进行如下修改,把我们的默认头像修改为一种具有不同颜色、面部等的机器人:

avatar: robohash # gravatar style

如果想自定义我们的头像,我们可以在点击进行创建用户,并上传自己的头像:

经过一定时间的数据全球化同步,头像会根据你设置的 E-mail 进行匹配:

如果想显示我们上传的头像,在进行评论时一定要留下设置的 E-mail 账号,否则会显示默认头像。

3. 邮件提醒

进入Leancloud>选择你的评论所存放的应用>设置>邮件模板,按下图设置好用于重置密码的邮件主题>然后保存:

请注意修改链接为你的博客或者网站首页。

<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复,请点击查看:
</p>
<p><a href="你的网址首页链接" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

这还需要修改你主题目录下的_config.yml文件,开启邮件提醒与验证码功能:

valine:
enable: true
appid: # 你的 App ID
appkey: # 你的 App Key
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: true # Verification code
placeholder: 有什么问题,欢迎留言指正与交流... # comment box placeholder
avatar: robohash # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

注意事项:

  • 发送次数过多,可能会暂时被Leancloud 屏蔽邮件发送功能
  • 由于邮件提醒功能使用的Leancloud的密码重置邮件提醒,只能传递昵称、邮箱两个属性,所以邮件提醒链接无法直达指定文章页。请悉知。
  • 开启邮件提醒会默认开启验证码选项。
  • 该功能目前还在测试阶段,谨慎使用。
  • 目前邮件提醒正处于测试阶段,仅在子级对存在邮件地址的父级发表评论时发送邮件

4. 增强版邮件提醒

4.1 快速开始

首先需要确保 Valine 的基础功能是正常的,参考 Valine Docs。然后进入 Leancloud 对应的 Valine 应用中。点击 云引擎 -> 设置 填写代码库并保存:https://github.com/panjunwen/Valine-Admin.git

切换到部署标签页,分支使用 master,点击部署即可:

4.2 配置项

此外,你需要设置云引擎的环境变量以提供必要的信息,点击云引擎的设置页,设置如下信息:

下面介绍一下各个参数:

变量 示例 说明
SITE_NAME SmartSi 博客名称
SITE_URL https://smartsi.club 首页地址
SMTP_HOST smtp.qq.com SMTP服务器地址
SMTP_PORT 465 SMTP端口
SMTP_USER xxx@qq.com SMTP登录用户
SMTP_PASS xxx SMTP登录密码,一般为授权码(QQ邮箱为授权码)
SENDER_NAME SmartSi 发件人
SENDER_EMAIL xxxxxx@qq.com 发件邮箱
BLOGGER_EMAIL xxxxx@qq.com 博主通知收件地址
MAIL_SUBJECT ${SITE_NAME}上有新回复了 @通知邮件主题模板
MAIL_TEMPLATE 见下文 @通知邮件内容模板
MAIL_SUBJECT_ADMIN ${SITE_NAME}上有新评论了 博主邮件通知主题模板
MAIL_TEMPLATE_ADMIN 见下文 博主邮件通知内容模板
ADMIN_URL https://xxx.leanapp.cn/ Web主机二级域名,用于自动唤醒

以上参数请务必全部设置,方能保证通知邮件正确发送。可以自定义邮件通知模板,也可以直接复制我的默认模板。

默认被@通知邮件内容模板如下:

<span style="font-size:16px;color:#212121">Hi,${PARENT_NICK}</span><p>${NICK}在${SITE_NAME}上@了你,内容如下:</p><p>${COMMENT}</p><br><p>原评论内容为:${PARENT_COMMENT}</p><p> <a href="${POST_URL}">点击前往查看</a><br><p><a href="${SITE_URL}">${SITE_NAME}</a>欢迎你的再度光临</p>

其中可用变量如下(注,这是邮件模板变量,请勿与云引擎环境变量混淆):
变量|说明
—|—
SITE_NAME|博客名称
SITE_URL|博客首页地址
POST_URL|文章地址(完整路径)
PARENT_NICK|收件人昵称(被@者,父级评论人)
PARENT_COMMENT|父级评论内容
NICK|新评论者昵称
COMMENT|新评论内容

默认博主通知邮件内容模板如下:

<p>${NICK}在${SITE_NAME}上给你留下新评论了,内容如下:</p> ${COMMENT} <br><p><a href="${POST_URL}">点击前往查看</a>

其中,PARENT_NICKPARENT_COMMENT 变量不再可用,其他与@通知一致。

4.3 LeanCloud 休眠策略

LeanCloud 为所有用户提供免费的体验实例,体验实例有 每天6小时的强制休眠时间。30 分钟内没有外部请求,则休眠。休眠后如果有新的外部请求实例会马上启动(但激活时发送邮件会失败)。点击查看详情

我的做法是在 VPS 上添加一个定时任务,每天6:00 ~ 23:00每20分钟访问一次我的LeanCloud网址,防止云引擎进入休眠,保证通知邮件的及时发送。cron定时任务:

*/20 6-23 * * * curl https://smartsi.leanapp.cn

4.4 Web评论管理

此项目还为 Valine 提供了更方便的评论管理功能,可以在 web 端对评论进行查看与删除操作。配置方式如下。

后台登录需要账号密码,需要在这里设置,只需要填写 emailpasswordusername,这三个字段即可, 使用 email 作为账号登陆即可。(为了安全考虑,此 email 必须为配置中的 SMTP_USERTO_EMAIL, 否则不允许登录):

上述完成之后,可以点击,根据上面设置的账号与密码登录评论后台管理:

资料:

赏几毛白!