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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


    <!-- Add blog running time -->
    <script>
        let s1 = '2023-3-18'; //website start date
        s1 = new Date(s1.replace(/-/g, "/"));
        let s2 = new Date();
        let timeDifference = s2.getTime() - s1.getTime();

        let days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
        let hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));

        let result = days + "天" + hours + "小时" + minutes + "分钟";
        document.getElementById('runningdays').innerHTML = result;
    </script>

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

1
2
3
4
5


<!-- Add blog running time -->
<section class="running-time">
	本博客已稳定运行
	<span id="runningdays" class="running-days"></span>
</section>

在 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/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
}