使用博客园的朋友都知道,博客园提供了强大的定制功能,供用户定制自己的博客。其中很多人在侧边栏添加了”访问统计“组件,用于展示博客的统计数据,主要是按国家划分的访问量,如下图:
而这个”访问统计“组件的提供方大部分来自国外,如flagcounter,amazingcounters等,因此服务在稳定性和传输速度上相对来说不够好,那如何解决国外服务提供商提供的服务体验不够好而国内的又没有类似的可直接使用的服务呢?答案是自己造一个。
首先我们先分析一下访问统计功能的核心功能,共有三个:数据收集,IP地址转物理地址和数据获取。以flagcounter为例,它提供的是一个HTML代码块,如下:
详细代码如下:
其中核心的部分为标签,属性中的链接便是用于收集数据和获取数据,至于IP地址转物理地址的功能则是在服务器端实现。
通过上述的原理分析,我们要做的主要也是数据收集,IP地址转物理地址和数据获取这三个功能。有两种方案可以实现:
关于方案2,国内有很多可以给个人免费使用的网站统计服务,如百度统计,友盟等,360分析等,提供了数据收集和IP地址转物理地址的功能,稳定性好且传输速度快。关于数据获取,这个是要我们自己开发的,统计服务一般会提供API,我们可以将数据包装成html代码,动态加载到博客中。
这里为了节省时间,我们以选择方案2,统计服务选择百度统计,来进行系统搭建。
关于百度统计在博客园的集成,可以参考:在博客园里使用百度统计
百度统计API的使用涉及到百度开发者,需要先注册开发者然后创建一个工程:
百度开发者
需要设置"授权回调页":
具体包括两个步骤:
百度统计Tongji API
百度统计提供了"按国家"和"按省"两个指标来获取访问量的地域分布,这个可以按喜好选择。
首先将如下代码块添加到博客园的html代码框中,获取到数据之后,我们将数据格式化成html代码块,返回给前端,然后动态插入到侧边栏。
- 数据库的连接和操作
- 接口路由
项目网站:https://counter.toyfun.cn/
最终的效果图如下: