easy-vibe 文档站如何新增一章内容并在 config.mjs 注册侧边栏【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibeeasy-vibe 是一个基于 VitePressVue 3的文档站点课程内容按 Stage 分章节组织侧边栏在 docs/.vitepress/config.mjs 中按路由前缀注册。如果你的任务是往课程里加一个新章节并让它出现在侧边栏中需要完成两件事在对应语言目录下创建章节的 Markdown 文件然后在config.mjs对应 locale 的 sidebar 里添加一条text/link条目。前提条件只有一个硬性要求Node.js 18package.json 的engines字段声明了node: 18.0.0。启动本地服务确认起点状态可核对在仓库根目录执行npm install # 首次执行时安装依赖 npm run dev # 启动 VitePress 开发服务器带热更新CLAUDE.md 说明文档随后可在http://localhost:5173VitePress 默认端口访问。开始改动前先打开这个地址确认站点能正常渲染这样后面每一步改动都有热更新可以直接对照。创建章节内容文件内容文件放在对应语言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。因此注册新章节的操作路径是确定新章节属于哪个 locale 的哪个路由前缀例如/zh-cn/stage-1/对应productManagerSidebar打开该常量的定义在对应章节分组下新增条目或另起一个章节分组。现有条目的写法以 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下人工确认。因此验证顺序是开发服务器人工核对npm run dev热更新生效后打开http://localhost:5173进入对应 Stage 页面确认侧边栏出现新条目、点击后能正确跳转到新章节页面图片等链接也一并检查构建检查在仓库根目录执行npm run build构建成功即通过AGENTS.md 将其描述为 CI 风格的主要校验方式生产构建输出到docs/.vitepress/dist需要本地预览构建产物时可再执行npm run preview提交前格式化项目用 Prettier 管理格式无分号、单引号、无尾逗号提交前执行npm run format并注意保持 diff 最小不要重排无关文件。边界与注意事项侧边栏条目只对相应路由前缀下的页面生效新章节页面如果没落在你注册的前缀下例如把文件放到了错误的 Stage 或 locale 目录该页面不会显示这条侧边栏link与text是两个独立字段侧边栏显示的是text与页面内的 H1 标题无关不需要保持一致仓库存在若干遗留分区extra/、examples/、project/已迁移至 Stage 2/3CLAUDE.md 建议新增内容并入 Stage 结构而不是加入遗留分区。完成以上步骤后新章节文件、config.mjs的 sidebar 条目和一次成功的npm run build构成这条任务路径的完整交付物。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考