Fluid -4- 頁腳增加網站運作時長

Fluid 1.8.4 版本支援自定義頁腳内容了，本文記錄頁腳添加網站運作時間的方法。

添加js檔案

• 檔案内容如下：

!(function() {
  /** 計時起始時間，自行修改 **/
  var start = new Date("2020/01/01 00:00:00");

  function update() {
    var now = new Date();
    now.setTime(now.getTime()+250);
    days = (now - start) / 1000 / 60 / 60 / 24;
    dnum = Math.floor(days);
    hours = (now - start) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if(String(hnum).length === 1 ){
      hnum = "0" + hnum;
    }
    minutes = (now - start) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if(String(mnum).length === 1 ){
      mnum = "0" + mnum;
    }
    seconds = (now - start) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds);
    if(String(snum).length === 1 ){
      snum = "0" + snum;
    }
    document.getElementById("timeDate").innerHTML = "本站安全運作&nbsp"+dnum+"&nbsp天";
    document.getElementById("times").innerHTML = hnum + "&nbsp小時&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
  }

  update();
  setInterval(update, 1000);
})();           

複制

• 将

  var start = new Date("2020/01/01 00:00:00");

  一行修改為自己的時間。

js 檔案存放位置

需要說明的是，如果将這個js 檔案直接放在 hexo 目錄的source 檔案夾中，會報錯無法渲染站點，此處有兩種解決方案

方案一

• 在主題

  themes -> fluid -> source -> js

  檔案夾中添加檔案

  duration.js

方案二

• 在hexo站點

  hexo -> source -> vvd_js

  檔案夾中添加檔案

  duration.js

• 同時在站點配置檔案

  hexo/_config.yml

  中為

  vvd_js

  檔案夾添加跳過渲染的選項：

skip_render:
    - vvd_js/**           

複制

修改主題配置檔案

在主題配置中的

footer: content

添加：

footer:
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div style="font-size: 0.85rem">
      <span id="timeDate">載入天數...</span>
      <span id="times">載入時分秒...</span>
      <script src="/vvd_js/duration.js"></script>
    </div>
  '           

複制

示例效果

參考資料

• https://hexo.fluid-dev.com/posts/fluid-footer-custom/