网站底部个性化PV统计展示实现指南

想要给网站下展示PV，记录下如何在Hexo博客中实现网站底部的PV(页面访问量)统计并进行个性化展示。

当前PV统计实现

使用Supabase PostgreSQL数据库存储PV数据，并通过JavaScript动态更新网站底部的访问量显示，且个性化显示格式为：”已有 {访问量}人访问~”

核心实现文件

<div class="footer-content">
    <div class="footer-text">
        <span>
        <span id="site-stats" class="stats-text"></span>
        <% } %>
    </div>
</div>

PV统计JavaScript实现 (siteStats.js)

(function() {
    // 使用Supabase PostgreSQL数据库存储PV数据
    // 初始化统计数据
    async function initStats() {
        // 等待Supabase客户端初始化完成
        await waitForSupabaseInit();
  
        // 更新PV计数
        await window.SupabaseStats.incrementPV();
  
        // 获取最新统计数据
        const stats = await window.SupabaseStats.getStats();
  
        // 更新页面显示
        updateStatsDisplay(stats.pv);
    }
  
    // 等待Supabase客户端初始化
    function waitForSupabaseInit() {
        return new Promise((resolve) => {
            const checkSupabase = () => {
                if (window.SupabaseStats && window.SupabaseStats.isInitialized()) {
                    resolve();
                } else {
                    setTimeout(checkSupabase, 100);
                }
            };
  
            // 立即检查一次
            checkSupabase();
        });
    }
  
    // 更新统计显示 - 个性化显示的核心部分
    function updateStatsDisplay(pv) {
        const statsElement = document.getElementById('site-stats');
        if (statsElement) {
            // 当前的显示格式
            statsElement.textContent = `已有${formatNumber(pv)}人访问~`;
        }
    }
  
    // 格式化数字，添加千位分隔符
    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
  
    // 当页面加载完成后初始化统计
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initStats);
    } else {
        initStats();
    }
})();

个性化展示方法

修改显示格式

可以根据需要修改siteStats.js文件中的updateStatsDisplay函数，实现不同的个性化展示效果：

function updateStatsDisplay(pv) {
    const statsElement = document.getElementById('site-stats');
    if (statsElement) {
        // 以下是一些个性化展示示例：
  
        // 示例1：当前使用的格式
        // statsElement.textContent = `已有${formatNumber(pv)}人访问~`;
  
        // 示例2：简洁格式
        // statsElement.textContent = `访问量: ${formatNumber(pv)}`;
  
        // 示例3：有趣的文案
        // statsElement.textContent = `${formatNumber(pv)}位小伙伴已来过~`;
  
        // 示例4：文艺风格
        // statsElement.textContent = `此地已迎来${formatNumber(pv)}次驻足`;
  
        // 示例5：科技感风格
        // statsElement.textContent = `访问人次: ${formatNumber(pv)}`;
  
        // 保留当前使用的格式
        statsElement.textContent = `已有${formatNumber(pv)}人访问~`;
    }
}

添加样式美化

您可以在footer.ejs文件中自定义统计信息的样式：

.stats-text {
    /* 当前样式 */
    color: #666;
    margin: 0;
  
    /* 可以添加以下样式进行美化 */
    /* font-weight: bold; */
    /* text-decoration: underline; */
    /* font-style: italic; */
    /* 颜色可以改为主题色 */
    /* color: #3498db; */
}

修改后重建

修改完成后，重新构建以更改生效：

npm run build

常见问题解决

统计数据不显示

如果网站底部的访问量不显示，可能的原因有：

Supabase配置不正确或未配置
网络连接问题导致无法连接到Supabase
浏览器阻止了JavaScript执行

自定义格式不生效

如果修改了显示格式但没有生效，可以尝试：

清除浏览器缓存
重新构建博客(npm run build)
检查JavaScript是否有语法错误

结语

希望通过本文介绍的方法，大家可以轻松实现网站底部PV统计的个性化展示，也可以根据自己的喜好和博客风格，选择或设计合适的显示文案和样式，让你的博客更加独特和个性化。

ONGWU BLOG

Hi，旅行者：

项目作品

友情链接