有段时间,我几乎每发完一篇文章,都会在几天后发现新的小问题。
有时是 description 忘了写,有时是写了但长度不合适;有时是标题太长,搜索结果里显示得别别扭扭;读书笔记那边更烦,明明文章已经写完,还得去 _sidebar.md 里补链接。忙起来漏掉一两处,过几天回头看,才会想起“这篇怎么又没配好?”
最开始我还觉得这只是小事。直到 LearnData 的内容涨到 200 多篇,我才意识到,这些小事根本不是小事。它们重复、机械、分散,却会持续打断人,逼着你把本该用来写内容的时间,花在一遍遍检查和返工上。
]]>有段时间,我几乎每发完一篇文章,都会在几天后发现新的小问题。
有时是 description 忘了写,有时是写了但长度不合适;有时是标题太长,搜索结果里显示得别别扭扭;读书笔记那边更烦,明明文章已经写完,还得去 _sidebar.md 里补链接。忙起来漏掉一两处,过几天回头看,才会想起“这篇怎么又没配好?”
最开始我还觉得这只是小事。直到 LearnData 的内容涨到 200 多篇,我才意识到,这些小事根本不是小事。它们重复、机械、分散,却会持续打断人,逼着你把本该用来写内容的时间,花在一遍遍检查和返工上。

然后我给自己定了个原则:凡是重复到让我烦的事情,就不该再用手做。于是我写了 3 个脚本,再配合 AI,把博客维护里最琐碎的一部分接管掉:构建时自动生成 llms.txt,批量审计全站 SEO,把问题整理成 JSON 报告交给 AI 修复,读书笔记写完还能一键更新侧边栏。
第一次完整跑通,只花了二十分钟。之后我终于可以把精力放回内容本身,而不是那些没完没了的维护杂活上。
本文是 LearnData 系列的第三篇。第一篇介绍了把博客变为知识库的理念,第二篇分享了笔记搜索、本地定位等进阶技巧。这一篇继续往前走,解决的是另一个更现实的问题:当文章和笔记越来越多,如何把重复、机械、容易遗漏的维护工作自动化。

最先让我觉得该补上的,是 llms.txt。
一如搜索引擎依赖 robots.txt,AI 也需要对应的引导文本。llms.txt 用 Markdown 格式列出站点所有页面的标题、描述和链接,让大语言模型能快速理解站点结构。
它的格式非常简单:
# LearnData 开源笔记
> 开源工具、效率方法、心理学探索的自我提升笔记
## Pages
- [Rclone 远端图床本地化管理方案](https://newzone.top/_posts/...) - 利用 Rclone 建立自动化工作流...
- [吃掉那只青蛙](https://newzone.top/reading/#/0_效率与习惯/吃掉那只青蛙) - 核心是每天先完成重要的工作...
但几百篇文章总不能手写吧。于是我写了 llms-txt.js,在每次构建时自动扫描所有 Markdown 文件,从 frontmatter 提取标题和描述(没有 frontmatter 的读书笔记则从 H1 和正文首段提取),生成完整索引。
这个脚本已集成在构建命令中,pnpm docs:build 完成后会自动在 dist/ 目录生成 llms.txt,随站点一起部署。站点信息从 VuePress 配置文件自动读取,零配置。
真正最烦的,还是 SEO 元数据检查。
手动检查有多痛苦?打开一篇文章,看 title 是不是太长,description 是不是在 120-160 字符之间,有没有用「本文介绍了……」这种搜索引擎不喜欢的模板化开头。一篇看下来只要一分钟,几百篇就是好几个小时,而且下次新增文章后还得再来一遍。
我需要的是一个脚本,跑一次就能告诉我哪些文件有问题、问题是什么、该怎么改。于是有了 seo-audit.js。
运行 pnpm seo:audit,它会扫描全站 Markdown 文件,对每篇文章按规则打分(满分 100):
| 检查项 | 扣分 | |
]]>注意
即使是低频使用,我在一个月后也收到了 Cloudflare 50 美元的账单。如果你也打算用 Workers 方案,请务必关注用量和计费。
OpenClaw 是一个开源的 AI 自动化框架,可以通过聊天指令驱动 Agent 完成浏览器操作、文件读写、邮件收发等任务——相当于给你配了一个 7×24 在线的数字助理。最近一个月,我不断被它的消息轰炸,似乎无所不能。于是决定亲手部署一套,看看它到底能帮我做什么。
]]>注意
即使是低频使用,我在一个月后也收到了 Cloudflare 50 美元的账单。如果你也打算用 Workers 方案,请务必关注用量和计费。
OpenClaw 是一个开源的 AI 自动化框架,可以通过聊天指令驱动 Agent 完成浏览器操作、文件读写、邮件收发等任务——相当于给你配了一个 7×24 在线的数字助理。最近一个月,我不断被它的消息轰炸,似乎无所不能。于是决定亲手部署一套,看看它到底能帮我做什么。

本文记录的是基于 Cloudflare Workers 的部署方案,适合想低成本尝鲜、不想折腾本地环境的用户。
使用 cloudflare/moltworker 可以将 OpenClaw 托管在 Cloudflare Workers 上,无需自备服务器。
此方案需订阅 Cloudflare Workers Paid 计划(5 美元/月)。需要注意,这只是起步价,高频使用会产生额外费用(详见 GitHub 讨论:What's the cost running it 24/7 for a month)。作为一个 24 小时在线的 AI 服务,每月 5 美元的起步成本尚可接受,但务必留意实际用量。
点击 cf 一键部署 开始初始化。
重要
务必修改并妥善保存 MOLTBOT_GATEWAY_TOKEN,这是后续进入管理后台的唯一凭证。

部署过程约需十分钟,期间可点击「继续处理项目」跳过等待页面。

访问网页界面需要配置 CF_ACCESS_AUD 和 CF_ACCESS_TEAM_DOMAIN 两个变量。
创建应用:进入 Zero Trust → Access → Applications,添加一个 Self-hosted 应用。

设置域名:
moltbot-sandbox。配置策略:系统通常会自动创建 moltbot-sandbox - Production 策略,默认通过邮箱验证码登录。
获取变量:
xxxxxx.cloudflareaccess.com。OpenClaw 需要 R2 存储运行状态,需配置以下三个变量:
CF_ACCOUNT_IDR2_ACCESS_KEY_IDR2_SECRET_ACCESS_KEY操作步骤:
获取 Account ID:在 Cloudflare 侧边栏进入 R2 → Overview,右侧 Account Details 中即可找到 CF_ACCOUNT_ID。

创建 API 令牌:点击 Manage R2 API Tokens → Create API Token。
设置权限:权限选择 Object Read & Write,建议通过 Specific Bucket 限制在 moltbot-data,避免过大授权范围。

保存密钥:创建成功后,立即记录 Access Key ID 和 Secret Access Key。

警告
修改 Token 时请务必核对变量名称。如果不慎修改了 Build Token,会导致 Worker 构建失败。
回到 Workers → Settings → Variables and Secrets,填入上述 5 个变量后,点击 Deploy 重新部署。

部署完成后,通过以下地址访问 Worker:
https://moltbot-sandbox.xxxxxxxx.workers.dev?token=MOLTBOT_GATEWAY_TOKEN
通过 Cloudflare Access 邮箱验证后,即可进入管理后台并接受 Pairing Requests:
https://moltbot-sandbox.xxxxxxxx.workers.dev/_admin/

部署完成后,通过聊天指令与 Bot 交互。常用操作如下:
查看或切换模型:
/model minimax/MiniMax-M2.1
设置开机自启模型(防止 Worker 重启后被重置):
set model minimax/MiniMax-M2.1
远程终端连接:
openclaw gateway login --url https://moltbot-sandbox.xxxxxxxx.workers.dev
clawdbot configure --section skills
在实际测试中,我踩了不少坑,总结如下:
set model 开机命令强制指定,而非依赖配置文件或后台 UI。CF_ACCESS_AUD 或 CF_ACCESS_TEAM_DOMAIN 填写有误,优先排查这两个变量。折腾了一圈 Cloudflare Workers 之后,我的判断是:
OpenClaw 目前还不是一个能「即刻提升效率」的工具。
现阶段,它更像是一个为 AI 自动化搭建的系统底座,而非开箱即用的产品。如果你没有明确的、可标准化的长流程需求,OpenClaw 带来的只会是维护成本,而非生产力红利。
Cloudflare Workers + OpenClaw 适合以下场景:
但如果你期望它「部署完就自动干活」,或者需要浏览器自动化等完整功能,Workers 方案会让你感到落差——这时候应该考虑本地部署方案。
]]>模型与插件构成了 Stable Diffusion 的核心生态。
本文重点解决三个问题:
模型与插件构成了 Stable Diffusion 的核心生态。
本文重点解决三个问题:
Civitai(C 站) 汇集了全球主流的 Stable Diffusion 模型,涵盖二次元、写实、人像、插画及概念设计等多个方向。
下载模型后,需将其存入 WebUI 指定目录方可生效。
决定画面的整体风格与基础能力。
.safetensors / .ckptmodels/Stable-diffusion在不改变大模型基底的前提下,注入特定人物、画风、服饰或概念(如机甲、水墨风)。
.safetensorsmodels/Lora<lora:mecha_style:0.8>。相当于“调色滤镜与解码器”,用于修正色彩饱和度与灰度问题。
models/VAE可通过 Settings → User interface → Quicksettings list 添加 sd_vae,以便在顶部栏快速切换。
]]>提示:Docker 版部署路径通常位于
data目录下,如stable-diffusion-webui-docker/data/StableDiffusion,需据实调整。

相比强调“开箱即用”的 WebUI,ComfyUI 的核心优势在于效率与硬件包容性。其内置的显存—内存交换机制(Smart Memory Management),能动态加载模型权重,将暂时闲置的数据卸载至内存。这种“以时间换空间”的策略,让 4GB 显存的老旧设备也能运行 SDXL 甚至 FLUX 等大模型,极大地降低了高画质生成的硬件门槛。
]]>
相比强调“开箱即用”的 WebUI,ComfyUI 的核心优势在于效率与硬件包容性。其内置的显存—内存交换机制(Smart Memory Management),能动态加载模型权重,将暂时闲置的数据卸载至内存。这种“以时间换空间”的策略,让 4GB 显存的老旧设备也能运行 SDXL 甚至 FLUX 等大模型,极大地降低了高画质生成的硬件门槛。
此外,ComfyUI 拥有极活跃的扩展生态。不仅兼容最新的扩散模型、SVD 视频生成与各类 ControlNet 控制节点,还能无缝接入 OpenAI、Gemini 等云端 API。本地算力不足时,可以通过节点将任务分发至云端,实现“混合算力”工作流。简言之,ComfyUI 不做预设,而是提供构建流水线的能力。

很多新手被满屏的连线劝退,误以为必须精通原理才能使用。这是最大的误解。
ComfyUI 的生态充满了现成的高质量工作流。作为创作者,首要任务是使用,而非制造。
在官方界面中,点击「模板」,你就能获得一套标准的 Text to Image 流程。填入提示词,点击运行即可生成。

当需要进阶功能时,直接去 Civitai 下载大家分享的 JSON 工作流文件,拖入窗口,使用 ComfyUI Manager 补全缺失节点,即可直接运行。
别被连线吓倒。连线是留给“开发者”的;对于“使用者”,ComfyUI 往往比 WebUI 更简单——因为它所见即所得,逻辑一目了然。

ComfyUI 支持 Windows、Linux、macOS。Windows 用户请直接下载 官方便携版 (Portable Standalone)。解压即用,自带独立 Python 环境,无需配置复杂的系统依赖。
解压后会看到多个启动脚本,请按需选择:
run_nvidia_gpu.bat:适合绝大多数 N 卡用户。run_nvidia_gpu_fast_fp16_accumulation.bat:如果你是 20/30/40 系显卡,这个脚本开启了 FP16 半精度累积计算,能显著提升速度并降低显存占用。(质量略降)run_cpu.bat:仅用 CPU 运行,速度较慢。国内直连 HuggingFace 速度较慢,推荐利用 ModelScope (魔搭社区) 镜像。
huggingface.co 替换为 modelscope.cn/models,即可享受满速下载。这是 ComfyUI 的“应用商店”,支持在界面内搜索、安装自定义节点,并能一键补全工作流缺失的插件。
安装:进入 ComfyUI/custom_nodes 目录,打开终端(CMD),运行:
git clone https://github.com/ltdrdata/ComfyUI-Manager.git
使用:重启后菜单栏会出现 Manager 按钮,点击 「Install Missing Custom Nodes」 即可自动识别并安装当前工作流缺少的组件。
在生成高分辨率图像或视频时,物理内存极易枯竭导致闪退。强烈建议手动设置 Windows 虚拟内存。
推荐设置:初始大小与最大值均设为 32768(32GB) 或更高。
操作路径:
Win + R 输入 sysdm.cpl 打开系统属性。设置完成后建议重启一次(或至少重启 ComfyUI),避免旧的内存策略仍在生效。

ComfyUI 自带 HTTP API。只要程序正常启动,你就已经“开启”了 API。
本机访问:默认地址是 http://127.0.0.1:8188。
局域网访问(可选):启动时加上 --listen 0.0.0.0,例如:
python main.py --listen 0.0.0.0 --port 8188
如果你用的是 Windows 便携版,思路相同:在对应的 run_*.bat 启动命令后追加 --listen 0.0.0.0 即可。
建议仅在可信内网使用,并配合防火墙限制来源;不要把 8188 端口直接暴露到公网。
API 调用的关键,是拿到“API 格式”的工作流 JSON(比普通保存更干净,不含界面坐标等元数据)。
workflow_api.json。
注意: 这个 JSON 文件与普通的
Save文件不同,它只包含节点 ID (class_type) 和输入参数 (inputs),没有界面坐标信息。
拿到 workflow_api.json 后,就可以基于 http://127.0.0.1:8188 通过以下端点提交任务与查询结果:
/prompt:发送工作流任务到队列。/history/{prompt_id}:获取任务执行结果。/view:获取生成的图片文件。/ws:用于实时监听生成进度和获取执行状态。尽管 ComfyUI 优化出色,但流畅运行 SVD 等视频模型仍需 12GB 以上显存。
对于高阶创作,不必执着于本地硬件。目前云端算力成本已大幅下降,将 ComfyUI 部署在云端(如 AutoDL、阿里云等)往往是更理性的选择——显存不再是瓶颈,生成效率可提升数倍。

ComfyUI 的核心价值不在于你拥有多少显卡,而在于掌握“工作流逻辑”。 一旦理解了节点间的流转关系,无论在本地 4090 还是云端 A100,你都能构建出独一无二的创作流水线。
]]>

为此,我采用了一种更通用、可控的方案:「云端下行同步 → 本地批量压缩 → 上行覆盖同步」。此举既能压缩历史存量,又能建立一套可自由管理的图床库。
七牛云兼容 AWS S3 协议,可直接通过 Rclone 的 S3 Provider 访问,无需额外插件。
Rclone 是单文件命令行工具,无须安装,配置环境变量即可使用。
访问 Rclone 官网下载页,下载适用于 Windows 的 Intel/AMD - 64 Bit 压缩包。
将解压后的文件置于固定目录,例如 C:\rclone\,确保该目录下包含 rclone.exe。
Win 键,搜索「环境变量」,进入「编辑系统环境变量」。Path。C:\rclone\。启动 PowerShell 或 CMD,执行:
rclone --version
输出版本号即表示配置成功。
注意:日常使用建议避免以管理员权限运行 PowerShell,以免权限冲突导致 Rclone 异常。
前置准备信息:
执行配置命令:
rclone config
输入 n 新建远程连接(New remote)。
name:命名连接,例如 qiniu。
Storage:选择 S3(Amazon S3 Compliant Storage)。
provider:选择 Qiniu(Qiniu Object Storage)。
access_key_id:输入 AK。
secret_access_key:输入 SK。
region:留空回车。
endpoint:根据区域填写对应的接口地址(Endpoint):
| 区域 | Endpoint | | :

于是我尝试将密码管理方案迁移至 Bitwarden,并选择通过自托管 Vaultwarden 来替代官方订阅服务。Vaultwarden 是一个由社区维护的轻量级服务端实现,不仅兼容 Bitwarden 核心协议,更能完美适配官方客户端。其资源占用极低,可以部署于 NAS 或树莓派。彼时的我认为,这似乎是在“同步便利性”与“数据掌控权”之间找到的一个完美平衡点。
]]>
于是我尝试将密码管理方案迁移至 Bitwarden,并选择通过自托管 Vaultwarden 来替代官方订阅服务。Vaultwarden 是一个由社区维护的轻量级服务端实现,不仅兼容 Bitwarden 核心协议,更能完美适配官方客户端。其资源占用极低,可以部署于 NAS 或树莓派。彼时的我认为,这似乎是在“同步便利性”与“数据掌控权”之间找到的一个完美平衡点。
与 1Password、LastPass 等主流方案一致,Bitwarden 采用标准的「服务端 + 客户端」架构。所有凭据由云端(或自托管服务端)统一分发,实现了真正的实时多端同步。相比 KeePass 须时刻惦记“修改后同步数据库文件”的繁琐,Bitwarden 彻底抹平了这一认知负担。
Bitwarden 内置了完善的密码健康度分析、弱密码预警及泄露检测功能。它将分散的账户风险通过仪表盘集中呈现,方便用户及时处置潜在隐患。

无论是在浏览器扩展、桌面端还是移动 App,Bitwarden 都保持了高度统一的 UI 设计与交互逻辑。相较于 KeePass 浓重的“极客工具感”,Bitwarden 的操作路径更为清晰直观,即便是非技术用户也能迅速上手。

尽管纸面参数看似无懈可击,但在高频使用的真实场景中,一系列体验落差开始显现。
Bitwarden 的条目与文件夹强制依赖名称(A-Z)排序,完全缺失了 KeePass 中灵活的“自由拖拽排序”功能。若想将高频账号置顶,或按照个人习惯组织列表顺序,只能通过极其笨拙的重命名方式变相实现。
Bitwarden 的安全策略相对固化,例如对主密码复杂度的强制校验及繁琐的修改流程。相比之下,KeePass 赋予了用户对数据库加密算法、迭代次数及密钥文件组合的完全控制权,这种“丰俭由人”的开放性是 Bitwarden 难以企及的。
选择自托管 Vaultwarden,就意味着你得自己抗下服务器运维的苦活。相比之下,KeePass 搭配坚果云、OneDrive 等成熟的 WebDAV 服务,稳定性反而更有保障。毕竟个人的 NAS 或服务器难免遇到断电、断网或者硬盘故障。

折腾一圈之后,两者优劣已十分清晰:
| 维度 | Bitwarden | KeePass | | :
]]>帮你在客厅的大电视上,以极低的延迟畅玩书房高配电脑里的 3A 大作。

简单来说,就是把电脑(被控端)的画面实时传输到电视/手机/平板(控制端),并把手柄/键鼠的操作回传给电脑。相比 Steam Link,这套方案延迟更低、画质更好,支持 HDR 和 120Hz,是目前体验最好的局域网串流方案。
]]>帮你在客厅的大电视上,以极低的延迟畅玩书房高配电脑里的 3A 大作。

简单来说,就是把电脑(被控端)的画面实时传输到电视/手机/平板(控制端),并把手柄/键鼠的操作回传给电脑。相比 Steam Link,这套方案延迟更低、画质更好,支持 HDR 和 120Hz,是目前体验最好的局域网串流方案。
安装 Sunshine。安装完成后,Sunshine 会自动在后台运行。
安装 Moonlight。
https://localhost:47990),输入这个 PIN 码完成配对。很多新手遇到的最大问题是:电脑显示器是 1080P,电视是 4K,怎么让游戏在电视上以 4K 运行?
这里有三种方法,推荐程度依次递增:
这是最简单的方法,Moonlight 会告诉 Sunshine "我想要什么分辨率的画面"。
4K (3840x2160) 或 1080p。60 FPS(更稳定)或 120 FPS(更流畅,需网络支持)。如果你想让电视拥有完美的 4K HDR 体验,而不受物理显示器限制,安装 Sunshine 虚拟显示器驱动是最佳选择。
在 Sunshine 后台手动指定分辨率。
localhost:47990) -> Configuration。虽然理论上 5G Wi-Fi 带宽足够,但在我的实际测试中,无线连接的稳定性依然是最大瓶颈。
测试环境 1:同一房间,距离路由器约 3 米,使用 5G Wi-Fi。 结果:依然存在间歇性卡顿,即使我尝试降低分辨率和帧率,流畅度也没有达到完美预期。
测试环境 2:书房与客厅隔着两堵承重墙。 结果:卡顿明显,基本无法正常游玩。
结论: 虽然 Sunshine + Moonlight 方案上限很高,但对网络环境(尤其是延迟抖动)非常敏感。如果希望获得“如本地般丝滑”的体验,有线连接 依然是不可替代的终极解决方案。如果条件受限必须用 WiFi,请做好心理预期,或者尝试升级到更高端的 WiFi 7 路由器并独占频段。
]]>许多用户开机后都会遇到 Notion 自动启动却一片空白的现象。无论归咎于网络波动还是程序响应延迟,这种「死机般」的体验都极度影响使用好感。
对此,最彻底的解决思路只有一条:完全禁用 Notion 原生自启,转为通过脚本手动延时启动。

许多用户开机后都会遇到 Notion 自动启动却一片空白的现象。无论归咎于网络波动还是程序响应延迟,这种「死机般」的体验都极度影响使用好感。
对此,最彻底的解决思路只有一条:完全禁用 Notion 原生自启,转为通过脚本手动延时启动。

许多用户试图在 Notion 设置中关闭“开机启动”,却往往徒劳无功。事实上,该选项并未直接展示在设置面板中,而是隐藏在任务栏托盘图标的右键菜单里,名为「登录电脑时打开 Notion」。

更令人沮丧的是,这个开关存在明显缺陷——即便用户取消了勾选,重启电脑后它往往会自动复原。这一点在 Reddit 上已被大量用户证实。
既然软件内部的软开关失效,就必须通过 Windows 系统层级进行硬性管制。
Ctrl + Shift + Esc)。
此操作能从系统底层切断 Notion 的自启权限,彻底根除白屏困扰。
禁用自启虽然解决了白屏,但也意味着每次开机都需要手动打开软件。若通过脚本实现延时启动,则可兼顾“自动化”与“稳定性”——让 Notion 在系统和网络完全就绪后再运行。
新建一个文本文档,填入以下代码,并将文件后缀名修改为 .bat(例如 NotionDelay.bat):
@echo off
:: 等待 60 秒,确保网络连接就绪
timeout /t 60 /nobreak
:: 启动 Notion(请根据实际安装路径调整)
start "" "%LOCALAPPDATA%\Programs\Notion\Notion.exe"
exit
提示:如果不确定 Notion 的具体安装路径,可在桌面 Notion 图标上点击 右键 -> 属性 -> 目标 进行查看。
Win + R 打开运行窗口。shell:startup 并回车,系统将打开「启动」文件夹。.bat 文件(或其快捷方式)放入该文件夹内。
配置完成后,脚本将在每次开机时自动运行并等待 60 秒。待系统负载稳定、网络畅通后,脚本才会唤起 Notion,从而确保软件界面极速加载,彻底告别白屏。
]]>PC 端的网络往往充满了变数:公司内网策略、代理软件、Hosts 修改、DNS 污染等等。这些因素都可能导致请求失败,而在开发者自己的电脑上却难以复现。

PC 端的网络往往充满了变数:公司内网策略、代理软件、Hosts 修改、DNS 污染等等。这些因素都可能导致请求失败,而在开发者自己的电脑上却难以复现。

为了排除这些干扰,我通常会选择使用手机(蜂窝数据)来进行测试。这是一个相对“纯净”、独立的网络环境。但随之而来的痛点是:手机浏览器虽然环境纯净,却缺乏 PC 浏览器那样强大的 Network 面板,无法直观看到具体的请求细节和报错信息。
本文介绍一种我常用的方案:让手机走纯净的网络环境,通过 USB 连接电脑,在 PC 端的 DevTools 中查看手机上的网络请求。
适用于 Android 手机 + Windows / Mac 电脑。
用数据线连接手机和电脑
手机端切换 USB 模式为「传输文件(MTP)」或「传输照片(PTP)」
电脑端打开 Chrome,地址栏输入:
chrome://inspect/#devices
勾选 Discover USB devices,等待设备出现
在手机 Chrome 打开目标页面,电脑端点击 Inspect

现在你可以在 DevTools 的 Network 标签页中,实时查看手机发出的所有请求。

适用于 iPhone + Mac 电脑(Windows 暂不支持)。
USB 调试是物理连接行为,与网络无关。如果设备未显示,按以下顺序排查:
| 问题 | 解决方法 | |
]]>一开始我尝试通过 CSS 强制锁定组件宽高(min-width / min-height)缓解偏移,但这牺牲了代码的可维护性。为此,我开始尝试 Ant Design 官方提供的 zeroRuntime 方案。

一开始我尝试通过 CSS 强制锁定组件宽高(min-width / min-height)缓解偏移,但这牺牲了代码的可维护性。为此,我开始尝试 Ant Design 官方提供的 zeroRuntime 方案。

本文记录了我在使用 Ant Design zeroRuntime 过程中遇到的核心问题、踩过的坑,以及最终为什么选择了 「只使用 CSS + 单一主题」 这一方案。
在排查过程中,我发现了一个关键事实:
antd/dist/antd.css 中大量使用 var(--ant-*)
但这些 CSS 变量并不存在于任何静态 CSS 文件中
原因在于 Ant Design v6 的样式机制:
--ant-* 这类 CSS 变量是:
对于 Docusaurus 这类预渲染的静态 HTML 来说:
即使已经引入了 antd/dist/antd.css,
只要 CSS 变量依赖运行时注入,首屏 HTML 本身仍然“感知不到完整样式”。
zeroRuntime 的核心目标非常明确:
在构建阶段生成完整样式,而不是依赖运行时 CSS-in-JS 注入
官方文档对此的描述是: zeroRuntime 会在构建时,根据配置生成一份完整、可直接使用的 CSS 文件。
具体表现为:
genAntdCss.mjs(或类似脚本)theme、token 配置不再生成或注入样式
组件默认假设:
所有样式已经存在于页面中
这直接带来一个非常重要的结论:
使用 zeroRuntime 后,所有样式相关配置必须在构建期确定
这是使用 zeroRuntime 必须接受的现实边界。
themeConfigProvider 设置 locale(不影响样式)ConfigProvider 动态设置 themetheme.useToken()componentSize 等样式相关 token一句话总结:
zeroRuntime = 样式在构建期“完全写死”,JS 不再参与样式生成
这并不是限制,而是 zeroRuntime 的设计前提。
在启用 zeroRuntime 时,有一个非常容易忽略、但影响极大的配置点:
cssVar: {
key: "aishort";
}
这个 key 的作用是:
作为 Ant Design CSS 变量的命名空间标识。
⚠️ 必须保证以下两处完全一致:
如果不一致:
一个非常简单的判断方法:
刷新页面是否出现样式闪动?
我曾尝试过生成 浅色 + 深色两套 CSS,并在运行时进行切换。
结论非常明确:
复杂度极高,不值得投入。
主要问题包括:
多套 CSS 同时存在时:
即使切换主题:
为了解决变量覆盖问题:
可维护性和可预测性急剧下降
最终结论是:
zeroRuntime 并不适合运行时多主题切换
因此目前站点仅保留 单一深色主题,不再提供主题切换能力。
Ant Design v6 提供了大量基于 ConfigProvider 和 theme.useToken 的定制能力。
但在 zeroRuntime 模式下:
这意味着:
本质上,这是一次明确的取舍:
用灵活性,换取首屏性能和样式稳定性
zeroRuntime 并不是一个“无脑开启就能提升体验”的方案,它更像是一个 为静态站点和性能极致优化而设计的工程取舍。
它确实解决了:
但代价同样明确:
如果你的项目:
那么 zeroRuntime 是值得使用的方案。
但如果你需要:
那么就必须接受 CSS-in-JS 带来的运行时成本, 或者等待 Ant Design 在未来提供更成熟的解决路径。
]]>