Hexo增加网站运行时间统计

前言

我以个人使用这个基于next主题修改的主题进行演示说明，但是该教程同样适用于其他主题。

配置

打开 \themes\next\layout\_partials\footer.swig 文件
然后你应该选定你放网站运行时间的位置。
比如我的网站页脚如下图所示

我个人是打算放到网站访问量后面的，那么就应该找到网站访问量所对应代码段,然后把运行时间统计代码放置其后即可。(因为hexo是从上自下开始渲染的)
以下是我提供的两段代码，都是可以正常使用的，你只需挑选一个出来正常放置即可。

代码1

<span>本站已运行<span id="htmer_time"></span></span>
<script>
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var 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;
        }
        return time;
    }
    </script>

<script type="text/javascript" language="javascript">
    function setTime() {
        var create_time = Math.round(new Date(Date.UTC(2018, 2, 20, 14, 0, 0)).getTime() / 1000);  //这里设置建站时间
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
                + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
                + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }    setInterval(setTime, 1000);

        $(function(){
            $("#learnmore").click(function(){
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var $target = $(this.hash);
                    $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                    if ($target.length) {
                        var targetOffset = $target.offset().top;
                    $('html,body').animate({scrollTop: targetOffset},800);
                    return false;
                    }
                }
            });
        });

</script>

代码2

<span>本站已运行<span id="showDays"></span></span>
<script>
  var seconds = 1000;
  var minutes = seconds * 60;
  var hours = minutes * 60;
  var days = hours * 24;
  var years = days * 365;
  var birthDay = Date.UTC(2018,02,20,14,00,00); // 这里设置建站时间
  setInterval(function() {
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth()+1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = now - birthDay;
    var diffYears = Math.floor(diff/years);
    var diffDays = Math.floor((diff/days)-diffYears*365);
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
      document.getElementById('showDays').innerHTML=""+diffYears+"年"+diffDays+"天"+diffHours+"小时"+diffMinutes+"分钟"+diffSeconds+"秒";
  }, 1000);
</script>

效果图:

扩展知识

很多人在根据网上教程给hexo博客增加以上代码片段后并不能正常显示或者根本不显示网站统计时间，在右击浏览器查看网页源代码的时候也可以看到该js代码是加载到网页上的。
那么为什么还是不能正常显示出网站运行时间呢？
这是因为你的标签的位置不对或者你的js中取的值和你写入的中的id不一致所造成的。很多人在写的时候要么遗漏，要么根本没在意这些细节。
好，那么我接下来简短记述一下关于标签的使用。

span的文本的取值
js取的值并不是用document.getElementById('span_noticesg').value，而是document.getElementById('span_id').innerText。
jquery取的值，是$("#span_noticesg").html();
的赋值
$(‘#span_id’).html(“span的文本”);
document.getElementById(‘span_id’).innerText=”span的文本”;
关于标签使用的更多细节问题大家可以自行查阅网上教程，我就不再过多叙述了。