完整頁面載入太慢,或者讀者想省一點流量時,可以選擇文字版。它是可選功能,主題先提供可讀的輕量樣式,站點再開啟。預設仍顯示完整版,由讀者決定是否切換。

在站點設定裡開啟

把下面設定合併到 config.yml 既有的 site 裡,不要再新增一個同名根節點:

site:
  dataSaver:
    enabled: true
    debug: false
    mode: auto
    detectSlowConnection: true
    respectBrowserPreference: false
    promptAfterMs: 5000
欄位 作用
enabled 開啟等待與文字版流程,預設 false。
mode: auto 從完整版開始,讀者已有明確選擇時沿用其選擇。
detectSlowConnection 首屏仍在等待資源時提供文字版入口,不依網路速度標籤自動切換。
promptAfterMs 延遲提示門檻,5000 表示五秒;有效範圍 100–60000。
respectBrowserPreference: false 不讓瀏覽器省流提示替讀者決定初始模式。
debug: false 正式站點關閉空值 ?data-save 預覽入口。

已儲存的讀者選擇優先於站點的自動起始模式。mode: text、mode: full 可以改變設定的起始偏好,上面的流程不需要它們。

由主題定義輕量呈現

在目前主題的 theme.json 裡合併 dataSaver:

{
  "name": "my-theme",
  "renderer": "layouts/layout.html",
  "templateEngine": "edgepress-partials-v1",
  "dataSaver": {
    "stylesheet": "data-saver-theme.css",
    "scripts": [],
    "layoutStyles": ["style.css"]
  }
}

樣式表和指令碼路徑相對於主題的 assets/。layoutStyles 列出共享已發布 CSS,建置時去掉字型宣告和含 URL 的宣告,保留導覽、列、卡片和頁尾的實際版面;輕量樣式再補充字型和顏色。標題、文章摘要、時間、說明文字和鍵盤焦點都要能用。

文字版使用系統字型,暫緩圖片、示範影片、文件引擎與可選服務元件。讀者可以單獨載入需要的媒體,也可以返回完整版。圖表和截圖仍需有用的文字說明,省流不能把理解文章所需的資訊一起省掉。

服務同意與載入分開

同意服務不等於下載全部元件。服務請求仍然需要目前逐項同意,以及載入該元件的實際需求;遠端文件還要允許 CORS。保留扁平服務清單和每項資料揭露,不使用分類總開關。

主題動態媒體需要在賦值 URL 之前呼叫 window.edgepressDataSaver?.deferMedia(element, activate, description),由 activate 在實際請求時賦值;省流能力關閉時也要有正常載入的後備分支。完整版的非必要指令碼加上 data-data-optional。先給圖片設定 src 再隱藏,已經來不及避免請求。

檢查等待畫面與跳轉

把實際資源傳輸限制到約 100 KB/s,開啟新頁面,在完整版樣式和媒體尚未載入完時切換文字版。檢查等待畫面的控制項能否用鍵盤操作,進度是否來自已完成資源,晚到的資源是否保持讀者選擇,文章跳轉後是否沿用選擇。查看字型、圖片、影片與元件的請求紀錄,僅看元素隱藏無法證明省了流量。

也要檢查返回完整版、手機頁尾邊界和停用 JavaScript 的頁面。debug: true 允許空值 ?data-save 測試入口;關閉時會跳轉到目前語言的靜態 404 頁面。這種瀏覽器跳轉不能證明託管平台回傳了 HTTP 404。測試後保持 debug 為 false。

各站的命令入口放在自己的 tools/,回歸測試放在 tests/。本站可執行 npm run test:data-saver 和 npm run verify:performance;後者使用冷快取、gzip、100 KB/s 和 150 ms 延遲,分別記錄首次內容繪製與正文可讀時間。通用實作由固定版本的寫文建站相依套件提供,佈景主題開發者可以按公開工具說明設定自己的頁面路徑與語言,不需要取得本站原始碼。驗證使用本機匿名模擬回應,不代表線上服務或發布帳號已經檢查。

寫作與 Pages · 佈景主題二次開發