近期更新

來說說這個網站最近弄的一些更新好了。

這陣子在佈置網站方面做了很多變動，反而沒有什麼新話題拿出來充充文章數，有點搞笑。不過看著自己的地盤越來越精緻，還真有成就感。本站沒有用任何預套版型，算是從頭開始蓋，也是我學習 HTML+CSS 實作的成品。因此，我樂於在這裡嘗試一些有的沒的。所幸我貧瘠的程式能力，還不至於讓這個網站變得過度花俏。

JavaScript 是我目前的弱項。現在該站一些複雜的功能 (標籤、深色模式、照片牆等) 都還是仰賴生成式 AI 建立，還在嘗試了解中。希望有朝一日能完全掌握這個站的一切。

RSS Feed 支援

本站有 RSS Feed 訂閱按鈕啦！有訂閱的話，日後有更新就會推播到你的閱讀器上。

感覺要跟大家互動、追蹤最新的動態，用 RSS Feed 是勢在必行，因此就先把這功能趕出來了。歡迎訂閱，同時也歡迎大家向我推薦不錯的部落格！

實踐

功能是利用 11ty 生成引擎官方的擴充模組 RSS Plugin (@11ty/eleventy-plugin-rss)。用 npm 指令安裝，非常快速。再進到 11ty 設定 JS 檔，填寫一些關於本站的資訊，這邊我不小心多填了一行重複的程式碼，多了一次 export，所以輸出時蓋掉了先前的設定，導致出錯。遇到的時候是有點慌，不過心裡也是有個底，有發現並修正。

Hashtag 功能

現在每篇文章，都有一些文章標籤。你可以從這些關鍵字，前往同樣主題或系列文。並且在之後，也在文章列表頁面新增了標籤列表，方便對特定議題感興趣的朋友快速進入討論。

實踐

很遺憾地，這部份全部交給 AI 去做。牽涉到的功能有點太多，我也找不到比較具體的教學。需要建立一套標籤解析的基礎邏輯、利用 11ty 建立集合、再用模版生成出各個標籤的獨立頁面，並能從文章直連過去。現在的我對 JavaScript 還是一竅不通，所以這類牽涉到網站底層邏輯的程式碼，我只能看著 AI 輸出。希望有朝一日能靠自己做。

導覽列響應式設計

在手機版面下，把導覽列的項目和按鈕𦂨成一個漢堡選單按鈕，要去其他分類頁面時再點開選單。可以讓手機版面更為俐落。

實踐

漢堡選單有很多種做法，我挑了一個純 CSS，而沒有用到 JS 脚本的。雖然簡易，在調整後效果還行，也不用大幅更動先前已建立的程式碼與邏輯。花了不少時間在弄動畫和排列，雖然還有很多能改進的地方，不過以現階段我的能力來說，算是整理得滿乾淨的了。

部落格版面調整

部落格的文章列表也多了一欄標籤分類區，可以把文章出現過的Tag都集中列在這邊。把位置設計與最新文章並排，視覺上的資訊量更豐富了，能快速前往同類型的文章和系列文。

實踐

想著，應該能運用先前就建立好的 Hashtag Collection 來做到這個功能。實際上是這樣沒錯，但要搞懂具體是如何在 Node.JS 框架中實行的，消耗了不少腦汁。並排版面用到 CSS Flexbox 的操作，所幸在處理手機響應式設計時，已經先玩過一輪 Flex 的操作了。

遇到的麻煩點是標籤的換行問題。為了要讓 ＃標籤(1) 是完整的，不會斷一個井字號在行尾，嘗試了不少方法。最後是用 CSS white-space 樣式，再配合 ＜wbr＞ 軟性換行來完成。上線時還遇到只有用 Firefox 瀏覽會跑版的問題，標籤清單不換行、一行到底衝破版面。後來爬到文才知道，Firefox 在 white-space 不換行的設定下時，會無視所有換行指令。後來將 white-space 的設定放在內層標籤連結本身、＜wbr＞放在外層，才終於讓換行的效果正式生效。