12 項發現全部處理完畢,另加三項追加檢查。兩個「需修正」等級的問題已解決:英文站不再是中文站,履歷頁的 7 個 h1 收斂成 1 個。修正過程中也推翻了原本的一項診斷——見 F-06。
其餘都已完成。這兩項需要在 GitHub 網頁介面或你自己的資料上操作。
Deploy from a branch,branch 選 main、資料夾選 / (root)。在這步完成前,四個 demo 的新網址還不會生效,舊網址的轉址頁會指向 404。我已放好 .nojekyll,Pages 不會去跑 Jekyll。
<!-- TODO: 換成鐵人賽系列頁網址 -->。這個網址無法從磁碟推導,我不猜。中英兩份各一處。
三篇依你指定翻成英文,另外三篇加上中文限定標示。翻譯是把互動頁的 fragment 整份重做成英文版,而不是只改標題。
id 保持一致有實際作用:勾選狀態存在同一個 localStorage key,所以在中文版勾好的項目,切到英文版仍然是勾好的。
另外how-to-build-hugo-pages 原本只有中文版,我補了英文版並掛上標示,兩個語言的貼文數才對齊(各 7 篇)。README 裡「Every page is available in English and Traditional Chinese」那句不成立的話也改掉了。
about 與 projects 的中英四份檔案,# 降成 ##、#### 降成 ###。
照你給的五個階段寫成佔位內容:選主題 → 填內容佈署 → 申請 Google 收錄 → 設定 SEO → 2026 年以 Claude 改寫。每段兩三句,標了「這篇是大綱,內容之後會再補完整」,你之後直接改就好。
依你指示保留 尤俊硯大頭貼-24.jpg、移除 avatar.jpg。保留的那張現在有了實際用途——F-07 的分享卡就是用它產生的。
四個 demo 複製到 ycy1997alex-oss-projects/iThome-2026-Ironman/demo/,逐檔 md5 比對確認位元完全相同。個人網站原位置改成轉址頁。
這樣 Day04/Day05 已發布文章裡的 4 條連結不會斷,你也不用回頭去編輯已發布的文章。
注意oss-projects 整包是 MIT 授權。這四個 demo 進去之後預設就落在 MIT 底下,如果你不希望這樣,要在 demo/ 裡另外標示授權。
我原本把它寫成效能問題,這是錯的。實際檢查頁面請求後:那三個大圖示全部只被 manifest 或 rel=apple-touch-icon 參照,只有在「加到主畫面/安裝」時才會下載,一般瀏覽根本不會抓。每次都載入的 favicon 是 736 B 與 2.3 KB,本來就沒問題。
而唯一能省下 60% 的做法(PNG-8 調色盤量化)會把琥珀色那隻眼睛壓成黃綠色——那正是這張圖之所以叫 odd-eyed 的地方。我把兩個版本並排在實際顯示尺寸下比對過,差異看得出來。
決定不動這三張。拿識別度換一批沒人下載的位元組是虧的。真正的載入成本在頭像,見 F-07 下方。若你之後仍想壓,裝 pngquant 或 oxipng 的品質會比這裡能用的量化器好很多。
用 尤俊硯大頭貼-24.jpg 做了 1200×630 的名片卡:圓形人像、中英姓名、職稱,加上你選的三個關鍵字「生醫訊號 · 醫療 AI · 航太工程」。og:image 與 twitter:image 已改指向它,全站每一頁都吃得到。首頁頭像仍是那隻貓,兩者刻意分開。
順著這條線查下去,發現真正的效能問題在頭像:原圖 1024×1024/173 KB,但 CSS 只畫成 200 px,而且 alt="avatar" 對螢幕閱讀器毫無意義,也沒有 width/height 會造成版面位移。
做法原圖移到 assets/ 交給 Hugo 處理,並覆寫 theme 的 avatar partial。產卡的腳本收在 tools/make_og_card.py,用的是 repo 相對路徑,之後想改字或換照片直接重跑即可,不會變成一張沒人知道怎麼來的圖。
兩個 fragment 的 h1 降成 h2,與另外三個一致。中英版共四個檔案都改了。/posts/call-up-list/ 的 h1 從 2 個變回 1 個。
隨 F-05 一併解決。新位置叫 prompt-yt-financial,舊的底線網址保留為轉址頁,所以改名不會斷連結。
themes/hugo-coder/layouts/_partials/header.html:33 的 .Language.LanguageName 換成 .Language.Label。建置輸出現在是零警告。
提到 Case_A 的三行刪掉,保留「此檔假設 Hugo 專案位於 repo 根目錄」那句。
新增 LICENSE,內容與程式碼分開:文章與清單文字採 CC BY-NC 4.0,建站的 layouts/CSS/tools/workflow 採 MIT。人像照片與那張貓圖列為排除項、保留所有權利,theme 則指向它自己的 MIT。兩份 README 都加了授權段落。
這裡有個單位陷阱:hugo-coder 把 html 設成 font-size: 62.5%,所以這個專案裡 1rem = 10px。照字面寫 48rem 會得到 480px,比手機還窄。你想要的那個 48rem(Tailwind max-w-3xl 的慣例值)是 16px 基準下的 768px,換算到這裡是 76.8rem。
另一個限制是不能直接還原 ecd82dd:那次 commit 順手拿掉了互動頁用來撐開版面的負邊界 hack,改由全站容器負責。整包 revert 會讓五個互動頁一起變窄。
依據行長過長時,視線換行會找不到下一行起點。一般建議每行 45–75 個西文字元,WCAG 1.4.8 以 80 字元為上限。本站 18px 內文下 768px 約為 42 個中文字一行。
先量了「一次頁面瀏覽到底會下載哪些圖」,結論是只有頭像。處理結果在 F-07:173 KB → 20.9 KB WebP,補上 width/height 消除版面位移,alt 從 avatar 改成真正的名字。原圖移出 static/ 之後也不再被發布,等於連那 173 KB 都不會出現在網站上。
另外修掉 contact 頁的 ——這個 alt 對螢幕閱讀器等於沒有,中英版分別改成 尤俊硯 與 Alex Yu。
沒做的沒有替內文圖片加 lazy loading。全站內文只有 contact 那一張圖,而且在第一屏,加 loading="lazy" 反而會拖慢它。
掃了建置後全部 100 個頁面。基礎設施本來就正確:hreflang 三組齊全、canonical 每頁都有、lang 屬性正確、標題無重複、sitemap 分語言、GA4 只注入一份。
找到一個真問題:about 與 projects 沒有 description,theme 於是拿內文開頭去填,產出 2063 字元的 meta description。Google 只會截斷,等於白白浪費這個欄位。
沒做的19 個分類/標籤/作者列表頁共用站台預設 description。這類 taxonomy 頁本來就價值低,逐一寫描述的投報比不高,先留著。
| 檢查 | 結果 | 說明 |
|---|---|---|
| hugo build | 0 warn / 0 err | 0.64 秒。F-10 修好之後連原本那個 deprecation 警告也沒了。 |
| 英文站中文殘留 | 0 | 三個翻譯頁的 <div class=content> 區塊內中文字元數為 0。 |
| fragment id 對應 | 253 / 253 | 64 + 90 + 99,中英逐一對應且順序相同,勾選狀態可跨語言沿用。 |
| h1 數量 | 1 / 頁 | about、projects、call-up-list、travel-checklist 全部收斂為 1。 |
| demo 檔案完整性 | 4 / 4 md5 相同 | 搬到 oss-projects 後與原檔位元完全一致。 |
| og:image | 100 / 100 頁 | 全部指向新的 og-card.jpg。 |
| meta description | 無超長 | 已無超過 160 字元的頁面。 |
| custom.css 產出 | 兩條規則都在 | 壓縮後仍含 76.8rem 與 min(96vw,1720px)。 |
兩個 repo 動工前工作樹都是乾淨的,所以全部改動都能用 git diff 檢視、git checkout 還原。我沒有執行任何 git add 或 commit。