为你的Hexo博客添加Valine评论系统

我为什么要换评论系统

---

经常访问的童鞋应该知道，虽然你们没有怎么留言过，但是也有看到。原来使用的评论系统是来必力，这是一套韩国开发的评论系统，缺点是加载比较慢，但是我忍了。

可是最近我又发现，来必力登录系统又有点毛病，这我就忍不了了，想着换评论系统。

Hexo支持的评论系统不多，也就那么几个：

• 多说
• 网易云跟帖
• 畅言（需要备案）
• 来必力（LiveRe）（加载慢，登录出问题）
• Disqus（需要翻墙）
• Hypercomments（加载慢）
• valine（最优）

所以Valine就是我的最佳选项，其实本来我使用的主题已经集成了Valine评论系统，但是不管用，代码出错，我反馈无望（可能是开发者太忙吧），只好逼上梁山，硬着头皮自己搞。

---

Valine有什么优点

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

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

Valine的特点：

• 无后端实现
• 高速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
• 开源，自定义程度高
• 支持邮件通知
• 支持验证码
• 支持 Markdown

---

评论系统部署

评论系统安装其实挺简单的。

注册Leancloud

我们的评论系统其实是放在Leancloud上的，因此首先需要去注册一个账号

Leancloud官网，点我注册

注册完以后需要创建一个应用，名字可以随便起，然后 进入应用->设置->应用key

获取你的appid 和 appkey 如图所示：

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

修改主题模板

我去网上找了很多教程，但是主要是Next主题的，我使用的不是Next主题，而且我这主题（Hiero）的layout文件是”.ejs”，而其他主题的基本是”.swig”。语法有些许区别，这就有点儿难搞了。

1. 修改主题的_config.yml
   这里面主要是主题一些默认配置。

   valine:
     enable: true
     app_id: 你的appid
     app_key: 你的appkey
     notify: false   #邮件提醒设置
     verify: false   #验证码设置
     placeholder: ヾﾉ≧∀≦)o快来评论一下吧!
     avatar: monsterid  #头像设置
     pageSize: 10
     visitor: true

2. 修改layout下面_partial里的comment.ejs

   else if (theme.valine.app_id && theme.valine.app_key) {%>
   		<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 src="//cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"></script>
       <script src='//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'></script>-->
   	<div id="vcomments"></div>
   	<script>
   		var notify = <%= theme.valine.notify %> == true ? true : false;
   		var verify = <%= theme.valine.verify %> == true ? true : false;
   		var visitor = <%= theme.valine.visitor %> == true ? true : false;
     new Valine({
         el: '#vcomments',
   				notify: notify,
   				verify: verify,
       	app_id: '<%= theme.valine.app_id %>',
         app_key: '<%= theme.valine.app_key %>',
   			lang: 'en',
   			placeholder: '<%= theme.valine.placeholder %>',
   			avatar: '<%= theme.valine.avatar %>',
   			pageSize: <%= theme.valine.pageSize %>,
   			visitor: visitor
           });
       </script>

3. 修改博客文章评论区article.ejs
   我使用的主题Hiero已经集成了Valine但是作者没有将代码处理好，导致我后续更改的时候出错，同时我提出issue作者可能由于太忙，很长时间没有修复。

   <% if (!index && post.comments && (theme.gentie_productKey || theme.duoshuo_shortname || theme.disqus_shortname || theme.uyan_uid || theme.wumii || theme.livere_shortname || theme.gitment.owner || theme.valine.enable)){ %>
           <%- partial('comment') %>
         <% } %>

这一步，我主要增加的是|| theme.valine.enable这段，对应的就是config里的enable是true还是false。

至此，我们就修改完了。上传上去，刷新网页就能够出现Valine评论框了。

---

修改Valine.min.js

Valine.min.js 你可以原版（<script src='//unpkg.com/valine/dist/Valine.min.js'></script>）或者自己修改上传到自己的服务器或主机，我也不是很懂，只做一丢丢修改，就不献丑了。

---

设置头像

1. 去Gravatar网址新建一个账号，输入邮箱、昵称和密码，收到激活邮件后激活账户，然后去前面的网址登录账号。

2. 在页面下方 Add a new image ，添加图片。

3. 在页面下方评论栏中的邮件（E-Mail）中添加上面注册的邮箱即可。

---

友情提示

博客今后如果无法访问，请自行挂代理。

下方可以留言评论，欢迎交流！