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

in 技术 with 0 comment

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

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

Valine 有以下特点:

更多相关资料:

LeanCloud 设置

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

Valine 配置

以 Hexo 中使用为例,我的环境是:

修改 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/leancloud-storage@4.2.0/dist/av-min.js"></script>
    <!-- Valine 核心代码库 -->
    <script src="//cdn.jsdelivr.net/npm/valine@1.3.10/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 评论框了,LeanCloud 相关应用的 Comment 数据表中也会有评论数据。

Responses