🎯 #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