前言

大家安安，今天來跟大家聊聊本站首頁列表的重構血淚史。
你以為只是換個樣式？ 錯！這次直接搞成「舊+新」雙模式！
舊的不能丟，新的也要有，還要兩個都能切來切去，細節多到爆炸，寫到我都快變 bug 製造機了！

問題在哪？

老實說，舊版列表就是「很傳統」，資訊塞好塞滿，手機看直接爆炸，深色模式有時還會鬼打牆。
然後中英文版還不同步，tag 樣式一個天上一個地下，作者群有時還會消失。
維護起來超痛苦，改一行壞三行，根本地獄。

這次到底想幹嘛？

• 舊的不能丟，新的要很潮，兩個都能切來切去，爽！
• tag、category、badge、作者群、分隔線、標題省略、分頁、hover、深色/淺色，全部都要同步，不能有一點落差。
• 中英文要完全 mirror，不然強迫症會發作。
• 程式碼能砍就砍，能合就合，維護起來才不會想哭。
• 切換新舊版時，分頁要記得，不然用戶會罵我。

爆肝還不夠，還要適配各種裝置

你以為桌機版本搞定就結束？
錯！手機版、平板也要顧到，橫的直的都要能看，字體、間距、卡片寬度全都要調。
每次改完都要拿手機、iPad 狂刷，深怕哪個 break point 又炸掉，真的是 debug 到懷疑人生。

作者跟時間也要進化

以前作者跟日期都是我自己手刻，結果每次搬文章都要手動改，超麻煩。
這次直接進化，全部改成讀 git log，誰改的、什麼時候改的，通通自動抓，爽度直接拉滿！

重構過程有多爆肝？

1. 先搞個 hash，還要對齊旁邊的新增文章按鈕，在列表的右上方點一下就能直接切舊版，超方便。
2. 新增 isOldVersion 狀態，還要跟 localStorage 同步，切來切去都不會亂掉。
3. 新版列表直接卡片化，tag 跟 badge 全部現代化，hover 動畫加好加滿，標題太長自動 ... 省略，手機看也不會爆。
4. 作者群全部單行顯示，分隔線也要一模一樣，強迫症福音。
5. CSS specificity、@media 響應式、-webkit-line-clamp、分頁、卡片 hover、舊/新版切換，全部都要 mirror，英文首頁也不能漏。
6. 以前寫的取用作者的邏輯相關程式碼直接砍掉，直接改成會與文章內頁的取用邏輯統一，import 路徑、元件引用、template 結構全部修一輪。
7. 一堆人詬病的楓葉進場影片很像廣告，也把它砍掉了，不要再噴我了！
8. 最後切換新舊版時，分頁要記得，不然用戶會直接開噴。

最後成果？

• 中英文首頁細節全部 mirror，強迫症看了會流淚。
• 舊/新版切換超順，分頁、狀態都會記得。
• 響應式、深色/淺色、hover、標題省略，該有的都有。
• 維護起來終於不會想砸電腦，之後要擴充也 easy。

結論

這次重構真的爆肝，細節多到我都快精神分裂。
每個小地方都要同步，分隔線、作者群、標題省略、分頁狀態，沒一個能放過。
雙語系 mirror 超麻煩，但做完真的很爽。

以後有新需求，這套結構直接加料就好，首頁再也不怕改到爆炸啦！

---

有空記得來玩新版日誌首頁，覺得哪裡不爽直接留言嘴我，舊版也還在，大家隨便切！