Hugo博客搭建教程（五）：页脚优化与个性化定制

{{- if not (.Param "hideFooter") }}
<footer class="footer">
    <!-- 第一行：版权、备案、技术支持 -->
    <div class="footer-line">
        {{- if site.Copyright }}
        <span>{{ site.Copyright | markdownify }}</span>
        {{- else }}
        <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
        {{- end }}
        {{- with site.Params.footer.text }}
            <span> | {{ . | markdownify }}</span>
        {{- end }}
        <span> | Powered by
            <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
            <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
        </span>
    </div>

    <!-- 第二行：运行时间和访问统计 -->
    <div class="footer-line">
        <span>网站已运行
            <span id="runtime-days">0</span> 天
            <span id="runtime-hours">00</span> 时
            <span id="runtime-minutes">00</span> 分
            <span id="runtime-seconds">00</span> 秒
        </span>
        <span> | 总访问量 <span id="site-pv">0</span> 次</span>
        <span> | 访客数 <span id="site-uv">0</span> 人</span>
    </div>
</footer>

<!-- 运行时间和访问统计脚本 -->
<script>
// 网站启动时间（修改为你的实际上线时间）
const SITE_START_TIME = new Date('2025-07-20T00:00:00+08:00');

// 运行时间计算函数
function updateRuntime() {
    const now = new Date();
    const diff = now - SITE_START_TIME;

    if (diff < 0) return; // 如果时间有问题，直接返回

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    // 更新DOM元素
    const daysEl = document.getElementById('runtime-days');
    const hoursEl = document.getElementById('runtime-hours');
    const minutesEl = document.getElementById('runtime-minutes');
    const secondsEl = document.getElementById('runtime-seconds');

    if (daysEl) daysEl.textContent = days;
    if (hoursEl) hoursEl.textContent = String(hours).padStart(2, '0');
    if (minutesEl) minutesEl.textContent = String(minutes).padStart(2, '0');
    if (secondsEl) secondsEl.textContent = String(seconds).padStart(2, '0');
}

// 页面加载完成后初始化运行时间
document.addEventListener('DOMContentLoaded', function() {
    console.log('开始运行时间统计');

    // 立即执行一次
    updateRuntime();

    // 每秒更新一次
    setInterval(updateRuntime, 1000);
});

// 访问统计初始化
document.addEventListener('DOMContentLoaded', function() {
    // 获取或初始化访问统计
    let pv = parseInt(localStorage.getItem('site-pv') || '0') + 1;
    let uv = parseInt(localStorage.getItem('site-uv') || '0');

    // 检查是否是新访客（按天计算）
    const today = new Date().toDateString();
    const lastVisit = localStorage.getItem('last-visit');
    if (lastVisit !== today) {
        uv += 1;
        localStorage.setItem('last-visit', today);
    }

    // 保存统计数据
    localStorage.setItem('site-pv', pv.toString());
    localStorage.setItem('site-uv', uv.toString());

    // 更新显示
    const pvEl = document.getElementById('site-pv');
    const uvEl = document.getElementById('site-uv');

    if (pvEl) pvEl.textContent = pv;
    if (uvEl) uvEl.textContent = uv;

    console.log('访问统计:', 'PV:', pv, 'UV:', uv);
});
</script>

<!-- 页脚样式 -->
<style>
.footer {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--border);
}

.footer-line {
    margin: 5px 0;
    font-size: 14px;
    color: var(--secondary);
}

.footer a {
    color: var(--primary);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}
</style>

{{- end }}