说在最前面，最近刚发现一个好看的主题 Chic，然后果断就换了。效果很好。感谢作者。如果你们也喜欢的话，直接去GitHub项目，里边有安装文档，非常的简单。
附上我的博客地址，欢迎参观。
评论和文章阅读量统计经过对比之后选用的都是 Valine。
添加评论
获取 APP ID 和 APP Key
首先需要注册一个 LeanCloud 账号，然后进入控制台，点击左下角创建应用。
img
随便起个名字，选择开发版，然后创建就可以了。创建完成之后，进入刚刚创建的应用，选择设置->应用Key，然后你就能找到 APP ID 和 APP Key 了。
img
主题 _config.yml 文件内增加配置
在主题目录下的 _config.yml 的文件中添加 valine 配置：
valine:
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: true #验证码
notify: true #评论回复提醒
placeholder: 这里留言。。 #评论框占位符</pre>
添加 valine.ejs 文件
然后添加 valine.ejs 文件，我放到了 layout/_plugins/ 文件夹下，文件的内容：
<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>
添加调用代码
在你的文章的 ejs 文件中添加评论的代码，我使用的这个主题是在 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>
<% } %>
重新部署然后查看
然后你重新部署你的博客，就可以在文章底部看到评论框了。支持表情和 markdown 语法。还是非常好用的，不过免费版好像每天有次数关系和总的空间大小限制。不过对于我这种自己的博客是完全够用的。
image-20191117141317970
添加文章的阅读量
阅读量同样是用的 valine。
主题 _config.yml 文件内增加配置
在主题目录下的 _config.yml 的文件中添加阅读量配置：
valine:
appid: #Leancloud应用的appId
appkey: #Leancloud应用的appKey
verify: true #验证码
notify: true #评论回复提醒
placeholder: 这里留言。。 #评论框占位符
visitor: true #阅读量统计
如果开启了阅读量统计，Valine 会自动检测 leancloud 应用中是否存在Counter类，如果不存在会自动创建，无需手动创建~
valine.ejs 文件中加入评论配置
然后添加 valine.ejs 文件，我放到了 layout/_plugins/ 文件夹下，文件的内容：
<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>
添加调用代码
在你的文章的 ejs 文件中添加评论的代码，我使用的这个主题是在 layout/_page/post.ejs 文件中合适位置添加如下代码：
<span id="<%- url_for(post.path) %>" class="leancloud-visitors view" data-flag-title="<%= post.title %>">
<em class="post-meta-item-text">Pageviews:</em>
<i class="leancloud-visitors-count">loading</i>
</span>
Valine会自动查找页面中class值为leancloud_visitors的元素，获取其id为查询条件。并将得到的值填充到其class的值为leancloud-visitors-count的子元素里。
重新部署然后查看
然后你就可以找到阅读量的显示了，每次刷新页面，就会加1。
image-20191117143659225
网友评论