为hexo主题cactus加入Valine评论组件支持

依赖资源

leancloud登陆
valine文档

注册leancloud及登陆

在使用前需要注册leancloud的账号，这里我先注册了，所以直接登陆。
图片1

创建应用

进入后，点击创建应用按钮
图片2
输入一个名字，随便取一个即可
图片3

创建Class用于存放数据

应用创建好了后，点击右上角的扳手按钮，进入详细设置页面
图片4
按照图片所示去创建一个Class
图片5
图片6
注意:有可能应用还没准备创建完毕，会出现下面的提示，所以再等一段时间再次尝试。
图片7

增加主题cactus配置项

现在我们需要准备一些参数以备用
按照下图所示去获取appId及appKey参数
图片8
图片9
现在我们来编辑主题配置文件_config.yml
图片10
增加下面的代码行，并修改appId，appKey参数

# Fill in your valine Comments Params to enable valine comments.
valine:
  enabled: true
  appId: YFT4th**************zoHsz
  appKey: BXJ**************m2L
  notify: false
  verify: false
  avatar: 'mm'
  placeholder: 'just go go'
  visitor: true

增加评论代码块

然后我们来增加用于展示评论的代码，
找到comments.ejs文件
图片11
在末尾增加下面的代码

<% if(page.comments && theme.valine.enabled){ %>
    <div id="vcomments">
    <noscript><%= __('comments.no_js') %></noscript>
    </div>
<% } %>

接下来找到scripts.ejs文件
图片12
同样也在末尾增加下面的代码

<!-- valine Comments -->
<% if (theme.valine.enabled && theme.valine.appId && theme.valine.appKey){ %>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
    <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
    <script type="text/javascript">
        new Valine({
            el: '#vcomments',
            appId: '<%= theme.valine.appId %>',
            appKey: '<%= theme.valine.appKey %>',
            notify: <%= theme.valine.notify %>,
            verify: <%= theme.valine.verify %>,
            avatar: '<%= theme.valine.avatar %>',
            placeholder: '<%= theme.valine.placeholder %>',
            visitor: <%= theme.valine.visitor %>
        })
    </script>
<% } %>

最后全部保存并重新发布。

测试评论

现在我们来检查一下，评论功能是否正常。
访问一篇博客文章，滚动到文章末尾，应当能看见一个评论框，可以评论试一下，下面的情况表示正常
图片13
当然你也可以到leancloud后台查看和管理评论产生的数据
图片14

结束

到现在，评论组件已成功加上，可以愉快的使用呐。