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: "我已在此等候你"