Valine，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统，经多方对比选择使用Valine作为博客的评论系统。

获取LeanCloud APP ID 和 APP Key

首先需要注册一个 LeanCloud 账号，然后进入控制台，点击左下角创建应用。

img

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

image-20211122092504163

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

在主题目录下的 _config.yml 的文件中添加 valine 配置：

  1. valine:
  2.   appid: aaaaaaaaa #Leancloud应用的appId
  3.   appkey: bbbbbbbb #Leancloud应用的appKey
  4.   verify: true #验证码
  5.   notify: true #评论回复提醒
  6.   placeholder: 到这里留言吧 #评论框占位符
  7.   visitor: true  #阅读量统计
  8.   pageSize: '10'
  9.   avatar: 'robohash' #评论列表头像样式：https://valine.js.org/avatar
  10.   lang: 'zh-cn'

其中Valine 会自动检测 leancloud 应用中是否存在Counter类，如果不存在会自动创建，无需手动创建~

添加 valine.ejs 文件

然后添加 valine.ejs 文件，我放到了 layout/_plugins/ 文件夹下，文件的内容：

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

添加评论调用代码

在你的文章的 ejs 文件中添加评论的代码，我使用的这个主题是在 layout/_page/post.ejs 文件中添加如下代码，配色在Chic主题下昼夜模式下兼容性效果都不错：

  1. <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
  2.             <section style="font-size: 20px;font-weight: 700;margin-bottom: 10px;margin-top: 20px;">
  3.                 <i class="fa fa-comments fa-fw" aria-hidden="true"></i>
  4.                 <span>评论</span>
  5.             </section>
  6.             <section id="comments" class="comments">
  7.               <style>
  8.                   .comments{ margin-top: 30px;}
  9.                   .v .vlist .vcard .vcontent {padding-top: 0;}
  10.                   .vcontent p { color:grey; margin-bottom: 10px;}
  11.                   .v * {line-height: normal;}
  12.                   .v .vwrap  {border-radius: 0px; padding: 10px;}
  13.                   .v .vbtn {border-radius: 0px;}
  14.                   .v code, .v pre {border-radius: 0px;}
  15.                   .v .vlist .vcard .vhead .vsys {border-radius: 1px; padding: 2px;}
  16.                   .v .vlist .vcard .vhead .vnick {color: #2d96bd;}
  17.                   .v .vlist .vcard .vh .vmeta .vat{color: #c7254e;}
  18.                   .v .vlist .vcard {padding-top: 0;}
  19.                   .v .vlist .vcard .vimg { width: 2.5em; height: 2.5em; }
  20.                   .v .vlist .vcard .vquote .vimg { width: 2.5em; height: 2.5em; }
  21.               </style>
  23.               <%- partial('_plugins/valine', {
  24.                 key: post.slug,
  25.                 title: post.title,
  26.                 url: config.url+url_for(post.path)
  27.               }) %>
  28.             </section>
  29.         <% } %>

添加日志浏览数调用代码

在你的文章的 post.ejs 文件中添加浏览量显示的的代码

  1. <% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
  2. <span id="<%- url_for(post.path) %>" class="leancloud-visitors view" data-flag-title="<%= post.title %>">
  3. <text class="post-meta-item-text">
  4. 阅读数:
  5. <i class="iconfont icon-view"></i>
  6. </text>
  7. </span>
  8. <% } %>

重新部署然后查看

然后就可以找到评论框和阅读量的显示了