我網站創建多久了?

每個架設網站的人多少都有想這個問題, 畢竟時間流逝的很快, 總需要一個提醒來告訴自己, 因此我剛架設這個網站好沒兩天就把這個功能給加上去了。

由於本站使用的是Wordpress主題 “ Agron “, 其提供了十分方便在頁尾透過HTML語法編輯文本以及JavaScript腳本功能, 因此可以很簡單的實現這個功能而不用複雜的設定許多東西。

Argon佈景主題的開源地址:

📖

solstice23/argon-theme

📖 Argon - 一个轻盈、简洁的 WordPress 主题

⭐ 5515 Stars 🍴 625 Forks Language: PHP

正文開始

首先, 要在Agron設定中的”腳本”目錄中, 找到”頁尾腳本”加入這段程式碼:

<script no-pjax="">
    //頁面每次跳轉都會執行window.pjaxLoaded = function(){}內的程式碼
    window.pjaxLoaded = function(){
        let blog_running_days=document.getElementById("blog_running_days");
        let blog_running_hours=document.getElementById("blog_running_hours");
        let blog_running_mins=document.getElementById("blog_running_mins");
        let blog_running_secs=document.getElementById("blog_running_secs");
        function refresh_blog_running_time(){
        let time = new Date() - new Date(2021, 7, 25, 0, 0, 0);
        let d=parseInt(time/24/60/60/1000);
        let h=parseInt(time%(24*60*60*1000)/60/60/1000);
        let m=parseInt(time%(60*60*1000)/60/1000);
        let s=parseInt(time%(60*1000)/1000);
        blog_running_days.innerHTML=d;
        blog_running_hours.innerHTML=h;
        blog_running_mins.innerHTML=m;
        blog_running_secs.innerHTML=s;
        };
        refresh_blog_running_time();
        if (typeof(bottomTimeIntervalHasSet) == "undefined"){
            let bottomTimeIntervalHasSet = true;
            setInterval(function(){refresh_blog_running_time();},500);
        };
    };
    window.pjaxLoaded(); //手動執行 window.pjaxLoaded 讓網頁在第一次載入時也會執行這段腳本
</script>

2021-08-27 16 : 13 更新

必須加上 window.pjaxLoaded = function(){ } 才能讓網頁換頁之後JavaScritp腳本會刷新執行之前忘記加了

其中 let time = new Date() - new Date(2021, 7, 25, 0, 0, 0); 對應的是時間開始計算的起始點, **要注意的是這邊的時間是UNIX時間, 月份的計算是從0開始計算的!**我就踩了這個坑
如果沒計算好你就會跟我一樣變成時空旅人了

要被時空管理局抓走了(；´Д｀)

當把這段程式碼中唯一需要更改部分修改完之後, 就可以往頁尾開始加顯示的文字了
這邊需要用到一點點HTML和JavaScript的知識, 整合起來差不多是這樣 :

<div>
本站已運行 : <span id="blog_running_days"> </span>天<span id="blog_running_hours"> </span>時<span id="blog_running_mins"> </span>分又<span id="blog_running_secs"> </span>秒
</div>
<div>
Background : <a href="https://www.pixiv.net/artworks/82042965/">Pixiv 82042965</a>☀ & <a href="https://www.pixiv.net/artworks/82042965/">Pixiv 82042965</a>🌙
</div>
<div>
Copyright © 2021 Nebulosa Cat. All rights reserved.
</div>

到這邊就差不多結束了, 可以呈現出這樣的效果 :

附錄

前面使用到的一些HTML語法 :

//在每個區塊加上<div>和</div>(區域元素)可以避免跑版
<div>
內文
</div> 

//超連結崁入
<a href="網址URL">可以點的文字</a>