专栏首页SmartSiHexo+Github为NexT主题添加文章阅读量统计功能

Hexo+Github为NexT主题添加文章阅读量统计功能

在注册完成 LeanCloud 帐号并验证邮箱之后,我们就可以登录我们的 LeanCloud 帐号,进行一番配置之后拿到 AppID 以及 AppKey 这两个参数即可正常使用文章阅读量统计的功能了。

1. 创建应用

(1) 我们新建一个应用来专门进行博客的访问统计的数据操作。首先,打开控制台,如下图所示:

(2) 在出现的界面点击创建应用:

(3) 在接下来的页面,新建的应用名称我们可以随意输入,即便是输入的不满意我们后续也是可以更改的:

(4) 创建完成之后我们点击新创建的应用的名字来进行该应用的参数配置:

(5) 在应用的数据配置界面,左侧下划线开头的都是系统预定义好的表,为了便于区分我们新建一张表来保存我们的数据。点击左侧右上角的齿轮图标,新建 Class。在弹出的选项中选择创建 Class 来新建 Class 用来专门保存我们博客的文章访问量等数据。

备注:

点击创建Class之后,理论上来说名字可以随意取名,只要你交互代码做相应的更改即可,但是为了保证我们前面对NexT主题的修改兼容,此处的新建Class名字必须为Counter。

由于 LeanCloud 升级了默认的ACL权限,如果你想避免后续因为权限的问题导致次数统计显示不正常,建议在此处选择无限制。

(6) 创建完成之后,左侧数据栏应该会多出一栏名为 Counter 的栏目,这个时候我们点击左侧的设置,切换到我们创建的应用 smartsi 应用的操作界面。

在弹出的界面中,选择左侧的 应用Key 选项,即可发现我们创建应用的 AppID 以及 AppKey,有了它,我们就有权限能够通过主题中配置好的 Javascript 代码与这个应用的 Counter表进行数据存取操作了:

复制 AppID 以及 AppKey 并在 NexT 主题的 _config.yml 文件中我们相应的位置填入即可,正确配置之后文件内容像这个样子:

leancloud_visitors:
  enable: true
  app_id: 你的app_id
  app_key: 你的app_key

2. 后台管理

当你配置部分完成之后,初始的文章统计量显示为0,但是这个时候我们 LeanCloud 对应的应用的 Counter 表中并没有相应的记录,只是单纯的显示为0而已,当博客文章在配置好阅读量统计服务之后第一次打开时,便会自动向服务器发送数据来创建一条数据,该数据会被记录在对应的应用的 Counter 表中:

我们可以修改其中的 time 字段的数值来达到修改某一篇文章的访问量的目的(博客文章访问量快递提升人气的装逼利器)。双击具体的数值,修改之后回车即可保存。

  • url 字段被当作唯一ID来使用,因此如果你不知道带来的后果的话请不要修改。
  • title 字段显示的是博客文章的标题,用于后台管理的时候区分文章之用,没有什么实际作用。
  • 其他字段皆为自动生成,具体作用请查阅 LeanCloud 官方文档,如果你不知道有什么作用请不要随意修改。

3. Web安全

因为AppID以及AppKey是暴露在外的,因此如果一些别用用心之人知道了之后用于其它目的是得不偿失的,为了确保只用于我们自己的博客,建议开启Web安全选项,这样就只能通过我们自己的域名才有权访问后台的数据了,可以进一步提升安全性。

选择应用的设置的安全中心选项卡,在Web 安全域名中填入我们自己的博客域名,来确保数据调用的安全:

如果你不知道怎么填写安全域名而或者填写完成之后发现博客文章访问量显示不正常,打开浏览器调试模式,发现如下图的输出:

这说明你的安全域名填写错误,导致服务器拒绝了数据交互的请求,你可以更改为正确的安全域名或者你不知道如何修改请在本博文中留言或者放弃设置Web安全域名。

原文:https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter ScopedModel源码浅析

    其实ScopedModel 只有一个文件,我们直接打开 scoped_model.dart 文件,从上往下看。

    Flutter笔记
  • Flutter 约束宽高比的控件 AspectRatio

    撸码前有个点要注意一下,文档上面说了, 该widget 首先会尝试布局约束所允许的最大宽度。

    Flutter笔记
  • Flutter AnimatedList 源码分析

    可以看到和普通的没什么区别,那我们再来找一下怎么添加/删除item以及添加/删除时是如何设置动画的。

    Flutter笔记
  • Kali Linux Web渗透测试手册(第二版) - 5.7 - 使用ZAP测试WebSokets

    由于HTTP是一种无状态协议,它将每个请求视为惟一的,与上一个和下一个请求无关,这就是为什么应用程序需要实现会话cookie等机制来管理会话中单个用户执行的操作...

    7089bAt@PowerLi
  • Flutter Wrap & Chip

    一般来讲是一个 RecyclerView + 自动换行的 layoutManager + 自定义的background。

    Flutter笔记
  • 前端 vs 后端:哪一个适合你?

    经常会有初学者来问我刚开始学习编程的时候应该学些什么?问这个问题就跟一个医学生询问应该专注研究哪个领域一样。根本没有一个标准答案。但我还是想提供一些指导,并就这...

    出其东门
  • Kali Linux Web渗透测试手册(第二版) - 7.5 - Windows提权

    根据我以往的渗透测试经验来看,有60%以上的服务器都是搭建在windows服务器之上的,并且使用SQL Server作为数据库,所以,作为渗透测试者的我们,更应...

    7089bAt@PowerLi
  • Android里用AsyncTask后的接口回调

    AsyncTask,即异步任务,是Android给我们提供的一个处理异步任务的类.通过此类,可以实现UI线程和后台线程进行通讯,后台线程执行异步任务,并把结果返...

    Vaccae
  • Flutter测试(一): Widget 测试了解一下

    Widget 测试是类似于单元测试的一种,在测试中添加交互,例如:滚动、点击等,然后对结果进行验证。

    Flutter笔记
  • Flutter Scoped_Model 浅析

    Flutter 作为借鉴了很多 React 思想的语言,自然也会有相对应的状态管理。

    Flutter笔记

扫码关注云+社区

领取腾讯云代金券