Hexo主题美化-网站运行时间

Hexo 主题美化-网站运行时间

在主题自定义配置 themes/next/layout/_custom/custom.swig 文件中添加如下代码：

{# 页脚站点运行时间统计 #}
{% if theme.footer.site_runtime.enable %}
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment-precise-range.min.js"></script>
  <script>
    function timer() {
      var ages = moment.preciseDiff(moment(),moment({{ theme.footer.site_runtime.since }},"YYYYMMDD"));
      ages = ages.replace(/years?/, "年");
      ages = ages.replace(/months?/, "月");
      ages = ages.replace(/days?/, "天");
      ages = ages.replace(/hours?/, "小时");
      ages = ages.replace(/minutes?/, "分");
      ages = ages.replace(/seconds?/, "秒");
      ages = ages.replace(/\d+/g, '<span style="color:{{ theme.footer.site_runtime.color }}">$&</span>');
      div.innerHTML = `{{ __('footer.site_runtime')}} ${ages}`;
    }
    var div = document.createElement("div");
    //插入到copyright之后
    var copyright = document.querySelector(".copyright");
    document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
    timer();
    setInterval("timer()",1000)
  </script>
{% endif %}

在 themes/next/layout/_layout.swig 文件 body 标签中添加如下代码：

    ...
    {% include '_custom/custom.swig' %}
  </body>
</html>

在主题主题配置文件 themes/next/_config.yml 中添加如下内容：

  footer:
    ...
+  # Web Site runtime
+  site_runtime:
+  enable: true
+  # Specify the date when the site was setup
+  since: 20191124
+  # color of number
+  color: "#1890ff"

然后在文件 themes\next\languages\zh-CN.yml 中补全对应文案：

  footer:
    powered: "由 %s 强力驱动"
    theme: 主题
    # total_views: 总访问量
    # total_visitors: 总访客量
    total_views: "历经 %s 次回眸才与你相遇"
    total_visitors: "我的第 %s 位朋友"
+   site_runtime: "我已在此等候你"