为博客添加运行时间

效果展示

前言

鉴于本博客使用的主题Butterfly在显示博客运行时间的方面只显示XXX天，而且选择不显示侧边栏的时候就会看不见，加上博主自己想要搞一个凸显自己的显示时间，于是便有了这个添加博客运行时间的想法。
理论上这个显示运行时间的教程适用于各种主题，基于我的个人主页成功的案例得出的结论。
此教程得到网上各种资料以及Aki这位博主的帮助。
以下教程基于Hexo主题Butterfly，如果是其他主题，改动的地方可能不太一样，请注意！

开始

创建运行时间的JS文件

在博客根目录下的 /source 文件夹创建一个 runtime 文件夹，在 runtime 文件夹创建 runtime.js，内容如下：

setInterval(() => {
    let create_time = Math.round(new Date('xxxx-xx-xx xx:xx:xx').getTime() / 1000);
    //xxxx-xx-xx xx:xx:xx的格式为，例：2020-12-26 00:00:00
    let timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
    let second = timestamp - create_time;
    let time = new Array(0, 0, 0, 0, 0);
    //年
    if (second >= 365 * 24 * 3600) {
      time[0] = parseInt(second / (365 * 24 * 3600));
      second %= 365 * 24 * 3600;
    }
    //天
    if (second >= 24 * 3600) {
      time[1] = parseInt(second / (24 * 3600));
      second %= 24 * 3600;
    }
    //时
    if (second >= 3600) {
      time[2] = parseInt(second / 3600);
      second %= 3600;
    }
    //分
    if (second >= 60) {
      time[3] = parseInt(second / 60);
      second %= 60;
    }
    //秒
    if (second > 0) {
      time[4] = second;
    }
    currentTimeHtml = '一川的奇思怪想屋运行了' + ' ' + time[0] + ' 年 ' + time[1] + ' 天 ' + time[2] + ' 时 ' + time[3] + ' 分 ' + time[4] + ' 秒';
    //xxxxxx可随意定义，中英文都可，例如"一川的奇思怪想屋运行了"
    document.getElementById("running-time").innerHTML = currentTimeHtml;
  }, 1000);

引用创建好的JS文件

打开主题配置文件_config.butterfly.yml，找到 inject 配置项的 bottom 引入文件即可。

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    - <script src="/runtime/runtime.js"></script>

让主题显示运行时间

打开主题配置文件_config.butterfly.yml，找到 footer 配置项添加时间栏，在 custom_text 添加 <a id="running-time"></a> 即可，如果已经在此处写入过内容的，可以在合适的位置插入a标签。

footer:
  owner:
    enable: true
    since: 2020
  custom_text: <a id="running-time"></a>
  copyright: true # Copyright of theme and framework
  ICP: # Chinese ICP License
    enable: false
    url:
    text:
    icon: /img/icp.png