如果剛才有在關注這個網站的讀者，可能會發現網站在幾個小時內經歷了一次劇烈的「陣痛期」——也就是切換語言時畫面直接一片空白死機。

但經過一番搶修與大改版，我很高興地宣布：這個網站已經正式升級為「原生雙語架構 (Bilingual Native)」了！

拋棄 Hacky 的 CSS 隱藏法

在上一篇文章中，我提到使用 AI 來自動翻譯文章。當時的做法其實非常「Hack」：我讓 Python 腳本把翻譯出來的英文，跟原本的中文一起塞在同一個 Markdown 檔案裡，然後利用自訂的按鈕和 CSS 的 display: none 來強制隱藏或顯示對應的語言區塊。

這種做法雖然快速，但遇到了不少致命缺點：

  1. 排版容易崩潰：如果文章裡面有複雜的 HTML 標籤（比如置中圖片的 <div>），腳本的 Regular Expression 一個不小心就會把文章直接從中間「截斷」，導致整個網頁 HTML 結構壞死（這也是剛才網站全白死機的元兇）。
  2. 對 SEO 極度不友善：搜尋引擎爬蟲一次會把中英文全都爬進去，它根本不知道這個網頁到底是什麼語言。
  3. 遷移困難：未來如果我要把網站搬家到效能更好的 Astro.js，這種充滿自訂標籤的單一檔案絕對是一場災難。

擁抱 Hugo 原生多語系 (i18n)

痛定思痛後，我決定花點時間，把架構徹底重構成最標準、最正規的做法——使用 Hugo 內建的 i18n (Internationalization) 機制。

1. 檔案物理分離，保持純淨

現在，我依然只需要專心寫純中文的 Markdown 文章（例如 article.md）。 當我把文章 Push 到 GitHub 時，背景運行的 GitHub Actions 與 Gemini API 會自動偵測這篇新文章，並把它的標題、摘要、內文全部翻譯成流暢的英文。

最關鍵的差異在於，腳本不再把英文塞回原本的檔案，而是自動產生一個獨立的 article.en.md 檔案。這讓我的中文原始檔保持絕對的乾淨，沒有任何多餘的程式碼干擾閱讀或後續編輯。

2. 全站雙語化與 SEO 提升

受惠於原生架構，現在不只是「單篇文章」有英文版，而是**「整個網站」都有了專屬的英文空間**！

  • 導覽列（首頁、筆記、新聞等）現在會自動切換為英文 (Home, Posts, News)。
  • 英文版的文章會自動生成帶有 /en/ 前綴的網址（例如 datafox.tw/en/posts/...），這對 Google 的 SEO 索引有著極大的幫助。

讀者指南：現在要怎麼切換語言？

因為我們移除了原本夾在文章中間那顆土砲的「🌐 切換為英文」按鈕，現在的切換方式變得更直覺、更符合現代網站的設計慣例。

👉 您只需要點擊網站最上方導覽列（Header）右側的「Language」按鈕！ 👈

點擊後，整個網站（包含您正在閱讀的文章、網址結構、以及網站選單）都會一鍵無縫切換成對應的語言。這一切都仰賴自動化腳本的默默付出，讓我能夠繼續專注於用母語產出內容，同時不費吹灰之力地與世界接軌。

技術的迭代總是伴隨著踩坑與陣痛，但當你親手把架構重構成乾淨、強健的模樣時，那種成就感，絕對是工程師最大的浪漫。