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

开发者
浏览 loading

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

效果演示

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

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

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

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

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

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

HTML演示代码

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

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

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

1
2
3
4
<span id="<%- url_for(post.path) %>" class="leancloud-visitors view" data-flag-title="<%= post.title %>">
    <em class="post-meta-item-text">阅读量 </em>
    <i class="leancloud-visitors-count">loading</i>
</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.”}是因为配置有问题，具体问题忘记了

Relay Tips: 一极乐（ https://yijile.com/log/596/ ）