How to import comment system into my blog website?

站点建设 , , , Comments

名词介绍

评论系统（comment system）是指一个为用户提供交互的平台，并且一般还具有对所有评论进行相应的云端存储或管理功能。LeanCloud 是一家为软件开发提供后端的云服务供应商。Valine 是一款快速、简洁且评论者无需注册的便捷评价系统，非常适合博客等访问量不高的网站，可以有效避免博主维护注册用户等的额外开销。

他们之间的逻辑关系为 Valine 是一款评论系统，LeanCloud 作为一个服务商帮助我们一键运维博客内嵌的 Valine 系统。

准备工作

  1. 注册 LeanCloud 账号，推荐国际版账号。
  2. 创建应用，然后选择自己创建的应用。
  3. 按照：设置（Settings）–> 应用 Key（App Keys）–>AppID 和 AppKey。
  4. 为了数据安全，可在安全中心中添加自己的博客域名。

插入 Valine

  1. Valine 本身可通过导入js包Valine.min.js而在 html 页面中直接插入，代码例子[1]如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Valine - A simple comment system based on Leancloud.</title>
    <!--Leancloud 操作库:-->
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <!--Valine 的核心代码库:-->
    <script src="./dist/Valine.min.js"></script>
</head>
<body>
    <div class="comment"></div>
    <script>
        new Valine({
            // AV 对象来自上面引入av-min.js(老司机们不要开车➳♡゛扎心了老铁)
            av: AV, 
            el: '.comment', // 
            app_id: 'Your APP ID', // 这里填写上面得到的APP ID
            app_key: 'Your APP KEY', // 这里填写上面得到的APP KEY
            placeholder: 'ヾﾉ≧∀≦)o来啊，快活啊!' // [v1.0.7 new]留言框占位提示文字
        });
    </script>
</body>
</html>
  1. 然而，在我们使用的 hexo 主题模板中，只需要通过./themes/pure/_config.yml文件即可激活我们的 Valine 系统。找到comment项如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
comment:
  type: valine  # 启用哪种评论系统
  disqus:  
  youyan: 
    uid: 
  livere:
    uid: 
  gitment:
    githubID: 
    repo: 
    ClientID: 
    ClientSecret: 
    lazy: false
  gitalk: 
    owner:  
    admin: 
    repo:  
    ClientID:  
    ClientSecret:  
  valine: 
    appid: # your leancloud application appid
    appkey: # your leancloud application appkey
    notify: false # mail notifier , https://github.com/xCss/Valine/wiki
    verify: true # Verification code
    placeholder: Please comment here! This box has full support for Markdown. 请评论！支持 Markdown 语法。  # comment box placeholder
    avatar: mm # gravatar style
    meta: nick,mail,link # custom comment header
    pageSize: 10 # pagination size
    visitor: true # Article reading statistic https://valine.js.org/visitor.html
    recordIP: true # 记录评论者IP

需要配置的项已经在上面的yaml文件中注释。

测试与玩转

通过 hexo clean && hexo g -d来更新并部署添加了评论系统的博客。然后进行评论，并登录 leancloud 进行后台数据的管理。截图如下所示：

后台数据截图

参考文献

[1] Valine – 一款极简的评论系统

[2] Hexo 部署 valine 评论的 leancloud 设置

JasonCREAM

CVer, Researcher, Engineer, Alchemist, and brickMover are so-called CREAM, where CVer is computer vision-er.