写在前面

给站点添加运行时间其实并不复杂,其中只涉及到一个文件和一串代码的修改和安置,步骤如下:

具体步骤

找到博客文件的 footer.pug 并加上以下内容

span#runtime
script.
  function updateRuntime() {
    var start = new Date("2025-05-03T00:00:00"); // ← 替换为你的网站启动时间
    var now = new Date();
    var diff = now - start;

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

    document.getElementById("runtime").innerHTML =
      "本站已运行 " +
      days + " 天 " +
      (hours < 10 ? '0' + hours : hours) + " 时 " +
      (minutes < 10 ? '0' + minutes : minutes) + " 分 " +
      (seconds < 10 ? '0' + seconds : seconds) + " 秒";
  }

  document.addEventListener('pjax:complete', () => {
    updateRuntime();
    clearInterval(window.runtimeTimer);
    window.runtimeTimer = setInterval(updateRuntime, 1000);
  });

  updateRuntime();
  window.runtimeTimer = setInterval(updateRuntime, 1000);
  

随后,将其中的时间个性化修改即可

最后总结

一个简单的计时功能轻松上手,进一步美化可参照具体主题进行~