经验笔记

Hugo博客运行时间显示（已运行年月日天小时分钟，支持自动获取建站时间无需配置）

🕘
⏱️
👁️ * 阅读

看到很多 Hugo 站点都有展示“本站已运行**天”，感觉蛮有趣的，也比较有生活仪式感。不过找了一下，大多数的做法都是在js中写死一个开始时间，然后通过现在的时间和开始时间去计算。虽然只要填一个值，但是感觉觉得有点麻烦，而且如果做到模板中也不方便其他人复用，每个人都需要去填写一次。

如何在你的 Hugo 博客中展示网站网站运行时间，并且自动获取开始时间？如果你也有这样的需求可以参考本文。

本文使用的方法是，通过模板函数去获取你Hugo站点最早发布的一篇内容的时间，然后通过这个时间去计算网站已运行的时长。使用最早内容的时间也算比较合理。一般Hugo站点都会有posts类型的内容也会都写上时间date。所以就不考虑没有时间的问题。

如果硬要写死一个时间也可以使用本方案，只需将data-time=""中的值写死即可，比如你想把开始时间写死为 2025-01-01 09:00:00，只需改为data-time="2025-01-01T09:00:00"即可（空格记得换成T）。

模板部分

放到你需要展示的位置对应模板文件中。例如 footer.html。

1

<span id="runningtime" data-time="{{ $oldestPost := (where .Site.RegularPages "Type" "posts").ByDate | first 1 }}{{ with $oldestPost }}{{ with index . 0 }}{{ .Date.Format "2006-01-02T15:04:05" }}{{ end }}{{ end }}"></span>

JavaScript 部分

可以插入到页面内容，如在 footer.html 中加一个 <scirpt></script>标签并插入其中，或者添加到你通用的js文件中。 为了方便js资源文件和模板文件分离已经将最早的一篇文章的时间放到了模板中，然后通过js获取，计算后复写html。

1
2
3
4
5

const runningTimeSpan = document.getElementById('runningtime');
const startyijileTimeStr = runningTimeSpan.dataset.time;const startyijileDate = new Date(startyijileTimeStr);const diff = new Date() - startyijileDate;
const years = Math.floor(diff / 3.15576e10); const months = Math.floor(diff / 2.6298e9) % 12; const days = Math.floor(diff / 864e5) % 30; const hours = Math.floor(diff / 36e5) % 24; const minutes = Math.floor(diff / 6e4) % 60;
const parts = []; if (years > 0) parts.push(`${years}年`); if (months > 0) parts.push(`${months}个月`); if (days > 0) parts.push(`${days}天`); if (hours > 0) parts.push(`${hours}小时`); if (minutes > 0) parts.push(`${minutes}分钟`);
runningTimeSpan.innerHTML = `本站已运行 ${parts.join(' ')} 啦！&nbsp;`;

该代码的优势

  • 模板和脚本分离。
  • 代码进行了多次压缩和优化都用上了科学计数法。
  • 时间换算成了年、月、天、小时、分钟。
    • 6000天这种展示方式看着很宏大，但是会比较绕脑，我们会习惯去理解成常用的计时单位，即：年月日。
    • 为了避免过多占据耗费访客资源，时间不会反复更新，只会在加载页面的时候计算一次。
      • 其实保留小时更好，但是为了增加一点仪式感还是选择保留分钟。
  • 如果年月日小时分钟某个单位为0时会隐藏，提示阅读体验。

如何在 Hexo、Jekyll、Typecho中显示本站已运行时间

只需将下面代码中的data-time="2025-01-01T09:00:00"改为你的博客（空格记得换成T），然后放到你Blog的模板需要展示的位置。并且添加上面的js到你博客即可。

1

<span id="runningtime" data-time="2025-01-01T09:00:00"></span>

转载请注明转自：一极乐（ https://yijile.com/zh/hugo-blog-runtime/ ）

CC BY-NC-SA 4.0 声明
本文采用 CC BY-NC-SA 4.0方式授权。
转载请注明出处和本文链接，说明是否进行修改，不得用于商业用途，使用相同方式共享。

© 2011 - 2025 一极乐  /  最后更新于