部落格第四版：swup.js 參戰
先看到了這個 Issue，又找到了他的部落格，再找到他的真部落格，哇這真是個和我完全不同世界的人，不過看了一下發現他有用 PJAX，然後就丟給 Claude 源碼問 PJAX 和 swup.js 有啥差，他回我這個：
Claude 回答
| Pjax（前段） | Swup 4.9.2 | |
|---|---|---|
| 切換機制 | XMLHttpRequest 抓頁面 → 直接替換 DOM (innerHTML/outerHTML) | fetch 抓頁面 → 走完整的視覺過場動畫流程再替換 |
| 動畫支援 | 無內建動畫概念，純粹「換內容」 | 有完整動畫生命週期：animatePageOut → renderPage → animatePageIn，會等 CSS transition/animation 結束才繼續（awaitAnimations 偵測 transitionend/animationend） |
| View Transition API | 沒有 | 支援瀏覽器原生 document.startViewTransition()（options.native） |
| Hook 系統 | 只有簡單的 pjax:send/pjax:complete 事件 | 完整的 Hooks 類別，有 25+ 種 hook（visit:start、animation:out:start、content:replace...），支援 before/replace/once/優先權排序 |
| 快取 | 無 | 內建 Cache class（Map 儲存頁面 HTML，可 set/get/prune） |
| Plugin 系統 | 無 | 有 use()/unuse()/findPlugin()，可擴充 |
| Visit 物件 | 無此抽象 | 每次導航建立 Visit 物件追蹤狀態機（state 1~10：pending→loading→animating→done/aborted） |
| 容器替換方式 | 用 selectors 對應 head/body 區塊，逐一 switch | 用 containers（預設 #swup）比對新舊 DOM，replaceWith 整塊替換，並支援 data-swup-persist 跨頁保留元素 |
| History 管理 | 基本 pushState/popState | 更細緻，含 currentHistoryIndex 判斷前進/後退方向 |
| URL 處理 | 字串處理 | 專屬 class extends URL 封裝 |
一句話：Pjax 是「輕量換內容」的工具；Swup 是「換頁 + 動畫過場」的完整框架，多了動畫等待機制、hook 生命週期、快取與 plugin 生態，複雜度高一個量級。
其實早就大概知道但是又問了一次，看完之後突然心血來潮想說用 swup 做一個 Hugo 網站看起來會怎樣，就下了這個 prompt:
用swup建立一個有完整換頁效果的部落格。
是以文字內容為主的部落格，內容置中，畫面乾淨清晰，沒有雜物干擾，純粹閱讀體驗。因此換頁效果應該符合此原則。
以hugo完成：你需先用apt安裝hugo，然後hugo new project, hugo new theme完成。
swup如果有不知道使用方式的地方，則git clone閱讀swup文檔。只能讀文檔，不能讀源碼。
等了一陣子結果出來了...AI 好強，而且一看甚至還覺得不錯，外觀美觀大方比現在的好看，行數更少 HTML CSS 都更清晰，瀏覽得益於 swup 加持還更順暢，那好像沒啥理由再留原版...於是第四版就這麼稀里糊塗的誕生了。
大字體，高對比，清晰典雅，AJAX 流暢換頁，代碼行數甚至還更少，這有點東西，到底有多少呢，HTML 從 800 行掉到只有 300 行，這有點太強了吧。
相關文章：部落格三次迭代