使用 Valine 作为静态博客的评论系统

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

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

Valine 有以下特点：

可以方便导入来自 Disqus 的评论数据
配置简单，仅需加入一些 JavaScript 代码
无需自建后端
加载快速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
小巧玲珑，核心文件仅几十 KB 大小
开源项目，可自定义程度高
支持邮件通知
支持安全验证码
Markdown 语法支持
支持多级回复
……

更多相关资料：

LeanCloud 设置

在使用 Valine 之前，我们首先需要注册一个 LeanCloud 账户，并创建一个 App。由于一般个人博主的评论并不会太多，因此我们选择免费的“开发版”应用就可以了。创建好作为存储评论的应用数据库之后，记录好给出的 App ID 和 App Key 即可（你的应用 -> 设置 -> 应用 Keys）。需要注意的是，必须先将用于 Valine 的网站域名加入“安全域名”中（你的应用 -> 设置 -> 安全中心），否则之后的 Valine 评论框将无法使用。

Valine 配置

以 Hexo 中使用为例，我的环境是：

Hexo 静态博客
~~Daily 主题~~ 现已更换成 vexo（使用 ejs 模板引擎渲染）
Valine 1.3.10（目前最新）

修改 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="//cdn.jsdelivr.net/npm/[email protected]/dist/av-min.js"></script>
    <!-- Valine 核心代码库 -->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/Valine.min.js"></script>
    <div class="vcomment"></div>
    <script>
      new Valine({
        el: '#vcomment',
        appId: '<%= theme.valine.app_id %>',
        appKey: '<%= theme.valine.app_key %>',
        placeholder: '<%= theme.valine.placeholder %>',
        avatar: 'retro',
        pageSize: '<%= theme.valine.pageSize %>',
        recordIP: true
      });
    </script>
    <!-- Valine 评论框 end -->
  <% } %>
</section>
<% } %>

注意：

由于多说已经无法使用，故所有相关代码已删除
如果在上一步你和我使用了相同的变量名称，则可以直接复制 Valine 部分代码，否则请修改 Valine 对象的配置项
更多的配置项可以在 Valine 使用文档中查看，可以实现邮件通知、安全验证、浏览计数等功能
我使用的是 CDN 提供的 LeanCloud 操作库和 Valine 核心代码，你也可以下载后放在想要的位置上

测试使用

如果不出意外，这个时候已经可以使用 Valine 评论框了，LeanCloud 相关应用的 Comment 数据表中也会有评论数据。

本文由 imbytecat 创作，采用知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: May 9, 2020 at 09:24 pm