自制极简网页计数器

因为懒,不想写过说明,直接从 github 上 copy 过来了,将就着看吧,因为是使用的 Dom 监听事件,所以,是不支持 Pjax 了,再然后,有一点小小的失误,里面用了箭头函数,也就是低版本的浏览器兼容性没做,改天有空再修改一下吧。

关于后台程序,有空会整理出来,最后,我只是一个小菜鸟,写的并不好。

counter_js

使用 Lumen 作为后端开发的简易网页计数器,用于支持 Hexo 博客的 uvpv统计。

浏览器支持

Chrome Firefox Safari Opera Edge
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔

快速使用

head 中添加 script 标签:

1
<script src="https://cdn.sevth.com/website/counter_js/counter.min.js"></script>

数据说明

返回数据

引入 script 后,将返回四个数据:

1
2
3
4
5
6
callback({
site_pv:12 //站点总访问量
site_uv:4 //站点访问人次
page_pv:6 //当前页面访问量
version:1.0 //版本号
})

其中 site_pv 将自动填入页面中 idcounter-site-pv 的容器中,site_uv 将自动填入页面中 idcounter-site-uv 的容器中,page_pv 将自动填入页面中 idcounter-page_pv 的容器中。 version 暂时没有其他作用。

配置

1
2
3
4
5
<script>
window.counter_config = {
strict: true //启用严格uv统计模式
}
</script>

这个开关的作用就是在统计 uv 时更严格。统计的原理是首次访问时将写入一个检测 cookie ,未开启时,每过24h,旧用户将按照新用户计入 uv ,也就是cookie将在24h后删除,再次访问就相当于一个新用户了,开启严格模式后,用户在24h内访问一次,将刷新cookie 时间。按访问自然人统计。

注意:该配置默认是关闭的

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.counter_config = {
strict: true
}
</script>
<script src="https://cdn.sevth.com/website/counter_js/counter.min.js"></script>
</head>
<body>
<div>
总人数:<span id="counter-site-uv">99+</span>
<br>
此页面访问量:<span id="counter-page-pv">99+</span>
<br>
本站总访问量:<span id="counter-site-pv">99+</span>
</div>
</body>
</html>

webpack 打包

  1. 克隆仓库

    1
    git clone https://github.com/sevth-developer/counter_js.git
  2. 进入目录并安装依赖

    1
    cd ./counter_js && npm install
  3. 打包文件

    1
    npm run build

    打包完成后会在 dist 目录生成打包好的文件。

计划

  • 访问热度页面统计接口

因为页面 url 经过base64编码后,字符长度超了,所以改用sha1 那么,就没办法做统计了。

警告

为推进互联网从 http 过渡到 https ,默认提供的加载地址仅支持 https 方式访问,如果有特殊需要,请自行下载文件引入。

支持

评论


:D 一言句子获取中...