你提供的代码中已经添加了显示网站存活时间的功能,接下来可以根据你的需求来添加访问人数统计的功能。以下是详细步骤:

1. 不蒜子访问量统计的代码添加

不蒜子是一个非常简单、免费且无需配置的访问量统计工具,可以直接嵌入你的 Hexo 网站。

步骤:

  1. 在你的 <div class="footer-inner"> 中,找到合适的位置(例如网站存活时间下方),然后添加以下不蒜子的统计代码:
<!-- 访问人数统计 -->
<span id="busuanzi_container_site_pv" style="display: none;">
    本站总访问量:<span id="busuanzi_value_site_pv"></span></span>

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

代码解释:

  • id="busuanzi_container_site_pv"id="busuanzi_value_site_pv" 是不蒜子提供的 ID,它们会在页面加载后自动统计并显示站点的总访问量。
  • 通过 busuanzi.pure.mini.js 引入不蒜子统计脚本,它会自动计算并更新访问量。

修改后的文件:

<div class="footer-inner">
    <% if (theme.footer.content) { %>
        <div class="footer-content">
            <%- theme.footer.content %>
        </div>
    <% } %>
    <% if (theme.footer.statistics.enable) { %>
        <%- partial('_partials/footer/statistics.ejs') %>
    <% } %>
    <% if(theme.footer.beian.enable) { %>
        <!-- 备案信息 ICP for China -->
        <%- partial('_partials/footer/beian.ejs') %>
    <% } %>
    <% if(theme.web_analytics.cnzz) { %>
        <!-- cnzz Analytics Icon -->
        <span id="cnzz_stat_icon_<%= theme.web_analytics.cnzz %>" style="display: none"></span>
    <% } %>

    <!-- 网站存活时间计时功能 -->
    <div id="site-lifetime"></div>

    <script>
        // 设置网站的创建日期
        const creationDate = new Date('2024-04-21'); // 请根据实际情况修改日期

        // 计算当前日期和网站创建日期之间的天数差
        function calculateDaysSinceCreation() {
            const now = new Date();
            const timeDifference = now - creationDate;
            const daysSinceCreation = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
            return daysSinceCreation;
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 计算存活天数
            const daysSinceCreation = calculateDaysSinceCreation();
            
            // 更新存活时间
            const lifetimeElement = document.getElementById('site-lifetime');
            lifetimeElement.textContent = `网站存活了 ${daysSinceCreation} 天`;
        });
    </script>

    <!-- 访问人数统计 -->
    <span id="busuanzi_container_site_pv" style="display: none;">
        本站总访问量:<span id="busuanzi_value_site_pv"></span></span>

    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</div>

2. 使用插件方式显示访问量

如果你想使用插件(例如 hexo-wordcount)来统计和显示页面访问量,你可以按照以下步骤进行配置。

步骤:

  1. 安装插件:

    首先,安装 hexo-wordcount 插件:

    npm install hexo-wordcount --save
    
  2. 修改模板文件:

    找到你的主题文件夹中的页面模板(例如 themes/your-theme/layout/_partial/footer.ejsfooter.ejs),然后在适当位置(例如网站存活时间和备案信息之后)添加以下代码:

    <!-- 访问人数统计 -->
    本站总访问量:<%= page.total_count %>
    

    注意: 这个插件可以统计字数、阅读时间等信息,也可以结合其他统计功能使用。

  3. 更新 Hexo 并生成静态文件:

    完成后,执行以下命令生成更新后的静态文件:

    hexo clean
    hexo generate
    

    然后部署网站:

    hexo deploy
    

3. Moe-Counter 动漫式计数

github🔗

主要思路就是跟着文档操作就行了的,先生成代码 (就是一个 img 格式的代码)

然后,如果你想在底部 (footer) 插入,你就要在 /home/ice/my-blog/themes/fluid(your-theme)/layout/_partials/footer.ejs 插入代码,具体示例如下:

<!-- Moe-Counter 访问人数统计 -->
<div style="text-align: center; margin-top: 10px;">
    <span style="font-size: 16px; font-weight: bold;">访问人数统计: </span>
    <img src="https://count.getloli.com/@:ice345?name=%3Aice345&theme=gelbooru&padding=7&offset=0&align=bottom&scale=1&pixelated=1&darkmode=auto" alt="visitor count">
</div>

这个你想在底部生成邮箱,github 链接,QQ这些就仿照如下:

<!-- 添加社交链接 -->
<div style="font-size: 13px; font-weight: bold; text-align: center;">
    <div style="display: flex; justify-content: center; gap: 20px;">
        <span class="nav-item">
            <a class="nav-link" href="https://github.com/ice345" target="_blank">
                <i class="fab fa-github" style="color:#409EFF;" aria-hidden="true"></i>
                GitHub
            </a>
        </span>

        <span class="nav-item">
            <a class="nav-link" href="mailto:[email protected]" target="_blank">
                <i class="fa fa-envelope" style="color:#409EFF" aria-hidden="true"></i>
                邮箱
            </a>
        </span>

        <span class="nav-item">
            <a class="nav-link" href="https://alist.050626.xyz" target="_blank">
                <i class="fa-solid fa-cloud-download" style="color:#409EFF;" aria-hidden="true"></i>
                Alist
            </a>
        </span>
    </div>
    <br />
</div>  

4. 存活时间

这个的添加就仿照访问人数即可