回首上次維護自己博客站點的時間，已是 2021 年了。時光匆匆，兩年過去，這期間發生過太多的事情，我也經歷了許多變化。

從 2021 年的冬天起，我便萌生了「重新設計博客」的計畫，但這個計畫卻在反覆修改中一直未能完成。期間我曾嘗試用 Next.js 與 Gatsby 重構整個站點，從最基礎的樣式、佈局，而後到 Markdown 渲染、資源處理、自動化部署，都靠自己實現。在漫長的開發與打磨中，我逐漸發覺自己對於想要的樣式始終沒有一個確定的概念，於是這個計畫被一再擱置。

回歸初衷，我希望打造一個可以讓讀者的注意力回歸於內容本身，並無過多無用的 UI 元素（如卡片、陰影、圓角等）等分散注意力的因素，而又不至於過於簡陋的佈局與設計。我十分喜歡雜誌對與文本與圖片的佈局方式，但是會捲動的網頁與裝訂好的印刷品在如讀者的視線動線的這一點上並不能算作完全一致，因此還不能完全照搬。

2022 年 8 月，Astro 宣布 1.0 版本的發佈也讓我重新開始思考「自己是否在錯誤的方向上走了太遠」，我需要的可能只是一個靜態網站生成器（SSG），而非 React 框架⋯⋯

封面#

大部分的雜誌都會有封面，而封面的設計往往是本期雜誌的看點所在。又因為我平常喜歡用相機紀錄生活，時不時會有一些想要與大家分享的相片，把相片當作封面的想法便由此出現。

我為封面的圖片加上了視差效果，同時也保留了與封面內容相關聯的文章入口。

動畫效果#

在不會過多分散讀者注意力的前提下，我為頁面上的圖片和部份文本元素加上了出現時的動畫效果。如妳所見，這個站點上的大部分動畫效果均是由 GSAP 負責呈現的。我早期也曾在 React 專案中使用過 Framer 出品的 Motion，它們都可以為妳快速實現動畫效果，同時無需過多擔憂性能問題。不過自己手動實現動畫以了解其原理並嘗試優化性能，也是一件有趣的事情。

目錄#

對於長篇大論來說，有一個可以快速在內容中導航的目錄是很有必要的。我借助 Astro Markdown 中的 headings 信息自己實現了一個目錄，在閱讀下方的內容時也可以快捷的跳轉至其他小節。

閱讀進度#

在浮動目錄的下方，我添加了一個閱讀進度指示器，這樣也便於讀者快速了解自己閱讀的進度。

改進的圖文佈局#

在以往的設計中，我傾向於將圖片與文本區域的最寬邊緣對齊——這讓圖文在佈局上看起來十分整潔，但同時也帶來了一個新問題：過寬的文本行將影響閱讀體驗與可訪問性，因此文本區域的寬度上限並不會很寬，而較寬的圖片在較窄區域顯示時，其高度也會變得十分的低，進而影響到圖片的觀感。

部分站點傾向於在點擊時全螢幕顯示圖片，以彌補這一缺陷。我個人認為這樣便會要求讀者在閱讀時進行額外的交互才能看清更多細節，或是感受在全螢幕下最終「舒展」的圖片之衝擊。於我而言並不是一個很好的解決方案。

2023 年的當下，4K 與超寬螢幕逐漸普及，我們是否可以利用起來這個趨勢呢？如果能夠在行文間展示完整寬度的圖片的同時保留文本的最大寬度，是否就可以讓讀者在閱讀流中即刻感受到圖片的氣勢呢？

因此，我借助 CSS Grid 佈局，加入了全寬度的容器，以使得圖片可以突破文本區域寬度的限制，在全寬度下顯示，同時也不會影響到文本的最大寬度。

而在文章的 Markdown 文檔中，僅需添加如下指令（directive）：

![](./path/to/image.jpg)<!-- \breakout-full -->

這樣的好處是這條指令亦可被不支援此功能的 Markdown 解析器與渲染器直接忽略，以便正常處理其他部分。

除全寬度容器外，我依照斷點（breakpoints）寬度添加了更多種容器：

同樣，這些容器亦適用於文本段落：

芳草池塘，綠陰庭院，晚晴寒透窗紗。玉鉤金鎖，管是客來唦。寂寞尊前席上，唯愁海角天涯。能留否？酴釄落盡，猶賴有梨花。當年曾勝賞，生香薰袖，活火分茶。極目猶龍驕馬，流水輕車。不怕風狂雨驟，恰纔稱，煮酒箋花。如今也，不成懷抱，得似舊時那？

芳草池塘，綠陰庭院，晚晴寒透窗紗。玉鉤金鎖，管是客來唦。寂寞尊前席上，唯愁海角天涯。能留否？酴釄落盡，猶賴有梨花。當年曾勝賞，生香薰袖，活火分茶。極目猶龍驕馬，流水輕車。不怕風狂雨驟，恰纔稱，煮酒箋花。如今也，不成懷抱，得似舊時那？

芳草池塘，綠陰庭院，晚晴寒透窗紗。玉鉤金鎖，管是客來唦。寂寞尊前席上，唯愁海角天涯。能留否？酴釄落盡，猶賴有梨花。當年曾勝賞，生香薰袖，活火分茶。極目猶龍驕馬，流水輕車。不怕風狂雨驟，恰纔稱，煮酒箋花。如今也，不成懷抱，得似舊時那？

芳草池塘，綠陰庭院，晚晴寒透窗紗。玉鉤金鎖，管是客來唦。寂寞尊前席上，唯愁海角天涯。能留否？酴釄落盡，猶賴有梨花。當年曾勝賞，生香薰袖，活火分茶。極目猶龍驕馬，流水輕車。不怕風狂雨驟，恰纔稱，煮酒箋花。如今也，不成懷抱，得似舊時那？

段落註解#

在以往的寫作中，我時常會需要為文本中出現一些內容添加註解，這些註解往往是與當前段落所提及之事物相關的補充資訊。我曾模仿印刷品中以腳註形式出現的註解來實現網頁中的同樣元素，但我們是否能夠以更為直觀的方式呈現這些註解呢？

借助上一小節中所使用到的 CSS Grid，我增加了段落註解的功能。在 Markdown 文檔中，我們可以使用如下指令添加註解：

作為註解的段落<!-- \float-right -->

正文段落

同上，這樣也可以在盡可能不影響 Markdown 相容性的情況下實現段落註解。

Rehype 模組#

Astro 已經為我們提供了基本的 Markdown 功能，但為了實現上文提到的改進的圖文佈局與段落註解功能，我們仍然需要對其 Markdown 功能進行擴展。

不過，好在 Astro 使用了 Remark 與 Rehype 作為其對 Markdown 支援的底層核心，我可以通過自訂模組來實現上述功能。

自訂模組將在 Rehype 階段處理轉換過程中生成的抽象語法樹（AST）中的 Comment 節點，並將匹配的指令以 data- attributes 的形式添加到對應的節點上，以便後續的 CSS 規則匹配。

除此此外，我還編寫了用 <figure> 與 <figcaption> 包裝 <img> 元素的模組，以及重新生成 headings anchor 的模組。這一過程可謂是很有擴展的樂趣了。儘管無形中也增加了許多工作量⋯⋯

結語#

這次的設計與開發過程中，我又學到了許多新的知識，也從讀者的角度重新審視了諸多細節。我希望它夠為妳帶來更好的閱讀體驗，也希望妳能夠喜歡這個新的設計。