hexo 博客添加评论和阅读量

说在最前面,最近刚发现一个好看的主题 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

推荐阅读更多精彩内容

  • 日常bb 前一篇文章:2019-3.3_发烧停更本来向发烧停更的,打算;还是不能休息,有罪恶感。贴上之前我hexo...
    晓小小小晓阅读 1,611评论 1 14
  • 个人网站:https://sunfove.xyz,欢迎交流 Hexo Hexo 是一个快速、简洁且高效的博客框架。...
    sunfove阅读 1,848评论 5 12
  • 文章转载于:Hexo博客Next v7.X 主题升级,美化警示录丨奥怪的小栈 本教程适用于Next主题 V7.X以...
    奥怪阅读 350评论 0 2
  • 一早感恩遇到好司机,帮我搬家,一路愉快。 感恩让我听娇子老师上四个关键点的课,让我再一次加深对健康对美对爱与形体礼...
    MissGanLove阅读 70评论 0 0
  • 男人与女人有什么不同?那就是二十岁男人别无选择女人选择众多。无论是所谓的女权主义还是男权主义不得不承认一个普遍...
    一个没有标签的人阅读 75评论 0 0