🎯 #1 AI 生态系统教程站点 · 源码驱动 · 100% 可运行
AI 工具迭代太快？官方文档跟不上？网上的教程都过时？
我们深度分析开源项目源码，每一行代码都经过验证。 ✅ 跟着做，一次成功，不走弯路。
🚀 开始学习 · ⭐ Star 本仓库 · 💬 加入讨论
简体中文 · English · 日本語 · 한국어 · Español · Français · Deutsch · Português · Русский · 繁體中文
- ❌ 官方文档更新滞后，跟着做却跑不通？
- ❌ 网上教程都是复制粘贴，代码根本跑不起来？
- ❌ 遇到报错，搜了一圈找不到解决方案？
- ❌ 想进阶，但找不到深入源码的实战指导？
OpenCodeDocs 专门解决这些问题。
不是从网上抄来的，而是从真实源码中推导出的核心逻辑
我们深度分析开源项目源码，确保每一行代码都经过自动化验证。教程标注了具体的 Git Commit 版本，让你清楚知道代码基于哪个版本。
工具更新了，教程也自动更新
当项目发版时，我们的教程同步更新。你不需要担心教程过时，永远学到最新的内容。
💡 我们的教程正在快速更新中，持续收录更多优质项目！
中文、英文、日语、韩语、西班牙语、法语、德语、葡萄牙语、俄语、繁体中文...
无论你来自哪里，都能用母语学习 AI 工具。
跟着做，一次成功，不用猜、不用试
教程的每一个步骤都经过验证，从安装到部署，只要跟着做，就能跑通。不折腾、不踩坑、不走弯路。
不会装？不会配？别担心，我们有手把手教程
- 零基础也能上手
- 每一步都有详细说明
- 常见报错都有解决方案
想进阶？我们来深入源码
- 多账号轮换技巧
- Token 省钱秘诀
- Agent 自动化实战
- 源码级别的深度分析
团队协作需要统一规范？
- 可复用的最佳实践
- 完整的项目结构
- 生产环境部署指南
git clone https://github.com/vbgate/opencodedocs.git
cd opencodedocs/sitenpm installnpm run dev访问 http://localhost:5173，开始你的 AI 工具学习之旅！🎉
💡 提示：你也可以直接访问 opencodedocs.com 查看在线文档。
site/
├── docs/ # 文档根目录
│ ├── zh/ # 中文教程 🇨🇳
│ ├── en/ # 英文教程 🇺🇸
│ ├── ja/ # 日语教程 🇯🇵
│ ├── ko/ # 韩语教程 🇰🇷
│ ├── es/ # 西班牙语教程 🇪🇸
│ ├── fr/ # 法语教程 🇫🇷
│ ├── de/ # 德语教程 🇩🇪
│ ├── pt/ # 葡萄牙语教程 🇵🇹
│ ├── ru/ # 俄语教程 🇷🇺
│ ├── zh-tw/ # 繁体中文教程 🇹🇼
│ ├── .vitepress/ # VitePress 配置
│ │ ├── config.mts # 主配置文件
│ │ ├── sidebar.config.ts # 侧边栏自动生成
│ │ └── theme/ # 自定义主题组件
│ ├── about.md # 关于我们
│ └── terms.md # 服务条款
├── scripts/ # 工具脚本
│ ├── add-order-to-md.ts # 添加排序字段
│ ├── check-frontmatter.ts # 检查 Frontmatter
│ └── create-category-indexes.ts # 创建分类索引
├── package.json # 项目配置
├── tailwind.config.js # Tailwind CSS 配置
└── postcss.config.js # PostCSS 配置
| 技术 | 版本 | 说明 |
|---|---|---|
|
1.x | 静态站点生成器 · 极速构建 |
 |
3.4+ | 前端框架 · Composition API |
 |
4.x | 样式系统 · CSS-first 配置 |
 |
5.9+ | 类型安全 · 编译时检查 |
 |
11.x | 图表支持 · 流程图可视化 |
 |
Pages | 全球 CDN · 200+ 边缘节点 |
-
创建目录结构
docs/zh/[owner]/[repo]/ ├── index.md # 项目主页 ├── start/ # 快速开始 ├── features/ # 功能介绍 └── faq/ # 常见问题 -
编写 Frontmatter
--- title: "教程标题" # 2-6 个中文 order: 10 # 排序（10, 20, 30...） sidebarTitle: "侧边栏标题" # 可选 description: "SEO 描述" # 搜索引擎优化 ---
-
验证构建
npm run docs:build
在 docs/.vitepress/sidebar.config.ts 中添加项目：
const projects = [
'owner/repo', // 添加你的项目
]然后翻译 home-config.[lang].json 文件。
- 组件位置：
docs/.vitepress/theme/components/ - 样式文件：
docs/.vitepress/theme/custom.css - Tailwind v4：使用 CSS-first 配置方式
npm run docs:build构建产物位于 docs/.vitepress/dist/ 目录。
# 自动部署
npm run deploynpm run docs:preview- 图片优化：使用 WebP 格式，压缩至 200KB 以下
- 代码分割：VitePress 自动按路由分割
- CDN 加速：静态资源自动上传到 Cloudflare CDN
- 预渲染：核心页面预渲染，首屏加载 < 500ms
✅ 我们的站点已部署在全球 CDN，访问速度快如闪电！
我们欢迎社区贡献！提交你的教程、修正错误、添加新功能。
-
Fork 本仓库
# 点击 GitHub 页面的 Fork 按钮 -
创建特性分支
git checkout -b feature/amazing-feature
-
提交更改
git commit -m 'Add amazing feature' -
推送到分支
git push origin feature/amazing-feature
-
提交 Pull Request
- 点击 GitHub 页面的 "Pull Request" 按钮
- 填写 PR 描述，说明你的改动
🌟 你的贡献将帮助全球开发者更好地使用 AI 工具！
想让你的项目也有高质量教程？只需 3 步！
第一步：提交 Issue
- 访问 GitHub Issues
- 点击 "New Issue"
- 使用以下模板：
**项目名称**：[项目名称]
**GitHub 仓库**：https://github.com/[owner]/[repo]
**项目简介**：[1-2 句话描述项目用途]
**目标受众**：[新手/进阶/专家/全部]
**教程语言**：[中文/英文/其他]
**备注**：[其他补充说明]第二步：团队审核
- 我们会在 1-3 个工作日内审核你的申请
- 评估项目是否适合收录
- 确认项目源码质量和活跃度
第三步：教程上线
- 审核通过后，我们自动生成教程
- 验证每个步骤的可运行性
- 发布到官网，支持多语言
- 审核周期：1-3 个工作日
- 教程生成：3-7 个工作日
- 上线时间：审核通过后立即发布
Q: 什么样的项目适合收录？ A: 开源 AI 工具、开发工具、库、框架等。需要具备一定的技术深度和使用价值。
Q: 教程是免费的吗？ A: 是的，我们的教程完全免费，并且会持续更新维护。
Q: 可以指定教程语言吗？ A: 可以，我们支持 10 种语言。你可以在 Issue 中注明需要的语言。
🎯 立即提交：创建 Issue →
署名 - 非商业性使用 - 相同方式共享
✅ 你可以：
- 📋 分享：自由分享和改编
- 🔧 修改：基于教程内容进行二次创作
- 👥 贡献：提交你的改进
❌ 你不能：
- 💰 商业使用：未经授权不得用于商业目的
💡 如果你想将教程用于商业用途，请联系我们：vbgatecom@gmail.com
有任何问题或建议？欢迎随时联系我们！
- 📧 Email：vbgatecom@gmail.com
- 🐦 Twitter：@codingzys
- 💻 GitHub：vbgate/opencodedocs
- 📥 提交教程：GitHub Issues
- 🌐 官网：opencodedocs.com
🎉 感谢你选择 OpenCodeDocs！
从第一行代码到生产级应用，我们为你提供每个阶段的教程。
⭐ Star 本仓库 · 📥 提交教程申请 · 💬 加入讨论
Made with ❤️ by OpenCodeDocs Team