完整页面加载太慢,或者读者想省一点流量时,可以选择文字版。它是可选功能,主题先提供可读的轻量样式,站点再开启。默认仍显示完整版,由读者决定是否切换。

在站点配置里开启

把下面配置合并到 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 · 主题二次开发