Valine：一款基于Leancloud的无后端评论系统

最新推荐文章于 2022-11-06 15:18:49 发布

原创最新推荐文章于 2022-11-06 15:18:49 发布 · 949 阅读

2 ·

CC 4.0 BY-SA版权

leancloud简介

领先的 BaaS 提供商,提供数据存储、文件存储、云引擎、容器、即时通讯、消息推送、短信、游戏云等多项服务,为移动开发提供强有力的后端支持。

引言

我使用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>
<% } %>