为 Hexo 创建的博客添加评论

软件►探索
阅读量： ...
文章目录
  1. 注册 leancloud 账号，获取 APPID 和 API Key
    1. 创建应用
    2. 获取 APPID 和 API Key
  2. 修改 Hexo 的配置主题
    1. 修改配置文件 _config.yml
    2. 新增配置 valine.ejs 文件
    3. 新增调用代码

本文简单描述了如何快速为 Hexo 创建的 Blog 添加评论功能……

  • Github大礼包：gitment， gitalk（推荐），gitter（推荐）; 三个都支持Markdown；
  • 基于 leancloud 的无后端评论系统：Valine（推荐，支持Markdown）；
  • 国外的有几个：disqus(漂亮，但需翻墙)，hypercomments（推荐，不支持Markdown）.
  • 以前的多说挺不错，但是可惜已经成为历史了

综合考虑，当前的最佳选择我认为是 Valine，具体步骤如下

注册 leancloud 账号，获取 APPID 和 API Key

在 LeanCloud 上注册账号
注意：

  1. 需要手机号和验证码注册。
  2. 提供身份证号，使用支付宝扫描二维码，视频认证的方式通过实名认证后才可以创建应用

创建应用

新应用名称随意填
计价方案选择“开发版”即可

获取 APPID 和 API Key

点击刚创建的应用名称，在左侧菜单栏最下方选择“设置”
点击“应用 keys”连接
在 Credentials 下可以看到 APPID和API Key的信息

修改 Hexo 的配置主题

修改配置文件 _config.yml

在主题 _config.yml 文件内增加配置

1
2
3
4
5
6
valine:
 appid:  #Leancloud应用的appId
 appkey:  #Leancloud应用的appKey
 verify: true #验证码
 notify: true #评论回复提醒
 placeholder: 这里留言。。 #评论框占位符

新增配置 valine.ejs 文件

在 layout/_plugins/ 文件夹下增加valine.ejs 文件，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="valine_comment"></div>
<!--载入js，在</body>之前插入即可-->
<!--Leancloud 操作库:-->
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<!--Valine 的核心代码库-->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  new Valine({
      el: '.valine_comment',
      app_id: '<%= theme.valine.appid %>',
      app_key: '<%= theme.valine.appkey %>',
      placeholder: '<%= theme.valine.placeholder %>',
      notify: '<%= theme.valine.notify %>',
      verify: '<%= theme.valine.verify %>',
    });
</script>

新增调用代码

在 layout/_page/post.ejs 文件中添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
    <section id="comments" class="comments">
      <style>
        .comments{margin:30px;padding:10px;background:#fff}
        @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
      </style>
      <%- partial('_plugins/valine', {
        key: post.slug,
        title: post.title,
        url: config.url+url_for(post.path)
      }) %>
    </section>
<% } %>