纯HTML维护页需包含：标题含“维护”或“暂时不可用”、meta robots="noindex"防收录、16px+字体、明确恢复时间（如2024-06-15 14:00 北京时间）、页脚last-updated时间戳、极简邮件提醒表单，禁用跳转/刷新/重试按钮，并通过服务器配置全局路由至该页且禁用缓存。
怎么用纯HTML写一个靠谱的维护中页面
直接放一个静态 index.html 就够了，不需要js、不需要后端。重点是让用户一眼看懂“不是坏了，是正在修”，同时不触发浏览器或爬虫的错误判断。
- 标题必须包含“维护”或“暂时不可用”，避免写“Error 503”这种容易被当成故障的词
- 里第一行建议加
<meta name="robots" content="noindex">，防止搜索引擎把维护页当首页收录 - 别用
window.location跳转或自动刷新，用户可能刚点进来就刷没了，也干扰调试 - 字体大小至少
16px，小屏设备上文字太小会误判为加载异常
为什么不能只靠HTTP状态码（比如503）
503 确实语义正确，但实际部署时经常失效——CDN、反向代理（如Nginx）、甚至某些云服务商会拦截并替换原始响应体，导致你写的HTML根本没机会展示。
- Cloudflare 默认把503转成它自己的黄页，你的HTML完全不生效
- Nginx 的
error_page 503 /503.html需要额外配置proxy_intercept_errors on才能透出，否则仍返回空响应或默认提示 - 部分监控工具（如UptimeRobot）把503当“宕机”，而不是“计划内停机”，告警逻辑会错乱
维护页里该放哪些真实有用的信息
用户最关心三件事：是不是我的问题？什么时候好？我能做什么？所有内容围绕这三点组织，删掉“感谢您的理解”这类虚话。
- 明确写出预计恢复时间，格式用
2024-06-15 14:00（北京时间），不写“稍后”“尽快” - 加一行
last-updated: 2024-06-14T10:22:00+08:00（放在页脚），方便运维手动更新时留痕 - 如果支持邮件通知，提供一个极简表单：
<input type="email">+<button>恢复时提醒我</button>，后端另接，前端不绑JS - 绝对不要放“点击重试”按钮——页面本身就是静态文件，点也没用，反而增加困惑
部署时最容易被忽略的两个细节
一个是路径，一个是缓存。90% 的维护页失效都卡在这两步。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 确保 Web 服务器把所有请求（包括
/api/xxx、/static/js/app.js）都指向同一个maintenance.html，Nginx 用try_files /maintenance.html =404，Apache 用FallbackResource /maintenance.html - 在
maintenance.html的里加<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">，防止用户本地缓存旧版维护页，以为还没恢复
维护页不是越花哨越好，而是越不容易被误解越好。多一行准确的时间，少一个没用的动画，用户焦虑就少一分。
立即学习“前端免费学习笔记（深入）”；
