前言
第一次使用原版插件时统计图是没加载出来的,然后看着整体有些复古感觉是一个古老插件(后面找到了原插件仓库,作者还在更新,尴尬了)。于是就自己着手进行优化,后来突然想到如果做成一个模板页面放前台是怎样的,也就有了现在本站左侧访客那个页面,以及右侧博客信息中的浏览总数,数据也是出自这里,不过我还没来得及发教程。
新版插件除了保留了原插件的一些功能,还对外观,性能做了巨大优化。并且在插件中做了一个适配器adapter.php,它可以实现原版插件与当前插件的无缝衔接,这个是我开发时遇到bug弄得,后面感觉可以不用删。
介绍
这是一个为 Typecho 博客系统开发的访客统计插件,基于原版的VistorLogger修改版本。该插件提供了详细的访问统计功能,包括访问国家/地区统计、IP分布等信息,并进行了隐私保护处理。
功能特点
| 功能分类 | 功能描述 |
|---|---|
| 数据统计功能 | • 四项核心指标:PV(页面浏览量)、独立IP数、独立访客数(UV)、访问次数(会话数) • 智能会话识别:基于IP和时间间隔的会话计算(30分钟超时) • 精准访客统计:结合IP和User-Agent的独立访客识别 • 访问国家/地区统计(Top 30) • IP分布统计(已匿名化处理) • 省份访问统计图表(TOP 30) • 路由访问统计分析(页面访问量统计,显示TOP 20) • 访问时间统计(按日期分布) • 管理员访问自动排除 |
| 数据筛选功能 | • 日期范围选择器 • 快捷时间选择(今天、昨日、最近7天、本周、上周、本月、上月、最近30天、全部) • 按钮选中状态高亮显示 • 默认只加载近7天数据,优化首次加载速度 |
| 数据展示功能 | • 四条曲线同时展示:支持PV、独立IP、独立访客(UV)、访问次数四项指标同屏对比 • 趋势分析页面:全新的访客趋势分析功能,支持多维度数据分析 • 动态时间轴:选择单日时自动切换为小时段显示(0:00-23:00) • 智能图例设计:优化颜色方案和图例布局,提升可读性 • ECharts环形图表展示方式 • 列表视图支持(详细数据展示) • 图表悬停效果(显示详细信息) • 自适应图表区域 |
| 数据管理功能 | • 删除特定IP记录功能(支持模糊匹配) • 数据库自动优化 • 时区自动转换功能,确保访客时间记录准确 |
| 兼容性功能 | • 适配器支持(adapter.php),实现原版VisitorLogger插件与当前插件的无缝衔接 • 自动数据迁移,保留原有统计数据 • 兼容新版Typecho(带命名空间版本) • 智能SQL回退机制:兼容MySQL 5.5+到8.0+所有版本 • 数据库自动升级:自动检测并添加user_agent字段 • 兼容不同主题,特别优化handsome主题 |
| 性能优化 | • 异步API数据加载(getVisitStatistic.php和getTrendData.php) • 解决大数据量加载问题,提高页面响应速度(从10s优化到2s) • 智能资源加载机制:ECharts和Flatpickr的CDN优先加载,失败时自动回退到本地文件 • 多指标数据计算:重构API,支持四项指标的并行计算 • 使用CDN加载ECharts图表库,减少插件体积 • 优化移动端显示 |
| 隐私保护 | • IP地址匿名化处理(只显示前两段) • 明确的隐私声明 • 符合相关法律法规要求 • 数据安全存储 |
| 界面特性 | • 统计摘要卡片:新增四项核心指标的数值展示区域 • 指标说明区域:详细说明PV、独立IP数、独立访客数(UV)、访问次数的概念和统计方法 • 响应式设计:指标说明区域支持桌面端4列网格和移动端单列布局 • 界面美化优化:使用彩色图标和现代化卡片设计,提升专业性 • 饼图尺寸优化:适当放大饼图显示区域(半径增加约25%),提升数据可视性 • 渐变视觉效果:为柱状图添加蓝色渐变背景和红色悬停效果 • 移动端自适应布局 • 美观的图表展示 • 列表/图表切换视图 • 优雅的加载动画 |
新版后台页面预览
Handsome前台效果可参考本站左侧访客导航页面
安装及更新方法
- 下载插件文件(文末)
- 在本地解压后把目录名改为VisitorLoggerPro
- 将改后的文件上传到/usr/plugins目录下
- 在 Typecho 后台启用插件
- 要把该文件
visitor-stats.php移动到handsome主题根目录(handsome主题适用) - 直接用新版本覆盖掉旧版本即可完成更新
系统要求
| 项目 | 要求 |
|---|---|
| PHP版本 | 推荐 7.4或 8.0 |
| Typecho版本 | 推荐 1.2.1 |
| 数据库 | MySQL 5.5及以上或等效数据库 |
使用说明
基本使用(Handsome主题适用)
- 在 Typecho 后台创建新页面
- 在页面模板中选择"访客统计"
- 发布页面即可看到统计效果
- 创建新页面,选择"访客统计"模板
隐私保护
本插件已实现以下隐私保护措施:
- IP地址匿名化处理(只显示前两段)
- 明确的隐私声明
- 符合相关法律法规要求
技术实现
- 前端:ECharts 图表库
- 后端:PHP + MySQL
- 数据存储:Typecho 数据库
- 数据处理:通过API异步加载,提高性能
更新日志
| 版本 | 类型 | 更新内容 |
|---|---|---|
| v2.2.8 (2025-08-20) | 图表精细化优化 | • 线条宽度优化:将所有趋势线条宽度从4px减小到2px,符号大小从8px减小到6px • 左轴刻度智能优化:重构Y轴刻度算法,左轴最大值设为刚好比数据最大值大的整数+1,消除过多空白区域 • 动态间隔计算:根据数据范围智能计算Y轴间隔(1、5、10、20、50、100),提升图表可读性 • 线条区分度提升:优化后的图表能更清晰地区分IP数、访客数(UV)、访问数(SV)三条线的变化趋势 • 视觉平衡改进:图表整体更加精致,避免了线条过粗带来的视觉负担 |
| 技术改进 | • 刻度算法重构:从复杂的分段判断简化为基于数据驱动的动态计算 • 显示精度提升:确保每条线的微小变化都能在图表上清晰体现 • 用户体验优化:解决了数据值较小时线条重合难以区分的问题 | |
| v2.2.7 (2025-08-19) | 用户体验优化 | • 趋势分析页面说明:在趋势图表下方新增四项核心指标详细说明区域 • 指标概念解释:详细说明PV、独立IP数、独立访客数(UV)、访问次数的概念和统计方法 • 技术实现展示:展示各指标的SQL查询语句和数据获取方式 • 响应式设计:指标说明区域支持桌面端4列网格和移动端单列布局 • 界面美化优化:使用彩色图标和现代化卡片设计,提升专业性 |
| 代码结构优化 | • 精简文件结构:移除冗余的header.php、footer.php、menu.php文件 • 代码内嵌优化:将HTML头部和尾部代码直接集成到主要文件中 • 减少依赖关系:简化文件引用结构,提升代码可维护性 | |
| v2.2.6 (2025-08-19) | 图表视觉优化 | • 饼图显示优化:去除冗余标题,仅保留"路由访问统计"标题,界面更简洁 • 饼图尺寸优化:适当放大饼图显示区域,提升数据可视性和视觉效果 • 路由统计增强:路由显示数量从10个扩展到20个,提供更全面的访问分析 • 柱状图完整显示:解决路由访问统计图加载不完整问题,增加底部空间并优化标签显示 • 渐变视觉效果:为柱状图添加蓝色渐变背景和红色悬停效果,提升交互体验 |
| 界面细节改进 | • 标签显示优化:调整饼图标签显示逻辑,适应放大后的图表尺寸 • 图例布局调整:优化图例位置和间距,适配更大的饼图显示 • 移动端适配:改进小屏设备上的图表布局和显示效果 | |
| v2.2.5 (2025-08-19) | 兼容性改进 | • 智能SQL回退机制:实现SQL窗口函数的智能回退,兼容MySQL 5.5+到8.0+所有版本 • 数据库自动升级:自动检测并添加user_agent字段,无需手动操作数据库 • 错误处理优化:完善API响应错误信息,便于问题排查和调试 |
| 性能优化 | • 查询性能提升:优化单日和多日数据查询算法,支持按小时和按天双维度统计 • 内存使用优化:重构数据库查询逻辑,减少内存占用 • 加载速度提升:改进前端默认加载逻辑,提升用户体验 | |
| v2.2.0 (2025-08-19) | 图表功能升级 | • 四条曲线同时展示:支持PV、独立IP、独立访客(UV)、访问次数四项指标同屏对比 • 智能图例设计:优化颜色方案和图例布局,提升可读性 • 交互体验优化:改进悬停提示和图表动画效果 • 移动端适配:优化小屏设备上的图表显示和统计摘要布局 |
| 视觉设计改进 | • 统计摘要卡片:新增四项核心指标的数值展示区域 • 响应式布局:完善移动端统计项目的排列和显示 • 配色方案优化:采用专业的数据可视化配色,提升视觉效果 | |
| v2.1.5 (2025-08-19) | API架构升级 | • 多指标数据计算:重构getTrendData.php,支持四项指标的并行计算 • 智能会话算法:实现基于IP和时间间隔(30分钟)的会话识别算法 • 数据聚合优化:优化大数据量场景下的查询性能和响应速度 • 错误容错机制:增强API稳定性,提供详细的错误信息反馈 |
| 算法实现 | • UV计算逻辑:基于IP+User-Agent组合的独立访客识别算法 • 会话识别机制:30分钟超时的智能会话计算,支持跨日统计 • 时间维度处理:单日按小时统计,多日按天统计的自适应算法 | |
| v2.1.4 (2025-08-19) | 数据库架构升级 | • 新增user_agent字段:扩展visitor_log表结构,支持更精准的访客识别 • 自动结构升级:插件启用时自动检测并升级数据库表结构 • 数据完整性保障:确保现有数据完整性,新字段向后兼容 |
| 统计指标体系重构 | • 四项核心指标:全新引入PV(页面浏览量)、独立访客数(UV)、访问次数(会话数) • 精准统计算法:结合IP地址和User-Agent的独立访客识别机制 • 数据记录增强:开始记录User-Agent信息,提升统计准确性 | |
| v2.1.3 (2025-08-19) | 新增功能 | • 趋势分析页面:全新的访客趋势分析功能,支持独立IP和访客总数双曲线图表 • 智能时间范围:新增昨日、本周、上周、本月、上月快捷选择 • 动态时间轴:选择单日时自动切换为小时段显示(0:00-23:00) • 数据统计显示:在图表中显示选定时间范围内的总访客数和独立IP数 • 自适应全部时间:全部时间范围自动从第一条访客记录开始计算 |
| 优化改进 | • 优化API数据获取逻辑,提升趋势分析页面加载速度 • 改进图表交互体验,支持悬停显示详细数据 • 完善错误处理机制,提供更好的用户反馈 | |
| v2.1.2 (2025-08-13) | 优化 | • 智能资源加载机制:实现ECharts和Flatpickr的CDN优先加载,失败时自动回退到本地文件 • 提升加载稳定性:解决网络环境不稳定时图表库加载失败的问题 • 优化用户体验:无需手动选择加载方式,系统自动选择最佳加载策略 • 增强容错能力:多重加载保障,确保图表功能正常运行 |
| 技术改进 | • 重构资源加载逻辑,采用Promise-based异步加载 • 添加详细的加载状态日志,便于问题排查 • 优化错误处理机制,提供友好的用户提示 | |
| v2.1.1 (2025-06-21) | 优化 | • 移除本地chart.js文件(约200KB),减少插件体积 • 全部使用CDN加载ECharts图表库 |
| 修复 | • 删除panel.php中对本地chart.js的引用 | |
| v2.1.0 (2025-06-18) | 前台优化 | • 新增API端点(getVisitStatistic.php)处理数据聚合 • 解决前台大数据量加载问题,提高页面响应速度(10到2s) • 添加日期范围选择器和快捷按钮(今天、最近7天、最近30天、全部) • 实现按钮选中状态高亮显示 • 优化首次加载速度,默认只加载近7天数据 • 增高环形图展示区域,改善视觉效果 • 修复图表悬停效果 |
| 后台优化 | • 添加删除特定IP记录功能(支持模糊匹配) • 重构图表加载逻辑,使用异步API获取数据 • 添加省份访问统计图表 • 优化后台路由统计,解决X轴信息重叠问题 • 优化日期选择功能 | |
| 修复 | • 修复内容解码错误(ERR_CONTENT_DECODING_FAILED) • 修复SQL错误(Unknown column 'province') | |
| v2.0.2 (2025-06-13) | 功能增强 | • 新增后台忽略IP名单功能,支持多种IP格式 • 前台删除管理员(自己)访问记录功能,保持统计数据纯净 • 优化CDN环境下IP识别机制,解决IP不准确问题 • 添加IP地址过滤器,支持自定义过滤规则 |
| 修复 | • 修复PHP 8.0环境下的弃用函数警告 • 修复在某些主题下的样式冲突问题 • 修复日期选择器在移动端的显示问题 • 优化数据库查询,减少资源占用 | |
| v2.0.1 (2025-05-15) | 功能改进 | • 修复时区问题:将数据库time字段从TIMESTAMP改为DATETIME类型 • 添加服务器时区自动转换功能,确保访客时间记录准确 • 优化数据迁移处理,自动转换已有记录的时区 • 添加适配器(adapter.php),实现原版插件与当前插件的无缝衔接 |
| 修复 | • 修复时区显示不正确的问题 • 修复数据库查询兼容性问题 | |
| v2.0.0 (2025-04-23) | 主要功能 | • 初始版本发布 • 实现基本访客统计功能 • 国家/地区访问统计 • IP分布统计(已匿名化处理) • ECharts环形图表展示方式 • 列表视图支持 • 移动端适配 |
| 隐私保护 | • IP地址匿名化处理(只显示前两段) • 明确的隐私声明 • 符合相关法律法规要求 | |
| 其他 | • 优化移动端显示 • 管理员访问自动排除 |
问题说明
插件启用失败解决办法:
有一部分小伙伴之前使用过VisitorLogger插件,然后如果直接启用VisitorLoggerPro的话会报错
1、只需要把VisitorLogger相关文件全部删除即可,也就是两者不能共存。
2、数据库表不需要修改,但也可以把
bot_list表删掉因为用不到。最后
希望大家顺手点点star
如果有使用问题或者开发建议,可在评论区提出
Github地址:
此处内容需要评论回复后(审核通过)方可阅读。






112 条评论
感谢分享,学习一下!
感谢分享,学习一下!
感谢博主分享!
感谢博主分享!|´・ω・)ノ
太厉害了
学习一下
学习一下
看看
kan kan
滴!学生卡!打卡时间:14:41:25,请上车的乘客系好安全带~
报错:Fatal error: Allowed memory size of 536870912 bytes exhausted (tried to allocate 20480 bytes) in /www/wwwroot/blog.zeruns.com/var/Typecho/Db/Adapter/Pdo.php on line 125
把php脚本内存限制加大点试试
感谢博主分享
感谢分享
感谢分享,学习求通过
感谢分享
感谢分享OωO滴!
我也来试试
诶嘿,你这个导航页是飞牛nas里面的应用吧
3年博客网站站长打卡
滴!学生卡!打卡时间:18:06:35,请上车的乘客系好安全带~
好用吗
好东西,速来围观~|´・ω・)ノ
好用吗
滴!学生卡!打卡时间:09:28:30,请上车的乘客系好安全带~
支持博主,必须来试一下
比起有一百个朋友,不如有个比一百人还要重要的真心朋友。
123既然认准这条路,何必去打听要走多久。
支持支持|´・ω・)ノ
相见恨晚啊,真是一个宝藏博主,我现在也是一直用的这个原版插件,翻页查看及其操蛋(
这不得必须去试试看!୧(๑•̀⌄•́๑)૭
哈哈,试了之后可以反馈一下
才发现你在这里回复了,我还以为你博客会有回复邮件提醒插件,建议可以试一下装一个,我踩过坑了,找到了一个确定好使的,可以看看我的文章:https://www.nekopara.uk/archives/249.html
用了一天,提两点建议:
第一个是因为jsdelivr被墙的原因,不开梯子访问会导致js和css文件无法加载而报错,建议给一个选择,使用分发的css和js还是使用本地。不想写切换逻辑的话,也可以开两个仓库分支,应该是静态文件走分发,一个是直接走本地。不然下回来还要改一下代码是有点不方便。同时也建议换一个可靠一点的分发平台。
第二个是,插件查询ip的时候,会存在查询为空的BUG,如果访问记录变多,但是你查询的ip访问量较小,就会触发。不知道是不是普遍性BUG,我还没办法确定。如果是BUG的话,可以考虑修复一下。
插件做得不错,加油!
我用的就是CommentNotifier
js和css文件无法加载而报错,是后台的echarts图加载不出来吗
似乎整个界面都不太正常了,建议还是完善一下吧。我目前使用的是我自己静态资源本地化了的。
辛苦截个图我看一下
博主,为什么我这个访客页面创建完成后浏览的时候,必须要强刷新浏览器才可以有数据勒?我使用的是link页面的方式,不知道和你的方式是否一样?你的页面就没有这个问题
我看了一下,要加载一小会,不用强制刷新
你后台的pjax有没有设置函数,可以加个这个:
// 访客统计图表重载辅助函数 - 移到全局作用域 function reloadVisitorStats() { setTimeout(function() { if (typeof echarts !== 'undefined') { console.log("PJAX: 使用备用方法初始化图表"); // 重新初始化图表逻辑 if (document.getElementById('countryChart')) { try { const countryChart = echarts.init(document.getElementById('countryChart')); countryChart.showLoading({ text: '正在加载数据...', color: '#1c65d7', textColor: '#000', maskColor: 'rgba(255, 255, 255, 0.8)', fontSize: 14 }); } catch (err) { console.error("PJAX: 国家图表初始化失败", err); } } if (document.getElementById('provinceChart')) { try { const provinceChart = echarts.init(document.getElementById('provinceChart')); provinceChart.showLoading({ text: '正在加载数据...', color: '#1c65d7', textColor: '#000', maskColor: 'rgba(255, 255, 255, 0.8)', fontSize: 14 }); } catch (err) { console.error("PJAX: 省份图表初始化失败", err); } } // 触发一次查询按钮点击,以加载数据 const filterBtn = document.getElementById('filterBtn'); if (filterBtn) { filterBtn.click(); } else { // 如果没有查询按钮,尝试触发最近7天按钮 const last7DaysBtn = document.getElementById('last7DaysBtn'); if (last7DaysBtn) { last7DaysBtn.click(); } else { console.log("PJAX: 无法找到查询按钮,请手动刷新页面"); } } } else { console.log("PJAX: echarts库仍未加载,请手动刷新页面"); // 显示提示信息 const loadingStatus = document.getElementById('loadingStatus'); if (loadingStatus) { const errorMsg = document.createElement('p'); errorMsg.style.color = '#ff4d4f'; errorMsg.textContent = '图表加载失败,请刷新页面重试。'; loadingStatus.appendChild(errorMsg); } } }, 500); }加上后可以了!!!感谢大佬
支持博主
来了博主
不知道我的复古主题能不能使用,下载测试下。
能用吗
都这麽久了
滴!学生卡!打卡时间:15:55:27,请上车的乘客系好安全带~
能用是能用,就是数据有点离谱。每天都显示有上千ip,不真实。🥲
趋势的数据是按照日志来分析的,日志是绝对正确的,但筛选条件还得改进
应该能用
在 Typecho 后台创建新页面
在页面模板中选择"访客统计"
...在这个步骤卡住了,因为创建页面时,页面模板选择中没有“访客统计”这个模版选择(ó﹏ò。)
页面模板选择中的“访客统计“是handsome主题专属的,其他主题不需要设置这个( ,,´・ω・)ノ"(´っω・`。)
不错,来看看
启动插件时报错,麻烦大佬看一下
php 8.4.6
myspl 8.4.6
创建访客日志表或IP地址记录表失败: SQLSTATE[HY000]: General error: 1 near "UNSIGNED": syntax error
重新部署了一下,可以用了,可能是myspl版本太高的原因,换成5.7的就好了
那就好那就好
[强][强][强]
太不错了
回复
回复看看
学习学习
必须支持 ···博主
OωO
哈哈哈
学习下
滴!学生卡!打卡时间:09:12:38,请上车的乘客系好安全带~
OωO
大佬大佬,你的代码很强👍,但是我后台为什么看不见记录呢
有什么报错提示吗
很奇怪,没有看见报错
加我qq:676567473,发点截图看看
大佬,麻烦通过一下
滴!学生卡!打卡时间:04:33:19,请上车的乘客系好安全带~OωO
试试这款,期待呢
怎麽样٩(ˊᗜˋ*)و
先下载看看别的主题适配不适配
如何
滴!学生卡!打卡时间:21:17:42,请上车的乘客系好安全带~
滴!学生卡!打卡时间:15:36:57,请上车的乘客系好安全带~
好用吗
太厉害了
我这两晚还没去你那里巡逻
滴!学生卡!打卡时间:20:44:50,请上车的乘客系好安全带~
图 好 涩 啊ヾ(≧∇≦*)ゝ
滴!学生卡!打卡时间:04:33:19,请上车的乘客系好安全带~
你的代码写的很好,不过很快就是我的了(滑稽)
哎我去,你的typecho和mysql都是哪个版本
不是 哥们,你要干神魔(/ω\)
实在不好意思,你刚才说“xuan”我实在没想到,不好意思给你删了
太酷啦bro
哈哈,可以帮忙点点star,后续还会优化
请问下不迁移visitor-stats.php会损失哪些功能呢,我目前在使用Single主题没法使用 handsome 的优化部分,试了下访客统计的功能是能正常使用的
可能没办法删除自己的浏览记录,因为 删除自己的记录 我在前台页面设置的。
但你可以在设置里的 忽略IP 中添加自己的访问ip,这样也不会统计自己的浏览记录。
后台有统计就行,visitor-stats.php这个是handsome主题的前台模板,不要也可以
明白了,感谢
看看
我这个访客数据量挺大的,需要加载挺长时间,后续还要优化
滴!学生卡!打卡时间:00:29:28,请上车的乘客系好安全带~
滴!学生卡!打卡时间:09:34:08,请上车的乘客系好安全带~
不错不错
666
有你在的日子才是我的日常。
牛皮轰轰
嘿嘿|´・ω・)ノ
滴!学生卡!打卡时间:00:01:39,请上车的乘客系好安全带~
滴!学生卡!打卡时间:21:25:32,请上车的乘客系好安全带~
滴!学生卡!打卡时间:21:40:46,请上车的乘客系好安全带~
可以的👍🏻
滴!学生卡!打卡时间:15:01:03,请上车的乘客系好安全带~
想请教下VisitorLoggerPro这个插件一直无法启动,又什么办法么
我更新了代码,你试试现在的版本
visitor-stats.php移动到handsome主题根目录了吗