MoeDove Cloudflare Error Pages

一组参考 moedove.com 首页视觉系统制作的 Cloudflare 自定义错误页。所有生产页只依赖本仓库中的 CSS 和压缩图片，Cloudflare 抓取时可以将这些资源内联到自定义错误资产中。

本地预览

直接打开 index.html，或在仓库目录启动静态服务器：

python3 -m http.server 4173

然后访问 http://localhost:4173/。顶部菜单可切换截图中列出的 9 类页面。

页面映射

Cloudflare 页面类型	文件	关键 token
WAF 阻止	pages/waf-block.html	通用诊断 token
IP/国家/地区阻止	pages/ip-block.html	通用诊断 token
IP/国家/地区质询	pages/country-challenge.html	::CAPTCHA_BOX::
500 类错误	pages/500-errors.html	::CLOUDFLARE_ERROR_500S_BOX::
1000 类错误	pages/1000-errors.html	::CLOUDFLARE_ERROR_1000S_BOX::
交互式质询	pages/interactive-challenge.html	::CAPTCHA_BOX::
托管质询 / Under Attack	pages/managed-challenge.html	::CF_WIDGET_BOX::
非交互式挑战	pages/non-interactive-challenge.html	::IM_UNDER_ATTACK_BOX::
速率限制阻止	pages/rate-limit-block.html	通用诊断 token

所有页面还保留了 ::RAY_ID::、::CLIENT_IP:: 和 ::GEO::。在本地预览时会看到原始 token；Cloudflare 部署后会替换它们。

部署

1. 将整个目录发布到一个 Cloudflare 能直接访问的静态 URL，确保 HTML、CSS 和两张图片均返回 200。
2. 在 Cloudflare Dashboard 的目标 zone 中进入 Error Pages，选择对应类型并填写上表页面的公开 URL。
3. 新版 Custom Error Rules 可先在 Rules > Settings > Custom Error Assets 中抓取页面 URL，再在 http_custom_errors 阶段的规则中使用该资产。
4. 固定 Error Page 不处理源站返回的 500、501、503、505；需要覆盖这些状态时请另建 Custom Error Rule。
5. Challenge 页面不要添加 Referrer Policy / CSP meta，也不要定义 window._cf_chl_opt。本项目未添加这些内容。

Cloudflare 当前要求付费套餐并代理对应 DNS 记录。抓取后的完整页面（含内联图片、CSS 和脚本）应低于约 1.5 MB；本项目已将原始约 1.9 MB 的 Hero PNG 转为压缩 WebP。

官方文档：

• Custom Errors overview
• Edit Error Pages
• Error tokens
• Error page types

视觉资源

• Hero 来源：https://www.moedove.com/MoeDove-Hero.png
• Logo 来源：https://www.moedove.com/MoeDove-Logo.png
• 参考样式：https://www.moedove.com/css/style.css

资源于 2026-07-15 按用户要求下载并做了尺寸/格式优化，避免错误页运行时依赖外部热链。