【版務】昔日主題（＆九週年了～）
眨眼間又一年了～
又來個慣例慶祝一下吧～哈，我果然會做點什麼蠢事無聊事來慶祝的。
故事要從之前本站的副站「昔日的天空」說起。原先「昔日的天空」（原網址 https://archive.qingsky.hk）在 2021 年開張，無獨有偶那也是七周年的日子左右。那時我仍蹲在 Blogger 裡，我用 Blogger 內建的備份、回復功能，開了一個新站，然後把本站的舊備份放了上去——就像一部「時光機」一樣，簡單呈現出本站的舊日面貌。
而……到了 2022 年 3 月，就被 Google ban 帳號了，我搬家到了 WordPress。
雖然 Blogger 版本的網誌本身仍在，但是圖片是一片死寂，這一點「昔日的天空」也是同樣情況，自然也無法再開張。
……
咦，沒有了「昔日的天空」，我還是可以弄個「昔日主題」嘛～
昔日主題
可以從《每月主題》頁面中，選擇過去任何一個主題，按「套用此主題」使用
要取消的話按置頂通知欄，或回到《每月主題》文章內，或清理瀏覽器暫存都可以
註：此功能使用瀏覽器的內存，它將會在 30 天後，或瀏覽器暫存被清理時失效
昔日主題的點子，其實我在做 GlassNote 2.0 時有在我腦海裡閃過一下。
GlassNote 2.0 曾經在一次更新中加入了「自訂桌布」功能，容許使用者選擇自己喜歡的圖片作背景圖，當時的原理是把檔案讀取後，寫進 LocalStorage 裡。
（讀取後是以 base64 的格式存放，因此太大的檔案會無法寫入 LocalStorage，但仍可以使用）
function changeBg() {
const reader = new FileReader();
reader.addEventListener("load", function () {
const bgDivCust = document.getElementById('bg-div-cust');
bgDivCust.style.backgroundImage = `url(${reader.result})`;
document.body.classList.add("user-bg");
localStorage.setItem("user-bg", reader.result);
});
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*, video/*");
input.addEventListener('click', function () {
input.parentNode.removeChild(input);
});
input.addEventListener('change', function () {
const image = this.files[0];
if (image.type.match("image") || image.type.match("video")) {
reader.readAsDataURL(image);
}
}, false);
document.body.appendChild(input);
input.click();
}
（以上的 code 經簡化處理，旨在展示原理，並非完整可用的版本）
解說一下便是：
- 用
document.createElement 去產生一個 file input element，再用 input.click() 模擬使用者按「瀏覽」按鈕，這時便會彈出一個檔案選擇視窗
- 使用者從電腦中選取了檔案後，檔案會經
reader.readAsDataURL，執行了 reader.addEventListener("load", ...) 裡面的 code 來讀取檔案的資料
- 用
bgDivCust.style.backgroundImage = `url(${reader.result})`; 改變背景圖，之後用 localStorage.setItem 放進瀏覽器暫存裡
而要做到「昔日主題」，其實方法更簡單。
留意到 bgDivCust.style.backgroundImage = `url(${reader.result})`; 這一句嗎？
使背景圖片改變的，就是這一句，瀏覽器將會從 url 中打撈背景圖片，然後放進 bgDivCust 裡當背景圖，url 就是網址的意思——而一向以來，本站置頂的《每月主題》文章，不就有齊了以前背景圖的網址嗎？
於是我把上述的 code 改了一下，變成了以下的樣子：
function changeTheme(caption, bgUrl, bgPos = "center center") {
document.body.classList.add("user-bg");
const bgDivCust = document.getElementById('bg-div-cust');
bgDivCust.style.backgroundImage = `url(${bgUrl})`;
bgDivCust.style.backgroundPosition = bgPos;
bgDivCust.style.backgroundSize = "cover";
const subtitle = document.querySelector(".subtitle.cust span.subtitle");
subtitle.innerHTML = caption;
}
（以上的 code 經簡化處理，旨在展示原理，並非完整可用的版本）
原理真的簡單到不能再簡單：
- 用
bgDivCust.style.backgroundImage = `url(${bgUrl})`; 把 bgUrl 寫進背景圖裡
- 用
subtitle.innerHTML = caption; 改掉 subtitle，即主頁標題下的 caption 小字
而要使用，我就把以下的句子加到了《每月主題》的文章之中的每一個月底下：
<a onclick='changeTheme("守株待兔", "https://www.qingsky.hk/wp-content/uploads/Feb2023_v2.jpg")'>
套用此主題
</a>
……
就是這麼簡單～
反而是兩件事：把圖片壓縮再重新 upload 到本站上（之前大部分圖片放在 dropbox，經常死圖）；把上述句子 copy and paste 再修改忙了我大半天，（像在庇護工場工作一樣）。
另外是也稍微提一下之前做了的小修改吧。
- 留言預覽
繼 Progress Bar 之後，又是一個抄襲 Youtube 的功能 XDDD
除此之外也沒什麼好說的（？）現在都很少有人上來聊天……
- AdSense
（「省錢之道」文章底下的廣告便是優惠碼，真是巧合）
我又悄悄地加上廣告了，嘻～當作補貼一下 AWS 的費用
當然我這樣放也沒會有什麼收益，但我不會讓廣告破壞我的排版呢
青鳥
２０２３年３月
眨眼間又一年了～
又來個慣例慶祝一下吧～哈，我果然會做點什麼蠢事無聊事來慶祝的。
故事要從之前本站的副站「昔日的天空」說起。原先「昔日的天空」（原網址 https://archive.qingsky.hk）在 2021 年開張，無獨有偶那也是七周年的日子左右。那時我仍蹲在 Blogger 裡，我用 Blogger 內建的備份、回復功能，開了一個新站，然後把本站的舊備份放了上去——就像一部「時光機」一樣，簡單呈現出本站的舊日面貌。
而……到了 2022 年 3 月，就被 Google ban 帳號了，我搬家到了 WordPress。
雖然 Blogger 版本的網誌本身仍在，但是圖片是一片死寂，這一點「昔日的天空」也是同樣情況，自然也無法再開張。
……
咦，沒有了「昔日的天空」，我還是可以弄個「昔日主題」嘛～
昔日主題
可以從《每月主題》頁面中，選擇過去任何一個主題，按「套用此主題」使用
要取消的話按置頂通知欄，或回到《每月主題》文章內，或清理瀏覽器暫存都可以
註：此功能使用瀏覽器的內存，它將會在 30 天後，或瀏覽器暫存被清理時失效
昔日主題的點子，其實我在做 GlassNote 2.0 時有在我腦海裡閃過一下。
GlassNote 2.0 曾經在一次更新中加入了「自訂桌布」功能，容許使用者選擇自己喜歡的圖片作背景圖，當時的原理是把檔案讀取後，寫進 LocalStorage 裡。
（讀取後是以 base64 的格式存放，因此太大的檔案會無法寫入 LocalStorage，但仍可以使用）
function changeBg() {
const reader = new FileReader();
reader.addEventListener("load", function () {
const bgDivCust = document.getElementById('bg-div-cust');
bgDivCust.style.backgroundImage = `url(${reader.result})`;
document.body.classList.add("user-bg");
localStorage.setItem("user-bg", reader.result);
});
var input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*, video/*");
input.addEventListener('click', function () {
input.parentNode.removeChild(input);
});
input.addEventListener('change', function () {
const image = this.files[0];
if (image.type.match("image") || image.type.match("video")) {
reader.readAsDataURL(image);
}
}, false);
document.body.appendChild(input);
input.click();
}（以上的 code 經簡化處理，旨在展示原理，並非完整可用的版本）
解說一下便是：
- 用
document.createElement去產生一個 file input element，再用input.click()模擬使用者按「瀏覽」按鈕，這時便會彈出一個檔案選擇視窗 - 使用者從電腦中選取了檔案後，檔案會經
reader.readAsDataURL，執行了reader.addEventListener("load", ...)裡面的 code 來讀取檔案的資料 - 用
bgDivCust.style.backgroundImage = `url(${reader.result})`;改變背景圖，之後用localStorage.setItem放進瀏覽器暫存裡
而要做到「昔日主題」，其實方法更簡單。
留意到 bgDivCust.style.backgroundImage = `url(${reader.result})`; 這一句嗎？
使背景圖片改變的，就是這一句，瀏覽器將會從 url 中打撈背景圖片，然後放進 bgDivCust 裡當背景圖，url 就是網址的意思——而一向以來，本站置頂的《每月主題》文章，不就有齊了以前背景圖的網址嗎？
於是我把上述的 code 改了一下，變成了以下的樣子：
function changeTheme(caption, bgUrl, bgPos = "center center") {
document.body.classList.add("user-bg");
const bgDivCust = document.getElementById('bg-div-cust');
bgDivCust.style.backgroundImage = `url(${bgUrl})`;
bgDivCust.style.backgroundPosition = bgPos;
bgDivCust.style.backgroundSize = "cover";
const subtitle = document.querySelector(".subtitle.cust span.subtitle");
subtitle.innerHTML = caption;
}（以上的 code 經簡化處理，旨在展示原理，並非完整可用的版本）
原理真的簡單到不能再簡單：
- 用
bgDivCust.style.backgroundImage = `url(${bgUrl})`;把 bgUrl 寫進背景圖裡 - 用
subtitle.innerHTML = caption;改掉 subtitle，即主頁標題下的 caption 小字
而要使用，我就把以下的句子加到了《每月主題》的文章之中的每一個月底下：
<a onclick='changeTheme("守株待兔", "https://www.qingsky.hk/wp-content/uploads/Feb2023_v2.jpg")'>
套用此主題
</a>……
就是這麼簡單～
反而是兩件事：把圖片壓縮再重新 upload 到本站上（之前大部分圖片放在 dropbox，經常死圖）；把上述句子 copy and paste 再修改忙了我大半天，（像在庇護工場工作一樣）。
另外是也稍微提一下之前做了的小修改吧。
- 留言預覽
繼 Progress Bar 之後，又是一個抄襲 Youtube 的功能 XDDD
除此之外也沒什麼好說的（？）現在都很少有人上來聊天…… - AdSense
（「省錢之道」文章底下的廣告便是優惠碼，真是巧合）
我又悄悄地加上廣告了，嘻～當作補貼一下 AWS 的費用
當然我這樣放也沒會有什麼收益，但我不會讓廣告破壞我的排版呢
青鳥
２０２３年３月