將Hexo Light主題的文章目錄改為折疊式TOC
注意
本文由 Gemini 3 Pro 語言模型產生。
前言
原本 Hexo Theme Light 的 TOC(目錄)在手機版排版不佳,在電腦版若使用懸浮定位又容易遮擋內容。為了徹底解決這個問題,我們決定採用「全平台統一」的設計:將目錄製作成一個可折疊的卡片區塊,嵌入在文章開頭。此版本特別針對 CSS 動畫的「幽靈高度」延遲問題進行優化,透過 JavaScript 動態計算高度,讓收合動作達到零延遲的滑順感。
修改步驟
1. 修改模板檔案
編輯 themes/light/layout/_partial/article.ejs。
將原本輸出 TOC 的位置替換為以下內容。
程式碼重點說明:
- 使用
scrollHeight取得目錄的精確高度,解決 CSSmax-height設太大導致收合時會有延遲感的問題。 - 使用
void body.offsetHeight強制瀏覽器重繪(Reflow),確保動畫能正確觸發。 - 利用
setTimeout配合 CSS 動畫時間(0.3s)切換按鈕文字。
