Codex 教程 12：排错大全（页面遮挡/链接失效/内容同质化）
把常见线上问题做成“可复现/可定位/可修复”的流程化手册，避免反复踩坑。
你将学到什么
把常见问题做成“流程化排错”：先复现、再定位、最后修复并补验证。本篇覆盖站点常见故障与修复策略。
你将获得
- 可复用的模板
- 可执行的步骤
- 可验证的清单
- 可回滚的策略
适合人群
- 希望把 AI 变成稳定生产力的开发者
- 需要为团队沉淀规范的人
- 正在做多页面内容站/工程项目的人
点击无响应
- 检查是否有遮罩层/移动菜单覆盖
- 在浏览器开发者工具看元素层级（z-index）
- 确认链接的 href 指向真实存在的文件
页面内容同质化
- 为不同栏目使用不同布局模块组合
- 加入“独有信息”：链接、命令、参数、表格、案例
- 每页独立的 H2/H3 与 FAQ
图片/资源丢失
优先用相对路径并保持资源本地化；检查二级页是否错误引用了上级目录；同时确保图片带 width/height 与 lazy-load。
检查清单
通用验收清单
- 导航链接：点击可达、无同内容页面、无死链
- SEO：每页独立 title/description/keywords/canonical/og/robots
- 结构：H1 仅一个，H2/H3 语义清晰，段落足够长
- 性能：图片本地 webp + lazy-load + decoding=async
- 可维护：内容/模板集中管理，支持批量重建
前置条件与准备
- 明确当前页面/功能的‘唯一主题’（避免同质化）
- 准备一份验收清单（SEO/链接/内容/性能）
- 所有外链优先指向官方或可验证来源
- 每次改动都能重新生成并抽样检查关键页面
练习与作业
练习 A（10 分钟）
为站点新增一个‘专题页’，要求包含：表格 + FAQ + 相关链接。
练习 B（30 分钟）
为该专题页补齐 SEO meta，并将其加入站点地图与教程中心的相关链接。
相关链接
高频问答
如何判断页面内容是否足够‘丰富’？
至少包含：清晰的 H2/H3、多个段落、可执行步骤、示例/命令/表格/FAQ，并且与主题强相关。
为什么布局要做差异化？
布局差异化能降低模板感，提升阅读体验；同时让搜索引擎更容易区分页面意图与主题。
如何保持资料‘最新’？
关键链接与规格尽量指向官方来源；页面标注更新时间，并定期检查外链与版本信息。
如何避免‘越写越宽、越看越累’？
用更窄的内容容器（max-w-6xl/5xl）、更好的行高、更多分段与模块化卡片，让长文更精致。
进阶扩展
下一步建议：把本教程里的‘模板/清单/示例’固化为仓库内的文档与脚本。这样任何人接手都能按同一标准生成页面、校验 SEO、检查链接与内容密度，并持续扩展长尾专题。
