Hugo页面底栏添加“网站运行时长”stack主题

在 layouts/partials/footer/custom.html 里添加以下 JS 代码，其中 s1 是网站创建日期。代码参考自这里，加上了小时和分钟的计算。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<!-- Add blog running time (with seconds) -->
<script>
    // 网站创建日期（格式：年-月-日，可根据实际调整）
    const startDate = '2025-9-5';
    // 转换为Date对象（处理不同浏览器的日期格式兼容性）
    const s1 = new Date(startDate.replace(/-/g, "/"));

    // 计算并更新运行时间的函数
    function updateRunningTime() {
        const s2 = new Date(); // 当前时间
        const timeDifference = s2.getTime() - s1.getTime(); // 时间差（毫秒）

        // 计算天、时、分、秒（向下取整）
        const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); // 新增秒级计算

        // 格式化输出（补零为两位数，优化显示效果）
        const formattedTime = `${days}天 ${String(hours).padStart(2, '0')}小时 ${String(minutes).padStart(2, '0')}分钟 ${String(seconds).padStart(2, '0')}秒`;

        // 更新页面元素内容（确保页面有id为runningdays的元素）
        const targetElement = document.getElementById('runningdays');
        if (targetElement) {
            targetElement.innerHTML = formattedTime;
        }
    }

    // 初始化执行一次
    updateRunningTime();
    // 每秒（1000毫秒）更新一次，实现实时秒级刷新
    setInterval(updateRunningTime, 1000);
</script>

再在 layouts/partials/footer/footer.html 里添加以下代码：

1

<div class="running-time">本站已稳定运行：<span id="runningdays"></span></div>

在 assets/scss/partials/footer.scss 里添加风格样式，这里单独把计时的部分加粗，并改了颜色。

1
2
3
4
5
6
7
8
9


.running-time {
	color: var(--card-text-color-secondary);
	font-weight: normal;

	.running-days {
		font-weight: bold;
		color: var(--emphasize-text-color);
	}
}

上面的计时部分设置成 var(–emphasize-text-color)，这样能比较方便地在 assets/scss/partials/variables.scss 里设置暗色模式的颜色

1
2
3
4
5
6
7


--accent-color-text: #fff;
--body-text-color: #b0b0b0;
--emphasize-text-color: #9e8f9f; // Add emphasize font color

&[data-scheme="dark"] {
	--emphasize-text-color: #d5cfc4; // Add emphasize font color for dark scheme
}

本篇文章参考：KUL宝藏库修改。