Hexo NexT 评论系统 Valine 的使用

---

评论系统 Valine 的使用

注明：以下方案是在 Valine 1.4.9 版本下完成，对于其他版本应该会根据实际情况修改参数，使用 F12 查看参数修改即可使用！（说明于 2020 - 04 - 25）

强烈推荐大佬们直接去看 cungudafa 对于 Valine 评论系统的优化，实在是棒，本人博客：EnjoyToShare 的评论系统也是根据这位大佬的文章阐述修改而来，在此对她表示感谢！

1 Valine 的介绍

一款快速、简洁且高效的无后端评论系统。

Valine 诞生于 2017 年 8 月 7 日，是一款基于 LeanCloud 的快速、简洁且高效的无后端评论系统。

理论上支持但不限于静态博客，目前已有 Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用 Valine。

Valine 特性

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

2 Valine 的使用

1 注册 LeanCloud

2 创建 Valine 应用，名称任意，例如 Valine-Admin

3 进入对应的应用，点击 设置 -> 应用 Keys，获取 AppID 和 AppKey

4 在 Hexo 博客主题配置文件 next/_config.yml 中进行配置，大家也可根据自己来设置该评论设置。

valine:
  enable: true # 设置为true，默认为false
  appid:  # 将应用key的App ID设置在这里
  appkey: # 将应用key的App Key设置在这里
  notify: false# 邮箱通知 , https://github.com/xCss/Valine/wiki，默认为false
  verify: false# 验证码 默认为false
  placeholder: Just go go ^_^ # 初始化评论显示，根据自己修改，这里默认，
  avatar: monsterid # 头像风格，默认为mm，可进入网址：https://valine.js.org/visitor.html查看头像设置，这里有许多头像风格，进行设置
  guest_info: nick,mail,link # 自定义评论标题
  pageSize: 10 # 分页大小，10页就自动分页
  visitor: true # 是否允许游客评论 ，进入官网查看设置：https://valine.js.org/visitor.html

了解更多 Valine 配置参数信息请参考：Valine 官方文档

3 Valine 的配置

1 查看评论

点击 存储 -> 结构化数据，选择 创建 Class，名称 Comment，其他保持默认，以后就可在此 Class 内查看

注：选择 Valine 评论系统是因为支持国内网络，不需要连接外网（翻墙）就可以进行显示评论系统，而且很好管理，页面简单

2 文章阅读量统计

点击 存储 -> 结构化数据，选择创建 Class，名称 Counter，其他保持默认，以后就可在此 Class 内查看

4 Valine 的优化

4.1 去除 Valine的 Powered By

我喜欢简洁一点，所以想去掉这个提示。查看 Elements 可以看到这个 div，那么我只要移除这个 div 下的所有子节点，就可以去掉这个 Powered By 了。

但是怎么改呢？

使用 F12，按 ctrl + shift + c，鼠标放到 Powered By 的地方，点击一下，看到如下图：

这个 div 里的就是要修改的，打开 themes/next/source/css/_custom/custom.styl 文件，添加以下内容：

// 隐藏 valine 的 powered by
.vcopy.txt-right {
   
   
  display: none;
}

效果：

4.2 邮件通知功能

4.2.1 原邮箱模板通知功能

登录 leadcloud 后台，在应用的设置->邮件模板->邮件主题（修改主题名称和内容，保存）

修改邮件主题：你在{ {appname}}的评论收到了新的评论

内容如下：（链接为你的博客主页链接）

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

点击 “保存” 按钮

并且修改主题配置文件：改成 true

邮件回复功能

登录 leadcloud 后台，在应用的设置->邮件模板->邮件主题（修改主题名称和内容，保存）

修改邮件主题：你在{ {appname}}的评论收到了新的评论

内容如下：（链接为你的博客主页链接）

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

点击 “保存” 按钮

并且修改主题配置文件：改成 true

不是很 nice！下面给出一个加强 plus 版