AI摘要

本文详细介绍了如何在博客侧边栏实现请求总数显示功能,包括请求总数统计的意义、实现思路、后端和前端实现方法、侧边栏实现以及整合配置。通过这些步骤,可以让用户随时掌握网站的访问情况,了解网站的整体受欢迎程度、分析流量趋势变化、评估内容吸引力,并为优化策略提供数据支持。同时,还提供了性能优化建议、样式美化方法和故障排查指南。

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

一、请求总数统计的意义

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

  • 了解网站的整体受欢迎程度
  • 分析流量趋势变化
  • 评估内容吸引力
  • 为优化策略提供数据支持

二、实现思路

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

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

三、后端实现

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

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

此处内容需要评论回复后(审核通过)方可阅读。

四、前端实现

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

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

展开查看

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

(function () {
  "use strict";

  var CACHE_KEY = "handsome_visitor_stats";
  var CACHE_EXPIRE_MS = 10 * 60 * 1000; // 10分钟缓存

  function formatPV(value) {
    var num = parseInt(value, 10);
    if (isNaN(num)) return "...";
    if (num >= 1000000) return (num / 1000000).toFixed(2) + " M";
    if (num >= 1000) return (num / 1000).toFixed(2) + " K";
    return num.toString();
  }

  function updateDOM(formattedPV) {
    var elements = document.querySelectorAll(
      '.pv-count, [data-stat="pv"], .badge[data-type="pv"]'
    );
    for (var i = 0; i < elements.length; i++) {
      elements[i].textContent = formattedPV;
    }
  }

  var cache = {
    get: function () {
      var item = window.localStorage.getItem(CACHE_KEY);
      if (!item) return null;

      try {
        var data = JSON.parse(item);
        if (Date.now() - data.timestamp < CACHE_EXPIRE_MS) {
          return data.value;
        }
      } catch (e) {}

      window.localStorage.removeItem(CACHE_KEY);
      return null;
    },
    set: function (value) {
      try {
        var item = {
          value: value,
          timestamp: Date.now(),
        };
        window.localStorage.setItem(CACHE_KEY, JSON.stringify(item));
      } catch (e) {}
    },
  };

  function fetchData() {
    var xhr = new XMLHttpRequest();
    xhr.open(
      "GET",
      "/usr/themes/handsome/component/direct-pv.php?t=" + Date.now(),
      true
    );
    xhr.timeout = 5000;
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        try {
          var data = JSON.parse(xhr.responseText);
          if (data && typeof data.total_pv !== "undefined") {
            updateDOM(formatPV(data.total_pv));
            cache.set(data);
          }
        } catch (e) {}
      }
    };
    xhr.send();
  }

  function init() {
    // 首先使用缓存的数据(如果有)
    var cachedData = cache.get();
    if (cachedData) {
      updateDOM(formatPV(cachedData.total_pv));
    }

    // 然后从服务器获取最新数据
    // 如果有缓存,延迟获取以减少首次加载时的网络请求
    var delay = cachedData ? 3000 : 100;
    setTimeout(fetchData, delay);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();

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

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

此处内容需要评论回复后(审核通过)方可阅读。

五、侧边栏实现

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';
}
?>

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/cache
chmod 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 兼容性,可以在页面切换时保持数据的一致性和实时更新。

希望本教程对您有所帮助,祝您的博客运营顺利!

如果觉得我的文章对你有用,请随意赞赏
END
本文作者:
文章标题:Typecho handsome侧边栏显示网站请求总数
本文地址:https://blog.ybyq.wang/archives/774.html
版权说明:若无注明,本文皆Xuan's blog原创,转载请保留文章出处。