自从“多说”关闭，许多独立博主都在寻找其代替方案，这时，Valine横空出世。

引言

我使用Valine作为Hexo的评论系统。Valine是一款基于LeanCloud的评论系统，无需自建后端。LeanCloud则是一家提供数据存储服务的网站，类似Google的Firebase。

Valine有以下特点：

• 可以方便导入来自Disqus的评论数据

• 配置简单，仅需加入一些JavaScript代码

• 无需自建后端

• 加载快速，使用国内后端云服务提供商LeanCloud提供的存储服务

• 小巧玲珑，核心文件仅几十Kb大小

• 开源项目，可自定义程度高

• 支持邮件通知

• 支持安全验证码

• Markdown语法支持

• 支持多级回复

  ……

相关资料：

• GitHub上的Valine
• Valine使用文档
• LeanCloud官网

使用

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数据表中也会有评论数据。

快去试试吧！