跳到主要内容

Codex 与 Docusaurus 协作记录

本文汇总截至 2026-08-04 的近期 Codex 问答与实际操作,保留可复用的技术结论、 仓库状态和后续注意事项,不记录终端审批、访问令牌、个人路径或无关调试输出。

问答摘要

问题结论
Docusaurus 如何工作?它是以插件生命周期为核心的 React 静态站点编译器,把配置、Markdown/MDX 和 React 页面编译成预渲染 HTML 与可水合 SPA。
官方仓库提供 Skill 吗?没有提供可安装的 SKILL.md;根目录只有面向 AI 编程代理的 AGENTS.md
当前环境安装了哪些 Skill?会话开始时可触发 29 个全局 Skill,主要分为 Codex 系统工具、Caveman 工具组和 Cheat-on-content 工作流;本项目随后新增 $docusaurus-site$seo-audit
是否为本项目创建专用 Skill?已创建中文 $docusaurus-site,覆盖内容、配置、主题、构建、验证与部署准备。
项目是否有 SEO?Docusaurus 已提供静态渲染、canonical、Open Graph 和 sitemap;当前站点已禁用博客及其 Feed,并安装 $seo-audit 审查新文档。
仓库是否已初始化并推送?已初始化 main 分支并建立远程跟踪;具体地址和提交标识不写入知识文档。

Docusaurus 工作原理

Docusaurus 不是单纯的 Markdown 转 HTML 工具。更准确的模型是:

docusaurus.config.ts
-> 展开 classic preset
-> docs、blog、pages 等插件读取内容
-> 插件生成路由、页面数据和全局数据
-> .docusaurus 保存自动生成的编译输入
-> Rspack/Webpack 分别构建客户端与服务端 bundle
-> 服务端 bundle 遍历路由并静态生成 HTML
-> 浏览器 hydrateRoot 接管页面并提供 SPA 导航

插件生命周期

核心插件大致按照以下顺序工作:

插件构造函数
-> loadContent()
-> translateContent()
-> contentLoaded()
-> allContentLoaded()
-> configureWebpack()
-> postBuild()

其中 contentLoaded() 可以创建数据、添加路由并公开插件级全局数据。docs 插件会读取 文档、front matter、版本和侧边栏,再把 MDX 注册为 React 页面模块。

开发与生产的区别

  • npm run start 加载配置和插件内容,启动开发服务器,并监听配置与内容文件变化。
  • npm run build 同时构建浏览器 bundle 和构建期服务端 bundle,再为每条路由生成 静态 HTML。
  • 浏览器首先获得完整 HTML,随后 React 水合;之后的站内导航由客户端路由接管。
  • .docusaurus/ 是自动生成的路由和数据注册表,build/ 是最终部署产物;两者都不应 手工修改或提交。

上游仓库结构

上游 Docusaurus 仓库是 pnpm + Lerna monorepo,主要模块包括:

  • packages/docusaurus@docusaurus/core,包含 CLI、配置加载、插件调度和 SSG。
  • packages/create-docusaurus:项目脚手架。
  • packages/docusaurus-preset-classic:组合 docs、blog、pages 和 classic theme。
  • packages/docusaurus-plugin-content-*:文档、博客和页面内容插件。
  • packages/docusaurus-theme-classic:默认 React UI。
  • packages/docusaurus-mdx-loader:把 Markdown/MDX 编译成 React 组件。
  • packages/docusaurus-bundler:Webpack/Rspack 抽象。
  • packages/docusaurus-faster:Rspack、SWC、Lightning CSS 等加速能力。
  • website:官方文档站,也用于框架自测。

当前项目如何映射

本仓库是官方 classic 模板生成的 Docusaurus 站点,不是框架 monorepo:

路径作用
docusaurus.config.ts站点元数据、preset、导航、页脚、主题和国际化配置
sidebars.ts文档侧边栏;站点导览独立置顶,其余文档按 AI Agent 指南与部署运维两个类目组织
docs/文档内容,路由前缀为 /docs
src/pages/基于文件的自定义页面;index.tsx 负责 /
src/components/可复用 React 组件
src/css/custom.css全局 Infima 变量和主题覆盖
static/原样复制到部署根目录的静态资源

当前使用 Docusaurus 3.10.2、React 19、Node.js 20+ 和 npm。项目安装了 @docusaurus/faster,并设置 future.v4: true,因此采用面向 Docusaurus v4 的 兼容默认值和加速构建路径。

仓库操作记录

Git 与远程仓库

  • 本地仓库默认分支:main
  • origin/main 已与本地 main 建立跟踪关系

远程地址、仓库可见性和具体提交标识属于部署或运维元数据,不写入面向读者的知识文档。

初始提交前运行了 npm run typechecknpm run build,两项均通过。

AGENTS.md

项目根目录已加入上游 Docusaurus 的 AGENTS.md。该文件描述的是框架 monorepo, 其中的 pnpm、Lerna、packages/website/ 工作流不适用于本 npm 站点。执行项目 任务时应以本仓库 package.json 中的 npm scripts 为准,并在采用其中的 Issue/PR 规则前先确认它们是否适用于当前仓库。

项目专用 Skill

仓库内已创建 .codex/skills/docusaurus-site/

  • SKILL.md:中文触发描述、文件职责、SEO 门禁、实现约束和验证流程。
  • references/project-map.md:仓库身份、npm 命令、目录职责和部署占位值。
  • references/seo-content-gate.md:把通用 SEO 审查映射到 Docusaurus front matter 和构建后 HTML。
  • agents/openai.yaml:中文显示名称、简介和默认提示词。

项目还安装了 .codex/skills/seo-audit/,用于技术 SEO、页面 SEO、内容质量、内链、国际化和博客审查。

调用方式:

$docusaurus-site

该 Skill 明确要求:

  • 不编辑或提交 .docusaurus/build/
  • 优先复用 classic preset、现有主题组件和 CSS 约定。
  • 修改 TypeScript 或配置后运行 npm run typecheck
  • 修改路由、内容、主题、资源或部署设置后运行 npm run build
  • 每次生成新 docs/blog 时调用 $seo-audit,并检查构建后 HTML 的实际元数据。
  • 不把上游 monorepo 的 pnpm/Lerna 命令误用于当前站点。
  • 文档不得包含真实代码托管地址、访问凭据、密钥、认证日志或个人电脑绝对路径。

两个项目 Skill 已通过官方 quick_validate.py 校验,站点类型检查和生产构建也均通过。

当前待办与风险

站点部署前仍需确认生产域名、baseUrl、组织标识、项目标识和编辑链接。具体部署地址 应保存在部署配置或环境变量中,不应复制到面向读者的知识文档。

相关项目文档