Butterfly 主題魔改 — 幫側邊欄寫個個性化數字時鐘

Error_0x03F72024-08-072024-08-07

步驟

1. 在 themes\[主題]\source\js 下手動新建一個 custom 資料夾，裡面創 digit-clock.js，JS 裡打上以下程式碼。

// 建立一個含 10 個元素的數組，每個元素的值為索引
var _time10 = Array.from(Array(10)).map((n, i) => i);
// 建立一個含前 6 個元素的數組，這是時鐘的 '時' 和 '分'
var _time6 = _time10.slice(0, 6);
// 建立一個包含前 3 個元素的數組，這是時鐘的 '秒'
var _time3 = _time10.slice(0, 3);
// 建立一個含 3 個子數組的二維數組，用來表示時鐘的結構
var _Structure = [
    [_time3, _time10],
    [_time6, _time10],
    [_time6, _time10]
];
// 建立一個 div 元素作為時鐘的容器，並設定 id 為 'clock'
var clock = document.createElement('div');
clock.id = 'clock';
// 將時鐘容器加到元素中
document.getElementById("digit-clock").appendChild(clock);
// 建立一個數組來儲存每個數字組的 div 元素
var digitGroups = [];
// 請求動畫幀並調用 update 函數
requestAnimationFrame(update);
// 遍歷 _Structure 數組
_Structure.forEach(digits => {
    // 建立一個 div 元素作為數字組的容器，並加上類名 'digit-group'
    var digitGroup = document.createElement('div');
    digitGroup.classList.add('digit-group');
    // 將數字組的容器加到時鐘容器裡，並將其添加到 digitGroups 數組中
    clock.appendChild(digitGroup);
    digitGroups.push(digitGroup);
    // 遍歷 digits 數組
    digits.forEach(digitList => {
        // 建立一個 div 元素作為數字的容器，並加上類名 'digit'
        var digit = document.createElement('div');
        digit.classList.add('digit');
        // 遍歷 digitList 數組
        digitList.forEach(n => {
            // 建立一個 div 元素作為數字的子元素，並加上類名 'digit-number'，設定文本內容為 n
            var ele = document.createElement('div');
            ele.classList.add('digit-number');
            ele.innerText = n;
            // 將數字的子元素加到數字的容器中
            digit.appendChild(ele);
        });
        // 將數字的容器加到數字組的容器中
        digitGroup.appendChild(digit);
    });
});
// 定義 update 函數
function update() {
    // 請求動畫幀並調用 update 函數
    requestAnimationFrame(update);
    // 創建一個 Date 對象表示目前的時間
    var date = new Date();
    // 獲取目前時間的 '時'、'分' 和 '秒，並將它們轉換成两位數的字符串數組
    var time = [date.getHours(), date.getMinutes(), date.getSeconds()].
        map(n => `0${n}`.slice(-2).split('').map(e => +e)).
        reduce((p, n) => p.concat(n), []);
    // 遍歷 time 數組
    time.forEach((n, i) => {
        var digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
        // 遍歷數字組的子元素
        Array.from(digit).forEach((e, i2) => e.classList[i2 === n ? 'add' : 'remove']('bright'));
    });
}

2. 接著來幫時鐘設計一下樣式。到 themes\[主題]\source\css 下一樣手動新建一個 custom 資料夾，新增個 digit-clock.css，在其中打上下面的程式碼。

#digit-clock {
    display: flex;
    justify-content: center;
    align-items: center;
}
#clock {
    font-size: 10px;
    position: relative;
}
.digit-group {
    display: inline-block;
}
.digit-group:not(:last-child):after {
    color: inherit;
    content: ":";
    font-size: 50px;
}
.digit {
    display: inline-block;
    width: 33px;
}
.digit .digit-number {
    color: inherit;
    transform: rotate(-90deg);
    transition: font-size 200ms,transform 350ms,color 150ms;
}
.digit .digit-number.bright {
    color: inherit;
    font-size: 25px;
    transform: rotate(0deg);
}

3. 最後，為了讓時鐘能顯示在側邊欄，需要設定一個新的數據配置文件。
到 blog\source\_data 下創建一個 widget.yml，其中加上以下程式碼。

top:
  - class_name: card-clock
    id_name:
    name:
    icon: 
    order:
    html: <div id="digit-clock"></div><script defer async data-pjax src="/js/custom/digit-clock.js"></script>