原來這個佈景主題叫做 Astro Paper
起因
一開始是看到這期「13報」,介紹了 iOS/Mac 界的傳奇人物 Peter Steinberger,看完後只覺得哇賽這個人也太厲害了。順手點開他的部落格,發現這不就是我現在正在致敬的版型參考嗎XD
當時看了 Shipping at Inference-Speed 這篇,覺得這樣的風格閱讀起來特別舒服,加上文章內容也很有趣,就起心動念想要自己建一個Blog。不過那時候隨手就叫了 AI 開始幫我建立,也沒有仔細看他的部落格說明,沒注意到原來這居然是個佈景主題——Astro Paper。
但是頭都洗了,整個砍掉重來也不是辦法。於是決定直接把現有的 Astro 5 部落格主題換成 Astro Paper,順便看看 AI 能不能處理這個任務。
「換主題」,但不要換掉內容
目前的文章管理方式是 Astro Content Collections:src/content/posts/*.md,也就是典型的「內容是 Markdown、網站是 Astro 的 pages/layouts」。
與AI討論的結論:換 theme 的風險通常不在「樣式」,而在「資料模型」
- 主題通常預設它自己的 collection 名稱(例如
blog) - 主題可能期待不同的 frontmatter 欄位(例如
pubDatetime、featured、ogImage) - 主題會附帶一些額外頁面(tags、search、archives、rss)
所以修改的策略是:
- 保留既有 Content Collections 與 frontmatter schema(不改文章)
- 在頁面/元件層做「適配」:讓主題的版型吃得懂我現有資料
暗色模式:保留「防 FOUC」的 inline script
暗色模式如果處理不好,最容易出現「閃一下」:先以 light render,等 JS 跑完才切 dark。
目前的作法是:
- Tailwind
darkMode: 'class' BaseLayout.astro內有一段 inline script,會在首次繪製前就決定是否加上.dark
內容排版與圖片邊框:讓文字跟圖片回到可讀性
建站的時候就用 @tailwindcss/typography 來處理文章內容,所以這次也沒調整。
另外,原本就有一個內容規範:文章內所有圖片要有一致邊框(淺色/深色不同邊框色、6px 倒角、不加陰影)。
導入 Astro Paper 的設計語彙後,AI還協助做了兩件事:
- 把文章內容改用一個統一的 class(例如
app-prose)來集中管理排版 - 把圖片邊框規範整合進這個內容排版裡,避免散落在各處難以維護
這樣做的好處是:後續就算要改「主題色」或「內容排版」,只要改一個地方即可。
視覺效果預覽
看一下轉換後的視覺效果。淺色模式的首頁和 About 頁:


深色模式下的首頁和文章頁:


首頁:接受主題預設,不再硬維持舊的版型
原本首頁是「依年份分組」,看起來很有「歸檔感」;但 Astro Paper 的預設是更偏「近期文章列表」。
這次選擇接受主題預設,原因很簡單:
- 第一版先把整體視覺與資訊架構一致
- 等內容量上來後,再決定要不要加回年份分組(或改成 archives 頁)
一些還沒進行的部分
Astro Paper 本身通常會包含更多「部落格應有功能」:tags、search、rss、archives、OG image 等等。
這次沒有一口氣搞定,先把這幾個項目留作後續:
- Tags / Search / Archives 的路由與頁面
- RSS / OG image / sitemap 等 SEO 配套
- 文章欄位擴充(例如 featured、封面圖、更新時間)
小結
基本上就是我純粹出一張嘴,決定好修改的方向與範圍後,就讓 Codex 開工了。對,這次換成 Codex 來跑看看。改版完成的效果挺不錯,之後再接著微調細節吧!