自从“多说”关闭，许多独立博主都在寻找其代替方案，这时，Valine横空出世。
引言
我使用Valine作为Hexo的评论系统。Valine是一款基于LeanCloud的评论系统，无需自建后端。LeanCloud则是一家提供数据存储服务的网站，类似Google的Firebase。
Valine有以下特点：
-
可以方便导入来自Disqus的评论数据
-
配置简单，仅需加入一些JavaScript代码
-
无需自建后端
-
加载快速，使用国内后端云服务提供商LeanCloud提供的存储服务
-
小巧玲珑，核心文件仅几十Kb大小
-
开源项目，可自定义程度高
-
支持邮件通知
-
支持安全验证码
-
Markdown语法支持
-
支持多级回复
……
相关资料：
使用
LeanCloud
在使用Valine之前，我们首先需要注册一个LeanCloud账户，并创建一个App。由于一般个人博主的评论并不会太多，因此我们选择免费的“开发版”应用就可以了。创建好作为存储评论的应用数据库之后，记录好给出的App ID和App Key即可（你的应用->设置->应用Key）。需要注意的是，必须先将用于Valine的网站域名加入“安全域名”中（你的应用->设置->安全中心），否则之后的Valine评论框将无法使用。
Valine
以Hexo中使用为例，我的环境是：
- Hexo 静态博客
- Daily 主题（使用
ejs模板引擎渲染） - Valine@1.3.3（目前最新）
修改Hexo配置文件
在配置文件_config.yml中加入以下变量：
valine:
enable: true # Valine 启用状态
app_id: gw*****************************sz
app_key: xf********************6P
placeholder: ヾﾉ≧∀≦)o来啊，快活啊！ # 占位显示内容
pageSize: 10 # 每次显示的评论数量
当然，你也可以改成其他变量名，这只在下面生成评论框对象的时候会用到。
修改主题的评论模板
我使用的主题是Daily，模板引擎是ejs，其它主题大同小异，稍微研究一下就明白了。
例如Daily的评论模板是./themes/Daily/layout/_partial/comments.ejs，内容是：
<% if (page.comments){ %>
<section id="comment">
<!-- <h1 class="title"><%= __('comment') %></h1> -->
<% if(config.disqus_shortname) { %>
<div id="disqus_thread">
<script type="text/javascript">
var disqus_config = function () {
this.page.url = window.location.href;
this.page.identifier = '<%= page.layout %>-<%= page.slug %>';
this.page.title = '<%= page.title %>';
};
</script>
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<% } else if (config.duoshuo_shortname) { %>
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%= page.layout %>-<%= page.slug %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div>
<!-- 多说评论框 end -->
<% } %>
</section>
<% } %>
我们在下面加上Valine的代码：
<% if (page.comments){ %>
<section id="comment">
<!-- <h1 class="title"><%= __('comment') %></h1> -->
<% if(config.disqus_shortname) { %>
<!-- Disqus 评论框 start -->
<div id="disqus_thread">
<script type="text/javascript">
var disqus_config = function () {
this.page.url = window.location.href;
this.page.identifier = '<%= page.layout %>-<%= page.slug %>';
this.page.title = '<%= page.title %>';
};
</script>
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
<!-- Disqus 评论框 end -->
<% } else if (config.valine.enable) { %>
<!-- Valine 评论框 start -->
<!-- LeanCloud 操作库 -->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!-- Valine 核心代码库 -->
<script src="//unpkg.com/valine@latest/dist/Valine.min.js"></script>
<div class="valine_thread"></div>
<script>
new Valine({
el: '.valine_thread',
app_id: '<%= config.valine.app_id %>',
app_key: '<%= config.valine.app_key %>',
placeholder: '<%= config.valine.placeholder %>',
pageSize:'<%= config.valine.pageSize %>'
});
</script>
<!-- Valine 评论框 end -->
<% } %>
</section>
<% } %>
注意：
- 由于多说已经无法使用，故所有相关代码已删除
- 如果在上一步你和我使用了相同的变量名称，则可以直接复制Valine部分代码，否则请修改Valine对象的配置项
- 更多的配置项可以在Valine使用文档中查看，可以实现邮件通知、安全验证、浏览计数等功能
- 我使用的是CDN提供的LeanCloud操作库和Valine核心代码，你也可以下载后放在想要的位置上
收工了！
如果不出意外，这个时候已经可以使用Valine评论框了，LeanCloud相关应用的Comment数据表中也会有评论数据。
快去试试吧！
网友评论