Hexo建站工具贴2_Valine评论功能

Chic主题如何添加Valine评论功能

注册LeanCloud

随便起个名字，选择开发版，然后创建就可以了。创建完成之后，进入刚刚创建的应用，选择设置->应用Key，然后你就能找到 APP ID 和 APP Key了。

相应主题_config.yml文件内增加参数

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true # 是否开启
  appid:   # 上一步获取的 App ID
  appkey:  # 上一步获取的 App Key
  notify: false # 新留言是否需要通知 https://github.com/xCss/Valine/wiki
  verify: false # 是否需要验证，验证比较反人类建议false关闭
  placeholder: 请在此输入您的留言 # 默认留言框内的文字
  avatar: mm # 默认头像
  guest_info: nick,mail # 默认留言框的头部需要访问者输入的信息
  pageSize: 10 # pagination size #默认单页的留言条数

添加valine.ejs文件

<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>

添加调用代码
在Chic主题layout/_page/post.ejs文件中添加如下代码：

<% 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>
<% } %>

重新部署
部署后就可以看到评论框了
管理评论
想要管理评论，可以登录leancloud官网，找到控制台 -> 存储 -> commet 中进行管理。

Chic主题如何添加Valine评论功能

Ref: