企业官网建设流程全解析

easy-vibe 文档站如何新增一章内容并在 config.mjs 注册侧边栏

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe

easy-vibe 是一个基于 VitePress（Vue 3）的文档站点，课程内容按 Stage 分章节组织，侧边栏在 docs/.vitepress/config.mjs 中按路由前缀注册。如果你的任务是往课程里加一个新章节并让它出现在侧边栏中，需要完成两件事：在对应语言目录下创建章节的 Markdown 文件，然后在config.mjs对应 locale 的 sidebar 里添加一条text/link条目。前提条件只有一个硬性要求：Node.js >= 18（package.json 的engines字段声明了"node": ">=18.0.0"）。

启动本地服务，确认起点状态可核对

在仓库根目录执行：

npm install # 首次执行时安装依赖 npm run dev # 启动 VitePress 开发服务器（带热更新）

CLAUDE.md 说明文档随后可在http://localhost:5173（VitePress 默认端口）访问。开始改动前，先打开这个地址确认站点能正常渲染，这样后面每一步改动都有热更新可以直接对照。

创建章节内容文件

内容文件放在对应语言（locale）的目录树下，目录结构以仓库现状为准：docs/{locale}/stage-{N}/{章节目录}/，主内容文件为该目录下的index.md（也允许章节直接用一个.md文件承载，CLAUDE.md 指出两种形式视章节结构而定）。目录名用 kebab-case，例如introduction-to-ai-ide、frontend、backend。

以在简体中文站新增一个 Stage 1 章节为例，创建：

docs/zh-cn/stage-1/my-new-chapter/index.md

注意 CLAUDE.md 的目录结构描述中写作docs/stage-{N}/...，而当前仓库实际采用的是带语言前缀的docs/zh-cn/stage-1/...布局，config.mjs 中的侧边栏链接也都是/zh-cn/stage-1/...这类带 locale 前缀的路径。按当前仓库实际结构操作即可。

另外两点来自项目文档的约定：

• 课程正文以中文为主，内容语言请遵循这一惯例；
• 章节内的图片用相对当前 Markdown 文件位置的相对路径引用，提交前确认图片链接可用。

在 config.mjs 注册侧边栏条目

侧边栏定义全部在 docs/.vitepress/config.mjs 中，组织方式是：每个 locale 的themeConfig.sidebar对象按路由前缀映射到一个在文件顶部定义的共享数组常量。以zh-cn为例，其sidebar中形如：

sidebar: { '/zh-cn/vibe-stories/': vibeStoriesSidebar, '/zh-cn/stage-1/appendix-articles/example0-1/': vibeStoriesSidebar, '/zh-cn/stage-1/': productManagerSidebar, '/zh-cn/stage-2/': zhCnStage2Sidebar, '/zh-cn/stage-3/': zhCnStage3Sidebar, // ... }

各 Stage 的条目分别集中在文件顶部的常量里（如productManagerSidebar、zhCnStage2Sidebar、zhCnStage3Sidebar）。因此注册新章节的操作路径是：

1. 确定新章节属于哪个 locale 的哪个路由前缀（例如/zh-cn/stage-1/对应productManagerSidebar）；
2. 打开该常量的定义，在对应章节分组下新增条目，或另起一个章节分组。

现有条目的写法（以 Stage 1 侧边栏为例）：

{ text: '第三章 从问题到方案', collapsed: false, items: [ { text: '1. 寻找真实问题', link: '/zh-cn/stage-1/appendix-idea-sources/' }, // 新增条目加在 items 数组中 ] }

新增条目时遵守 CLAUDE.md 给出的侧边栏管理规则：

• 每条是一个含text（侧边栏显示名）和link（页面路径）的对象；
• link不带.md扩展名，VitePress 自行处理；
• link不写index——内容文件是{章节目录}/index.md时，用带尾部斜杠的目录路径（如/zh-cn/stage-1/my-new-chapter/）；内容文件是直接的{chapter}.md时，路径写到文件名（不含扩展名）即可，参考现有 appendix 条目如/zh-cn/appendix/2-development-tools/ide-basics；
• 嵌套子项放在items数组中，并用collapsed: true|false控制该分组默认是否折叠。

下面是一个可直接套用的新条目模式，my-new-chapter替换为你实际创建的章节目录名：

{ text: '新章节标题', link: '/zh-cn/stage-1/my-new-chapter/' }

如果你的章节要同时出现在多个语言版本，需要在对应 locale 的 sidebar 常量中各注册一条。CLAUDE.md 的多语言部分给出的做法是：在docs/{locale}/下按docs/zh-cn/的结构创建内容，然后把zh-cn的侧边栏结构复制过来并翻译text值。

验证注册结果

项目没有专门的测试框架，CLAUDE.md 和 AGENTS.md 都明确：正确性的主要检查手段是npm run build，交互行为在npm run dev下人工确认。因此验证顺序是：

1. 开发服务器人工核对：npm run dev热更新生效后，打开http://localhost:5173，进入对应 Stage 页面，确认侧边栏出现新条目、点击后能正确跳转到新章节页面（图片等链接也一并检查）；
2. 构建检查：在仓库根目录执行npm run build，构建成功即通过（AGENTS.md 将其描述为 CI 风格的主要校验方式）；生产构建输出到docs/.vitepress/dist，需要本地预览构建产物时可再执行npm run preview；
3. 提交前格式化：项目用 Prettier 管理格式（无分号、单引号、无尾逗号），提交前执行npm run format，并注意保持 diff 最小，不要重排无关文件。

边界与注意事项

• 侧边栏条目只对相应路由前缀下的页面生效：新章节页面如果没落在你注册的前缀下（例如把文件放到了错误的 Stage 或 locale 目录），该页面不会显示这条侧边栏；
• link与text是两个独立字段，侧边栏显示的是text，与页面内的 H1 标题无关，不需要保持一致；
• 仓库存在若干遗留分区（extra/、examples/、project/，已迁移至 Stage 2/3），CLAUDE.md 建议新增内容并入 Stage 结构，而不是加入遗留分区。

完成以上步骤后，新章节文件、config.mjs的 sidebar 条目和一次成功的npm run build构成这条任务路径的完整交付物。

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe