今天走在路上看到路邊停著一台黑貓的貨車，我驚訝的跟蝦波說：

「哎，原來黑貓的 LOGO 是大黑貓叼著小黑貓的後頸耶！」，我們都是第一次發現。

昨天在 Leaf 的新文章〈Nebula探索系統？〉的留言板留言，馬上就被那個留言速度驚豔到了，後來逛到了〈第二個留言區測試〉這篇文章，看到 Leaf 跟皮皮的討論如獲至寶，馬上就如火如荼來進行改版了，這裡感謝 Leaf 和皮皮的啟發。

題外話，Leaf 的網站滿好看的，我最喜歡逆向系列，資安方面的實作對我這種程式麻瓜來說真的很有意思。

為什麼要改版？​

明明我一直在文章還有留言區宣傳這個自建留言板的方案，為什麼又要來改版呢？雖然真的已經足夠好用了，但還是有兩點我覺得可以雞蛋裡挑骨頭的地方。

1.速度稍慢了一點​

因為我使用的 Google Apps Script (GAS) 有「冷啟動」延遲的問題，每次送出留言通常要等五秒左右（我自己的體感）如果使用 Cloudflare Workers 的話，由於在全球都有伺服器節點，程式碼會直接在離讀者最近的那個節點執行，就沒有冷啟動問題，再搭配原生的 D1 資料庫，留言的速度自然快上非常多。

2.需要搭配 Google Sheet 使用​

雖然很簡易，也沒有什麼使用上的問題，但是我想盡量避免使用 Google 的服務（找逃生路線！），再來就是自從我加入 Telegram 留言版通知系統後，都能秒收到留言通知，但是在 Sheet 上用手機回留言實在不太方便，我要在小小的視窗內回覆完，再切到電腦版顯示，然後執行同步到 Gist 的程式（超難點），所以我的解法是：寫一個隱藏的管理介面（詳後文）。

改版架構說明​

使用 Cloudflare Workers（取代原本的 GAS） 搭配 Cloudflare D1（取代原本的 Sheet）

• 原始留言板：Docusaurus ➔ GAS ➔ Sheet ➔ 轉 JSON ➔ 存入 Gist ➔ Docusaurus 讀取

• 新留言板：Docusaurus ➔ Cloudflare Worker ➔ D1 資料庫 ➔ Docusaurus 讀取

使用 Cloudflare Workers+D1 能夠保持原本留言板的優點：無伺服器丶不需登入丶介面乾淨，並且加上速度變快，比之前的留言板速度大約快了一倍（之前的速度我偶爾測試的時候會懷疑有沒有當機）。

操作流程概述​

這個部份的細節不過多贅述了，其實不會太困難，因為每個人的框架不太相同，我認為記錄操作細節意義不是很大，相信使用 AI，稍微除錯一下就能成功了。

1. 建立 D1 資料庫與資料表（在 Cloudflare 準備好裝留言的「新倉庫」）

2. 建立與部署 Worker 後端程式（寫好 API，並加上專屬的「管理員金鑰」驗證）

3. 綁定 Worker 與 D1（讓 API 有權限讀寫那個資料庫）

4. 修改前端 index.js（換上新網址，並把隱藏的「管理員刪除/回覆按鈕」加進去）

5. 搬移舊留言（把舊的 Sheet/Gist 資料輸出再匯入新資料庫）

我最愛的新功能​

現在的留言板可以在前端顯示並進行回覆，實在太讚了！

只要設定一個「管理員金鑰 (Admin Key)」，當程式偵測到瀏覽器存有正確金鑰時，就會在留言下方顯示「刪除」和「編輯回覆」的按鈕。

最有趣的是，現在網站內有一個像是彩蛋的 「隱藏入口」，只要執行隱藏的動作，並輸入我設定好的金鑰，React 就會額外渲染出管理者模式。

▲像這樣出現有盾牌型式的管理者模式！超級有趣！

找找彩蛋​

歡迎去留言板找找看彩蛋在哪裡吧，靠自己找到的話來找我拿小禮物：一個👍。

公佈彩蛋在哪裡囉，要不要再自己找找看？

進入留言板找到標題的 「發表留言」 這四個字，對著它連續點擊 5 下試試吧！

這份筆記整理了在 VSCodium 中一個好用插件 Markdown All in One 的小技巧，能快速撰寫 Markdown 格式，真的是太晚發現了，我最愛的就是快速超連結功能，省事超多。

1. 超連結與網址快速貼上​

• 快速建立連結：複製好網址後，在編輯區選取要作為連結的文字，直接按 Ctrl + V 貼上，會自動轉化為 [選取文字](你的網址) 格式。

2. 格式快捷鍵​

無需手動輸入 Markdown 符號，直接選取文字（選取文字可用Shift + 方向鍵）後使用快捷鍵：

• 粗體：Ctrl + B (選取文字 -> **文字**)
• 斜體：Ctrl + I (選取文字 -> *文字*)
• 刪除線：Alt + S (選取文字 -> ~~文字~~)
• 標題升降級：
  • 增加等級 (H1 -> H2)：Ctrl + Shift + ]
  • 減少等級 (H2 -> H1)：Ctrl + Shift + [

不過標題我還是覺得直接打 # 最快。

3. 列表與任務清單自動化​

• 自動延續：輸入 - 項目 或 1. 項目 後按下 Enter，會自動補齊下一個符號或數字。
• 結束清單：在空白的清單行連續按兩次 Enter，即可自動刪除多餘符號並回到一般段落。
• 任務清單轉換：在清單項目上按 Alt + C，可以快速切換核取方塊的狀態（[ ] <-> [x]）。
  • 檢查結構計算書
  • 更新個人網站

4. 表格自動對齊​

手動排版表格非常耗時，利用格式化工具可以瞬間對齊。

1. 隨意輸入表格內容，用 | 分隔即可（無需在意空格）。
2. 按下格式化快捷鍵：Alt + Shift + F。
3. 表格的 | 符號會自動垂直對齊，提升程式碼原始碼的易讀性。

5. KaTeX 數學公式支援​

支援直接在 Markdown 中撰寫數學與物理公式，預覽時自動渲染。

• 行內公式：使用單個 $ 包裹。例如 $\sigma = \frac{M y}{I}$。
• 獨立區塊公式：使用雙 $$ 包裹。

$$\sigma = \frac{M y}{I}$$

6. 視窗預覽與游標導航​

• 全螢幕預覽：Ctrl + Shift + V
• 側邊同步預覽：Ctrl + K ，再按 V (編輯區與預覽區會同步捲動)。

不過我都直接用 npm run start 在網頁上預覽，所以用不太到就是了。

昨天蝦波傳這個影片給我看跟我討論：《選女友，其實是一道數學題｜Hot Crazy Matrix》，真的把我笑死了，一定要來筆記一下重點整理。（她很驕傲的說她覺得自己是 Unicorn）

座標系定義​

X 軸：外貌指數 (0 - 10)​

這裡的審美取決於個人相對感受。所謂的「10 分」不一定要是安海瑟薇，通常在男生眼裡的班花等級，就已經是頂標了。

Y 軸：作妖指數 (4 - 10)​

為什麼從 4 分開始？因為這世界上沒有任何女生的作妖指數低於 4 分（快被這個天才定義笑死）。在一段長期的關係中，女生一定會有不講理的時候，這是男生進入戀愛前必須明白的前題。

領空劃分​

🚫 禁飛區 (No-Go Zone)：顏值 < 5​

永遠不要與顏值低於 5 分的女生產生情感交集。

這不僅是為了你的情緒投資，也是對人家的公平，只因為寂寞而隨便示好，這樣對雙方都是傷害，根據每個人標準不同，可能你的 5 分是別人的 10 分。

真沒想到看個搞笑影片，讓我有醍醐灌頂的感覺。

⚠️ 危險區 (Danger Zone)：顏值 5 - 10，作妖線以上​

這裡的女生「作」的程度已經會對身心或財產造成傷害，但是外貌又讓你勉強接受這一切。

• 特徵： 剛認識就瘋狂要求物質表示、吵架時會扔東西或拉方向盤。
• 忠告： 如果你沒有過人的心理素質或口袋，千萬別輕易挑戰。

📊 曖昧區 (Fun Zone)：顏值 6 - 8，作妖線以下​

這是大多數人所在的區域。根據影片的理論，這是一個「動態模型」，女生的狀態會隨著打扮、健身或心情而上下移動。建議透過長期觀察（數據點簇）來判斷她的平均值。

🙎‍♀️ 女友區 (Girlfriend)：顏值 > 8，作妖線以下​

• 特徵： 可能把星座當成客觀真理，或是嘴上說要減肥，零食手搖卻還是照吃不誤等等，但大多數情況下無傷大雅，瑕不掩瑜。

💍 老婆區 (Wife Zone)：顏值 > 8，作妖指數約 5 - 7​

這是所有男人的終極目標。

• 特徵： 長得好看，且具備理性溝通的能力，又是一個「好裁判」。
• 好裁判標準： 規則是對等的。如果她要求你不能大聲，她自己也會做到。
• 遇見了怎麼辦？ 趕快帶回家見父母，不要等什麼事業有成，良人先成家。

---

神祕的「獨角獸」 (Unicorn Zone)​

顏值 > 8，作妖 < 5。

這種長得像仙女，卻完全不「作」、甚至比你還講道理的對象存在嗎？

結論是：不存在。

如果你在網路上遇到一個完全符合獨角獸特徵的人，聊起來如沐春風、完全沒有摩擦，請保持警覺。根據大數據分析，螢幕另一頭多半是個準備要「嘎你腰子」的摳腳大漢。

給男生的心態建議​

很多男生遇到「老婆區」的女生會因為自卑而不敢行動。

咻弗森提到，強如柯瑞（Stephen Curry）也會有九投零中的時候，但他絕對不會不敢投第十球。在感情世界裡，如果你連出手都不敢，命中率永遠是零。

---

結論​

看到留言想起來，我在美劇 How I Met Your Mother 裡面，也聽過 Barney 提出過 Hot/Crazy Scale，真的是超好笑的，相對來說，男生也有一個在女生心中的 Hot Crazy Matrix 吧，可能判斷的指標不同，但其實道理都是相同的。

對了，我也覺得蝦波真的是百年難得一見的奇跡 Unicorn 喔！（發自內心，生命沒有遭受威脅）

連假發現一個好看的部落格《那些沒人在乎的事》。

〈我心中的作品排名〉（不是我）​

馬上就被〈我心中的作品排名〉這個頁面給吸引住了，真的超級多動漫作品的，看的好開心。他的分類方式是以 Tier 表來呈現，我覺得相當的不錯耶，筆記起來之後又可以來借鑑 抄襲一下。動漫作品我也是很喜歡的，只是相對電影看得比較少，多數都是主流大眾番，看到喜歡的作品也在別人的 SS Tier 裡那種感覺實在是又激動又開心阿！

• 中二病也想談戀愛
• 乒乓
• 高分少女（一生推）
• 奇巧計程車
• 擅長捉弄人的高木同學
• 葬送的芙莉蓮
• 迷宮飯
• 驀然回首

〈電影院座位個人喜好〉​

這個頁面也很神，整理出超多影廳的座位資訊，看到大巨蛋秀泰影城冷氣超冷，直接笑出來，太真實，幫補一個這家 Dolby Cinema 旁邊廳如果在放 4DX，可能會明顯感覺到在震動，要注意一下。這間椅子真的好舒服大推，不要加錢換設計師椅子廳，一般的比較舒服，真心不騙。

〈我走訪過的動漫畫／影視作品聖地〉​

聖地巡禮頁面實在太酷了，竟然有五十四個作品！好厲害，而且不局限日本唷，《紫羅蘭永恆花園》的場景也有，最驚嘆的是《進擊的巨人》在德國 Nördlingen 的那張照片，實在讓我驚掉下巴，好奇的自己去看看吧。

我自己最想巡禮的是場景是花牌情緣的近江神宮，在動畫裡至高無上的殿堂實在太美了，好想去朝聖！

其他還有很多頁面和貼文，有興趣的趕快 RSS 訂閱起來，慢慢看個夠吧。

開始整理我的專屬 IMDB 排名後，我提到

之後我可以把所有電影的 .js 資料做成一個像殘酷二選一的選擇器，這樣應該就可以幫助我自己「在主觀中最客觀」的打出分數了吧。

現在清單裡已經有 359 部電影了，偶爾會突然想起來還有什麼漏網之魚就會加進來（漫威太多了暫時有點懶得加），加入新的電影後，會先依據我的打分原則評斷，小數點後的數字再大致給定那個級距裡的 1~9 。

• 9 分 -> 神作趕快收藏起來

• 8 分 -> 人生必看的佳作

• 7 分 -> 看完不會失望的好片

• 6 分 -> 中規中矩可以再更好

人類的大腦其實很不擅長給定絕對的數值，但我們非常擅長做「比較」。就算是兩部都很讚的作品：「《刺激1995》跟《阿甘正傳》哪一部比較好看？」¹至少能比較快決定出勝負。

於是我決定用一個 「電影二選一評分系統」。只要不斷在兩部電影之間做選擇，系統就會透過數學演算法，在不斷的比較下幫我收斂到最精準的排行。

這套系統就是被廣泛應用在西洋棋與電競遊戲（如《英雄聯盟》積分）中的 Elo 等級分系統（Elo Rating System）。

Elo 演算法​

Elo 演算法的精神在於，它不是贏了就固定加幾分、輸了就固定扣幾分，而是會根據雙方的「相對實力」來給予獎懲。

每部電影都會有一個「隱藏 Elo 積分」。當兩部電影被抽中要進行對決（二選一）時，系統會先透過公式計算出它們各自的預期勝率，接著等我做出選擇後，系統會比對「實際結果」與「預期勝率」來重新結算分數：

• 理所當然的勝利（高分贏低分）： 神作打敗爛片是應該的，高分電影只會微幅加分，低分電影微幅扣分。
• 爆冷門的逆襲（低分贏高分）： 如果我選了一部原本低分的電影贏了高分，系統會認為這部電影被嚴重低估，進而給予大幅度加分，並重扣那部高分電影。

這樣一來，分數的流動就會非常動態且很快的貼近每個作品應有的實力。

這裡補充一個題外話，因為在台灣的西洋棋選手普遍都很少有機會參加國際棋協 FIDE 的比賽，但其實在國內已經訓練到很厲害了，所以有機會到國外比賽時，國際積分就會因為一直低分贏高分而漲的非常快。

動態區間​

把積分系統套用到電影評分上，會遇到分數破表的問題，在真實的 Elo 系統中，分數是沒有極限的，例如西洋棋界的第一人 Magnus Carlsen，創下了西洋棋等級分有史以來最高的 2882 分，所以一直贏的電影可能會變成 11.5 分，一直輸的爛片可能會變成 1.5 分（我會先把 Elo 換算成 10 分制，每 200 ELO 為 1 分）。

所以當系統啟動時，我設定先掃描我原本給定的分數清單，我的名單最高分是 9.5 分、最低分是 5.9 分。而當電影的內部 Elo 積分因為連敗而跌破 5.9 分的下限時，系統在畫面上依然會強制顯示 5.9 分。

這其實就是《英雄聯盟》的隱藏積分。電影在後台會沒有下限地被扣掉 Elo 積分（真實實力），但還是顯示是最低的銅牌五，必須要在未來的對決中贏回來、把債還清後，前台顯示的牌位才會再次開始往上爬。這個機制讓電影最差都只會變成不建議觀看的 5.9 分而已。

初始分數定位​

傳統的 Elo 系統通常會讓新玩家從固定的底分（例如 1000 分）開始往上爬。但對於電影清單來說，如果要讓一部神作一路虐菜打敗幾十部爛片才爬到 9 分，效率實在太差了。所以當我新增一部主觀認為是 7.5 分的電影時，我就直接讓這部電影帶著 1500 的 Elo 積分空降加入戰局。

它一進場就會直接跟其他差不多 1500 分上下（7.5分左右）的電影進行 PK，藉此快速微調出它最精確的排名，這個可以節省很多點擊二選一的次數。

玩看看​

這裡的題庫是電影清單裡所有的電影，僅供好玩，不會影響到頁面裡的分數，也許出現的評分跟你的喜好有很大分岐也說不定 XD

Footnotes​

1. 第67屆奧斯卡金像獎，《阿甘正傳》打敗《刺激1995》與《黑色追緝令》，得到當年最佳影片。 ↩

最近在廢文小天地的/about頁面看到一個子網站「Today I Learnd」，有好多實用的筆記，大推。

最近很多人響應的「部落格問題挑戰」裡，廢文小天地整理了很多人寫的文章。我自己寫的那篇沒有把所有人的文章連結放上去，第一個原因是廢文小天地大大已經有放過了，第二個原因是我懶 （這是主因吧！） 看到這個網站才知道，原來有一個很聰明的流程耶，不是全部都手動加的，歡迎大家去看他的做法。

如何使用 Telegram 傳送通知給自己​

在筆記裡面，其中這篇〈如何使用 Telegram 傳送通知給自己〉是我最有興趣的，於是我馬上就來實作在我的留言板系統裡面了。

真的很簡單又很方便！以後有留言就可以馬上從手機上接到提醒了！實測有效，真的很喜歡這個功能，感謝大大的筆記幫助了我。

寄信還是貼文​

最近看了 Jaron 的這篇〈我喜歡寫 E-mail 而不是留言〉後，我有個想法是，既然要寫信去跟喜歡的格友聊天或是表達喜愛，那何不直接發一篇文章在自己的頁面上就好了（前題是內容沒有什麼私密性的話）。也許有人也會想要看吧，我認為把自己的喜歡推廣出去也很好阿，不用只讓作者一個人知道，這樣才能讓大家也有機會一起喜歡，畢竟：

世界還缺少你寫的內容！

—— Timo〈世界缺少你寫的內容〉

於是像這篇原本應該寄給廢文小天地的 mail，就直接被我寫在這裡了。

自架 RSS 服務​

最近我對 RSS 閱讀器 inoreader 的速度不是很滿意，每次文章都會比手機上用 Feeder 晚很多才出現，但是我又很想要各裝置間都能同步的功能，不然統整所有的訂閱會很麻煩。雖然在 inoreader 上花錢訂閱就做得到這件事，但是我一直都很想嘗試看看虛擬專用伺服器（Virtual Private Server），所以心血來潮就申請免費的甲骨文雲(Oracle Cloud)試玩看看，免費的主機也足夠部署自己的自架 FreshRSS 了，就當做「練手」的入門專案。

成果​

照著 AI 的指示¹，大概一丶兩個小時就成功了，申請完主機後，用ssh連上自己的主機，設置好 docker 架好 FreshRSS，再把 RSS 名單匯入進去就可以無痛轉移來使用拉！

我現在的 Android 手機上選擇使用 Feedflow，登入 FreshRSS 的帳號密碼就同步了，很方便，介面我也滿喜歡的，乾淨清爽。至於在電腦的瀏覽器上，直接連上 FreshRSS 使用就可以了。

最近這陣子有想要自己組 NAS 存放資料的念頭，還可以順便把 FreshRSS 架在 NAS 上，不過現在硬碟價格真的好離譜呀，過一陣子回穩了再說吧。

Footnotes​

1. 過程就不贅述了，細節有一點點繁瑣，但是不會太困難 ↩

今天發生了好神奇的一件事，昨天晚上剛參加完同事的婚禮，第一次聽到方大同的《愛愛愛》這首歌，腦袋被洗了一整晚都是這個旋律。結果一早就在 RSS 裡看到小白的〈繼續 cover!〉還有 EO 的〈愛愛愛〉，簡直比 Google 監聽還精準。

跟風 COVER​

日更​

其實明明完全沒有日更的想法，但是好像每天都會有好玩的事或想記錄的東西，雖然摻雜了一些廢文，不過也不知不覺 11 天了耶。悠閒的週末起床逛逛 RSS、彈彈吉他、清清冰箱煮個早午餐，跟蝦波一起邊看動漫邊吃，再寫一篇部落格。

這就是我的版本的「曬曬太陽，喝喝酒，和朋友玩音樂吧」¹

Footnotes​

1. 出自 LQ7〈專業人士的前與後〉，我很喜歡的一則小故事。 ↩

下雨天就想在家弄一點小東西吃，今天分享一個從小吃到大的蛋沙拉食譜（直接偷我媽的秘方）。

材料​

非常簡單，紅蘿蔔、馬鈴薯、台式香腸、水煮蛋、沙拉醬。

步驟​

1. 紅蘿蔔、馬鈴薯削皮處理好。

2. 接著切丁進電鍋，內鍋不放水，外鍋兩杯水，這樣煮好會超級甜，比水煮好很多，也不用顧。

3. 煎香腸¹，我們家都用滿漢的蒜味香腸。順便處理水煮蛋，水滾下蛋煮熟撥好殼備用。

4. 輕輕鬆鬆就備好全部的料啦！

5. 成品！可以熱熱吃，但我個人更喜歡放涼或是冷藏後食用。

我從小的吃法是拌入桂冠沙拉醬（俗稱美奶滋），雖然不健康但真的好好吃，除了蔬菜的鮮甜，還有混合進香腸的油脂，搭配上美奶滋的甜味，太美味了，這就是童年的味道。

Footnotes​

1. 感謝 Eddie 的文章〈在網站上放動圖的方式〉讓我學會無聲循環動畫影片。 ↩