メインコンテンツへスキップ
  1. その他/

Hexo にサイト稼働日数とアクセス数を追加する

·1336 文字·3 分· loading · loading · · ·
ICE345
著者
ICE345
CS Student | System | Linux | OCaml

提示されたコードには、すでにサイトの稼働日数を表示する機能が追加されています。次に、必要に応じてアクセス人数統計を追加できます。以下は具体的な手順です。

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 です。ページ読み込み後、自動的にサイト全体の PV を集計して表示します。
  • 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.ejs または footer.ejs)を探し、適切な場所(サイト稼働日数や备案情報の後など)に以下のコードを追加します。

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

    注意: このプラグインは文字数、読了時間などを統計できます。他の統計機能と組み合わせて使うこともできます。

  3. Hexo を更新し、静的ファイルを生成:

    完了後、以下のコマンドで更新後の静的ファイルを生成します。

    hexo clean
    hexo generate

    その後、サイトをデプロイします。

    hexo deploy

3. Moe-Counter アニメ風カウンター
#

github🔗

基本的な考え方は、ドキュメントに従って操作するだけです。まずコードを生成します(img形式のコード)。

その後、フッターに挿入したい場合は、/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. 稼働日数
#

これはアクセス人数統計と同じような形で追加すればよいです。

関連記事