网站导航
> 技术文档 > Typecho handsome侧边栏显示网站请求总数

Typecho handsome侧边栏显示网站请求总数

网友: 技术文档 2025-07-26 20:42:07

本文将详细介绍如何在博客侧边栏实现请求总数显示功能，让您随时掌握网站的访问情况。

一、请求总数统计的意义

请求总数（PV, Page View）是指网站被访问的总次数，它是衡量网站流量的基本指标。通过显示请求总数，我们可以：

  • 了解网站的整体受欢迎程度
  • 分析流量趋势变化
  • 评估内容吸引力
  • 为优化策略提供数据支持
    Typecho handsome侧边栏显示网站请求总数

二、实现思路

实现侧边栏请求总数显示主要包含以下几个步骤：

  1. 数据来源：从 WAF 获取请求总数数据
  2. 数据缓存：利用本地缓存减少请求次数
  3. 前端显示：在侧边栏显示数据
  4. 自动更新：使用 JavaScript 定期刷新数据保持实时性

所有代码请看原文： https://blog.ybyq.wang/archives/774.html

三、后端实现

1. 创建访问统计数据获取脚本

首先，创建一个 PHP 脚本来获取来自 WAF 的访问统计数据：

// usr/themes/handsome/component/visitor-stats.php

四、前端实现

1. 创建高性能访问统计更新脚本

以下是一个带本地缓存功能的高性能前端更新脚本：

// usr/themes/handsome/component/direct-updater.js

2. 创建访问统计定期更新脚本

以下脚本可以在后台定期更新访问统计数据：

// usr/themes/handsome/component/visitor-updater.js

五、侧边栏实现

1. 在 sidebar.php 中添加请求总数显示函数

首先在侧边栏文件中添加获取来自 WAF 的请求总数的函数：

<?php// 获取WAF访问总量函数function getSafeguardPV(){ // 缓存文件路径 $cache_dir = __DIR__ . \'/cache\'; if (!is_dir($cache_dir)) { @mkdir($cache_dir, 0755, true); } $cache_file = $cache_dir . \'/visitor_stats.json\'; // 格式化数字的函数 function formatNumber($num) { if ($num >= 1000000) { return round($num / 1000000, 2) . \' M\'; } elseif ($num >= 1000) { return round($num / 1000, 2) . \' K\'; } else { return $num; } } // 如果缓存文件存在且未过期 if (file_exists($cache_file) && (time() - filemtime($cache_file) < 300)) { $pv_data = json_decode(file_get_contents($cache_file), true); if (is_array($pv_data) && isset($pv_data[\'total_pv\'])) { return formatNumber($pv_data[\'total_pv\']); } } // 使用curl直接访问API $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, \'/usr/themes/handsome/component/direct-pv.php\'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_TIMEOUT, 2); $response = curl_exec($ch); curl_close($ch); if ($response) { $data = json_decode($response, true); if (isset($data[\'total_pv\'])) { return formatNumber($data[\'total_pv\']); } } // 如果出错，返回0 return \'0\';}?>

[/collapse]

2. 添加访问统计区域到侧边栏

在 sidebar.php 中添加如下代码：

<!-- 访问统计显示区域 --><!-- 总访问量 --><li class=\"list-group-item\"> <div class=\"text-second\"><span class=\"blog-info-icons\"> <i data-feather=\"eye\"></i></span> <span class=\"badge pull-right pv-count\"><?php echo getSafeguardPV(); ?></span><?php _me(\"请求总数\") ?> </div></li>

六、整合配置

1. 在 header.php 或 footer.php 中引入访问统计更新脚本

在主题的 header.php 或 footer.php 文件中添加以下代码：

<!-- 访问统计更新脚本 --><script src=\"<?php $this->options->themeUrl(\'component/direct-updater.js\'); ?>\"></script><script src=\"<?php $this->options->themeUrl(\'component/visitor-updater.js\'); ?>\"></script>

2. 确保缓存目录可写

确保创建缓存目录并设置正确的权限：

mkdir -p /path/to/your/theme/cachechmod 755 /path/to/your/theme/cache

七、优化与扩展

1. 性能优化建议

  • 减少数据库查询：使用缓存文件存储统计数据
  • 延迟加载：使用异步加载方式获取统计数据
  • 本地缓存：利用 localStorage 在客户端缓存数据
  • 压缩响应：启用 GZIP 压缩减少传输大小

2. 样式美化

以下是一些 CSS 代码，可以美化访问统计区域：

/* 可添加到主题的style.css文件或内联样式 */#visitor-stats-section .list-group-item { transition: all 0.3s ease;}#visitor-stats-section .list-group-item:hover { background-color: rgba(0, 0, 0, 0.02);}#visitor-stats-section .badge { background-color: #20c997; transition: all 0.3s ease;}#visitor-stats-section .list-group-item:hover .badge { transform: scale(1.1);}.pv-count { font-weight: bold; transition: all 0.3s ease;}.pv-count.updated { animation: pulse 1s;}@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); }}

3. 添加请求数量变化提示

可以添加以下功能，当请求数量变化时，给予用户提示：

// 添加到direct-updater.js中function updateDOM(formattedPV) { var elements = document.querySelectorAll( \'.pv-count, [data-stat=\"pv\"], .badge[data-type=\"pv\"]\' ); var previousValue = elements.length > 0 ? elements[0].textContent : \"\"; // 更新所有元素 for (var i = 0; i < elements.length; i++) { elements[i].textContent = formattedPV; // 如果值发生变化，添加动画效果 if (previousValue !== formattedPV) { elements[i].classList.add(\"updated\"); setTimeout( (function (el) { return function () { el.classList.remove(\"updated\"); }; })(elements[i]), 1000 ); } }}

八、故障排查

1. 数据不显示或不更新

  • 检查缓存目录权限：确保缓存目录存在且可写
  • 检查路径配置：确保脚本路径正确
  • 查看浏览器控制台：检查是否有 JavaScript 错误
  • 启用调试模式：在 visitor-updater.js 中设置 debugMode 为 true

2. 数据异常

  • 检查 API 响应：使用浏览器访问 direct-pv.php 查看原始数据
  • 重置缓存：删除缓存文件，强制重新获取数据
  • 检查格式化函数：确认 formatNumber 函数工作正常

结语

通过本教程，您已经成功实现了在博客侧边栏显示请求总数的功能。这个功能不仅能让您直观地了解网站的访问情况，还能为访客提供网站活跃度的参考。该实现具有良好的 PJAX 兼容性，可以在页面切换时保持数据的一致性和实时更新。

作者：xuan
个人博客：https://blog.ybyq.wang
欢迎访问我的博客，获取更多技术文章和教程。

网络标签：

相关问题