解决valine文章阅读量统计(visitor)配置教程及无法使用的问题

本文只是简单的配置提示,介于已配置valine的前提下,不做valine其他介绍。

效果演示

demo: https://pinwu.pub/url/chrome/

修改接口配置(如果用了类似hexo模板请自行操作)

下面代码中...表示你原有数据,也就是说只要加visitor: 'true'即可。(每个人可能配置会有点不同,过多展示只会挖坑…)

1
<script>
2
  new Valine({
3
    el: ...
4
    appId: ...
5
    appKey: ...
6
    ...
7
    visitor: 'true'
8
  });
9
</script>

页面模板增加显示浏览阅读数代码

spanid一定是带页面URL路径!!如下<span id="/url/chrome/">

HTML演示代码

1
<span id="/url/chrome/" class="leancloud-visitors view" data-flag-title="Chrome">
2
    <em class="post-meta-item-text">阅读量 </em>
3
    <i class="leancloud-visitors-count">loading</i>
4
</span>

hexo演示代码(一般在类似_article.ejs文件中修改)

自己可以在上层加判断,valine未启用不使用,或者visitor为false不显示

1
<span id="<%- url_for(post.path) %>" class="leancloud-visitors view" data-flag-title="<%= post.title %>">
2
    <em class="post-meta-item-text">阅读量 </em>
3
    <i class="leancloud-visitors-count">loading</i>
4
</span>

都配置好了却不能正常写入Counter,相关问题汇总

  1. 官方文档: https://valine.js.org/visitor.html
  2. Counter可以手动创建,影响不大
  3. <Your/Path/Name>必须是页面路径,如果用article的ID一定没反应不生效
  4. 填写的是/url/chrome/如果通过/url/chrome/index.html访问还是记录在/url/chrome/里面,跟填写的路径关联和访问路径无关!
  5. {“code”:401,”error”:”Unauthorized.”}是因为配置有问题,具体问题忘记了