健檢與修正紀錄 · d:\Repo\ycy1997alex.github.io · 2026-09-03

Alex Yu 個人網站健檢

12 項發現全部處理完畢,另加三項追加檢查。兩個「需修正」等級的問題已解決:英文站不再是中文站,履歷頁的 7 個 h1 收斂成 1 個。修正過程中也推翻了原本的一項診斷——見 F-06。

Findings
12 / 12
Build
0.64 s · 0 warn
Pages EN / ZH
51 / 50
首頁圖片
173 → 21 KB
Files changed
33
待你操作
2

還需要你動手的兩件事

程式碼改不到的部分

其餘都已完成。這兩項需要在 GitHub 網頁介面或你自己的資料上操作。

  1. 到 oss-projects 開啟 GitHub Pages Settings → Pages → Source 選 Deploy from a branch,branch 選 main、資料夾選 / (root)。在這步完成前,四個 demo 的新網址還不會生效,舊網址的轉址頁會指向 404。我已放好 .nojekyll,Pages 不會去跑 Jekyll。
  2. 補上鐵人賽系列頁網址 Projects 頁的近期作品區我留了 <!-- TODO: 換成鐵人賽系列頁網址 -->。這個網址無法從磁碟推導,我不猜。中英兩份各一處。

逐項處理結果

12 項
F-01已修正

英文站其實是中文站

三篇依你指定翻成英文,另外三篇加上中文限定標示。翻譯是把互動頁的 fragment 整份重做成英文版,而不是只改標題。

translate → travel-checklist.en.html 64 個項目 id call-up-list.en.html 90 個項目 id call-up-list-review.en.html 99 個項目 id 全部 id 與中文版逐一對應、順序相同,內文零中文殘留 notice → 2026-setouchi / 2026-tokyo-drive / how-to-build-hugo-pages > **This post is in Traditional Chinese Only.**

id 保持一致有實際作用:勾選狀態存在同一個 localStorage key,所以在中文版勾好的項目,切到英文版仍然是勾好的。

另外how-to-build-hugo-pages 原本只有中文版,我補了英文版並掛上標示,兩個語言的貼文數才對齊(各 7 篇)。README 裡「Every page is available in English and Traditional Chinese」那句不成立的話也改掉了。

F-02已修正

履歷頁的標題階層是壞的

about 與 projects 的中英四份檔案,# 降成 ###### 降成 ###

/about/ h1 × 7 → h1 × 1 /projects/ h1 × 7 → h1 × 1 階層恢復成 h1 → h2 → h3,不再跳級
F-03已修正

2023 年的殘稿

照你給的五個階段寫成佔位內容:選主題 → 填內容佈署 → 申請 Google 收錄 → 設定 SEO → 2026 年以 Claude 改寫。每段兩三句,標了「這篇是大綱,內容之後會再補完整」,你之後直接改就好。

F-04已修正

重複的死圖

依你指示保留 尤俊硯大頭貼-24.jpg、移除 avatar.jpg。保留的那張現在有了實際用途——F-07 的分享卡就是用它產生的。

F-05已修正

demo 頁搬遷

四個 demo 複製到 ycy1997alex-oss-projects/iThome-2026-Ironman/demo/,逐檔 md5 比對確認位元完全相同。個人網站原位置改成轉址頁。

/demo/flight-simulation/ → …/demo/flight-simulation/ 1624 B /demo/attention-battery/ → …/demo/attention-battery/ 1606 B /demo/dmn-glassbrain/ → …/demo/dmn-glassbrain/ 1612 B /demo/prompt_yt_financial/ → …/demo/prompt-yt-financial/ 1652 B └─ 順手改成連字號,解掉 F-09 轉址頁:meta refresh + canonical + location.replace + 可點的備援連結

這樣 Day04/Day05 已發布文章裡的 4 條連結不會斷,你也不用回頭去編輯已發布的文章。

注意oss-projects 整包是 MIT 授權。這四個 demo 進去之後預設就落在 MIT 底下,如果你不希望這樣,要在 demo/ 裡另外標示授權。

F-06診斷有誤

「343 KB 的圖示」其實不影響載入

我原本把它寫成效能問題,這是錯的。實際檢查頁面請求後:那三個大圖示全部只被 manifest 或 rel=apple-touch-icon 參照,只有在「加到主畫面/安裝」時才會下載,一般瀏覽根本不會抓。每次都載入的 favicon 是 736 B 與 2.3 KB,本來就沒問題。

而唯一能省下 60% 的做法(PNG-8 調色盤量化)會把琥珀色那隻眼睛壓成黃綠色——那正是這張圖之所以叫 odd-eyed 的地方。我把兩個版本並排在實際顯示尺寸下比對過,差異看得出來。

android-chrome-512x512.png 343 KB → 127 KB 眼睛褪色,且從不在載入路徑上 android-chrome-192x192.png 60 KB → 24 KB 同上 apple-touch-icon.png 53 KB → 22 KB 同上 實際每次載入的圖片只有:favicon-16 (736 B)、favicon-32 (2.3 KB)、首頁頭像

決定不動這三張。拿識別度換一批沒人下載的位元組是虧的。真正的載入成本在頭像,見 F-07 下方。若你之後仍想壓,裝 pngquantoxipng 的品質會比這裡能用的量化器好很多。

F-07已修正

分享預覽圖與頭像

尤俊硯大頭貼-24.jpg 做了 1200×630 的名片卡:圓形人像、中英姓名、職稱,加上你選的三個關鍵字「生醫訊號 · 醫療 AI · 航太工程」。og:imagetwitter:image 已改指向它,全站每一頁都吃得到。首頁頭像仍是那隻貓,兩者刻意分開。

順著這條線查下去,發現真正的效能問題在頭像:原圖 1024×1024/173 KB,但 CSS 只畫成 200 px,而且 alt="avatar" 對螢幕閱讀器毫無意義,也沒有 width/height 會造成版面位移。

頭像(每次載入首頁都會下載) 1024×1024 JPEG 173 KB alt="avatar" 無尺寸 ↓ 400×400 WebP 20.9 KB alt="Alex Yu" width/height 齊全 ↑ 88% 縮減,另附 32.9 KB JPEG 給不支援 WebP 的瀏覽器 分享卡 og-card.jpg 1200×630 55 KB

做法原圖移到 assets/ 交給 Hugo 處理,並覆寫 theme 的 avatar partial。產卡的腳本收在 tools/make_og_card.py,用的是 repo 相對路徑,之後想改字或換照片直接重跑即可,不會變成一張沒人知道怎麼來的圖。

F-08已修正

fragment 裡的 h1

兩個 fragment 的 h1 降成 h2,與另外三個一致。中英版共四個檔案都改了。/posts/call-up-list/h1 從 2 個變回 1 個。

F-09已修正

命名不一致

隨 F-05 一併解決。新位置叫 prompt-yt-financial,舊的底線網址保留為轉址頁,所以改名不會斷連結。

F-10已修正

Hugo 升版會斷的 API

themes/hugo-coder/layouts/_partials/header.html:33.Language.LanguageName 換成 .Language.Label。建置輸出現在是零警告。

F-11已修正

workflow 的過期註解

提到 Case_A 的三行刪掉,保留「此檔假設 Hugo 專案位於 repo 根目錄」那句。

F-12已修正

授權聲明

新增 LICENSE,內容與程式碼分開:文章與清單文字採 CC BY-NC 4.0,建站的 layouts/CSS/tools/workflow 採 MIT。人像照片與那張貓圖列為排除項、保留所有權利,theme 則指向它自己的 MIT。兩份 README 都加了授權段落。

你追加的三項

3 項
追加 1已修正

48rem 最佳閱讀寬度

這裡有個單位陷阱:hugo-coder 把 html 設成 font-size: 62.5%,所以這個專案裡 1rem = 10px。照字面寫 48rem 會得到 480px,比手機還窄。你想要的那個 48rem(Tailwind max-w-3xl 的慣例值)是 16px 基準下的 768px,換算到這裡是 76.8rem

另一個限制是不能直接還原 ecd82dd:那次 commit 順手拿掉了互動頁用來撐開版面的負邊界 hack,改由全站容器負責。整包 revert 會讓五個互動頁一起變窄。

.container 維持 min(96vw, 1720px) ← 互動頁需要 .content article > p, ul, … 76.8rem (768px) 置中 ← 只收散文 用直接子選擇器,所以: 互動頁根層 div.trip / .seto / .callup 不被選到 → 維持滿版 互動頁內部的 p 不是 article 的直接子元素 → 不受影響

依據行長過長時,視線換行會找不到下一行起點。一般建議每行 45–75 個西文字元,WCAG 1.4.8 以 80 字元為上限。本站 18px 內文下 768px 約為 42 個中文字一行。

追加 2已修正

圖片格式與載入最佳化

先量了「一次頁面瀏覽到底會下載哪些圖」,結論是只有頭像。處理結果在 F-07:173 KB → 20.9 KB WebP,補上 width/height 消除版面位移,altavatar 改成真正的名字。原圖移出 static/ 之後也不再被發布,等於連那 173 KB 都不會出現在網站上。

另外修掉 contact 頁的 ![image alt](...)——這個 alt 對螢幕閱讀器等於沒有,中英版分別改成 尤俊硯Alex Yu

沒做的沒有替內文圖片加 lazy loading。全站內文只有 contact 那一張圖,而且在第一屏,加 loading="lazy" 反而會拖慢它。

追加 3已修正

SEO 設定與 metadata

掃了建置後全部 100 個頁面。基礎設施本來就正確:hreflang 三組齊全、canonical 每頁都有、lang 屬性正確、標題無重複、sitemap 分語言、GA4 只注入一份。

找到一個真問題:about 與 projects 沒有 description,theme 於是拿內文開頭去填,產出 2063 字元的 meta description。Google 只會截斷,等於白白浪費這個欄位。

修正前 修正後 /zh-tw/about/ 2063 字元 → 57 字元 /about/ 782 字元 → 143 字元 /zh-tw/projects/ 503 字元 → 46 字元 /projects/ 485 字元 → 153 字元

沒做的19 個分類/標籤/作者列表頁共用站台預設 description。這類 taxonomy 頁本來就價值低,逐一寫描述的投報比不高,先留著。

驗證

改完之後實際跑過的
檢查結果說明
hugo build0 warn / 0 err0.64 秒。F-10 修好之後連原本那個 deprecation 警告也沒了。
英文站中文殘留0三個翻譯頁的 <div class=content> 區塊內中文字元數為 0。
fragment id 對應253 / 25364 + 90 + 99,中英逐一對應且順序相同,勾選狀態可跨語言沿用。
h1 數量1 / 頁about、projects、call-up-list、travel-checklist 全部收斂為 1。
demo 檔案完整性4 / 4 md5 相同搬到 oss-projects 後與原檔位元完全一致。
og:image100 / 100 頁全部指向新的 og-card.jpg。
meta description無超長已無超過 160 字元的頁面。
custom.css 產出兩條規則都在壓縮後仍含 76.8remmin(96vw,1720px)

兩個 repo 動工前工作樹都是乾淨的,所以全部改動都能用 git diff 檢視、git checkout 還原。我沒有執行任何 git addcommit