提示されたコードには、すでにサイトの稼働日数を表示する機能が追加されています。次に、必要に応じてアクセス人数統計を追加できます。以下は具体的な手順です。
1. 不蒜子によるアクセス数統計コードの追加#
不蒜子は非常にシンプルで、無料かつ設定不要のアクセス統計ツールです。Hexo サイトへ直接埋め込めます。
手順:#
<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)を使ってページアクセス数を統計・表示したい場合は、以下の手順で設定できます。
手順:#
プラグインをインストール:
まず
hexo-wordcountをインストールします。npm install hexo-wordcount --saveテンプレートファイルを変更:
テーマフォルダ内のページテンプレート(例:
themes/your-theme/layout/_partial/footer.ejsまたはfooter.ejs)を探し、適切な場所(サイト稼働日数や备案情報の後など)に以下のコードを追加します。<!-- 访问人数统计 --> 本站总访问量:<%= page.total_count %>注意: このプラグインは文字数、読了時間などを統計できます。他の統計機能と組み合わせて使うこともできます。
Hexo を更新し、静的ファイルを生成:
完了後、以下のコマンドで更新後の静的ファイルを生成します。
hexo clean hexo generateその後、サイトをデプロイします。
hexo deploy
3. Moe-Counter アニメ風カウンター#
基本的な考え方は、ドキュメントに従って操作するだけです。まずコードを生成します(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. 稼働日数#
これはアクセス人数統計と同じような形で追加すればよいです。


