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

Hexoのフッターへ、サイトの稼働日数とアクセス数を表示する例です。テーマの構造はテーマごとに異なるため、実際のテンプレートの場所を確認してから変更してください。

1. 不蒜子のアクセス統計を追加する
#

フッターのテンプレート、たとえばthemes/your-theme/layout/_partial/footer.ejsへ次のコードを追加します。

<div id="site-lifetime"></div>

<span id="busuanzi_container_site_pv" style="display: none;">
  Total visits: <span id="busuanzi_value_site_pv"></span>
</span>

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

busuanzi_container_site_pvとbusuanzi_value_site_pvは、不蒜子のスクリプトが利用するIDです。外部スクリプトを読み込むため、プライバシーポリシー、CSP、サービスの可用性を確認してください。

2. 稼働日数を表示する
#

<script>
  const creationDate = new Date('2024-04-21');

  function calculateDaysSinceCreation() {
    const now = new Date();
    const difference = now - creationDate;
    return Math.floor(difference / (1000 * 60 * 60 * 24));
  }

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.getElementById('site-lifetime');
    element.textContent = `Site age: ${calculateDaysSinceCreation()} days`;
  });
</script>

作成日を実際のサイト開設日に変更してください。タイムゾーンによって日数が前後する場合があるため、表示目的なら厳密な契約期間の計算には使わないでください。

3. テンプレートへ組み込む例
#

<div class="footer-inner">
  <div class="footer-content">
    <%- theme.footer.content %>
  </div>

  <div id="site-lifetime"></div>

  <span id="busuanzi_container_site_pv" style="display: none;">
    Total visits: <span id="busuanzi_value_site_pv"></span>
  </span>

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

テーマのEJS文法や条件分岐は、利用しているテーマの実装に合わせます。テーマを更新すると変更が上書きされることがあるため、カスタムレイアウトとして管理する方が安全です。

4. カウンター画像を使う方法
#

Moe-Counterなど、画像を読み込む形式のサービスを使うこともできます。

<div class="visitor-counter">
  <span>Visitors: </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 counter">
</div>

外部サービスが停止したり、アクセス元情報を収集したりする可能性があるため、導入前に利用規約とプライバシーへの影響を確認してください。

5. プラグインを使う場合
#

アクセス数と文字数は別の機能です。たとえばhexo-wordcountは文字数や読了時間の計算に使えますが、サイト全体の訪問者数を自動で測定するアクセス解析サービスではありません。

npm install hexo-wordcount --save
hexo clean
hexo generate
hexo deploy

まとめ
#

フッターの実際のテンプレートを確認してからコードを追加する。
サイト稼働日数の計算には作成日とタイムゾーンが影響する。
外部アクセス解析スクリプトやカウンターは、プライバシーと可用性を確認する。
テーマ更新で変更が消えないよう、カスタムレイアウトやGit管理を利用する。

1. 不蒜子のアクセス統計を追加する#

2. 稼働日数を表示する#

3. テンプレートへ組み込む例#

4. カウンター画像を使う方法#

5. プラグインを使う場合#

まとめ#

関連記事