refactor: restructure docs for i18n support
- Move existing documentation to docs/zh-cn/ - Initialize structure for multiple languages (ar-sa, de-de, en-us, etc.) - Add update_readmes.cjs utility script - Update deployment documentation
This commit is contained in:
sanbuphy
+598
-302
@@ -4,313 +4,609 @@ import { defineConfig } from 'vitepress'
|
||||
const isVercel = process.env.VERCEL === '1'
|
||||
const base = isVercel ? '/' : '/easy-vibe/'
|
||||
|
||||
// 通用配置
|
||||
const commonHead = [
|
||||
['link', { rel: 'icon', href: `${base}logo.png`.replace('//', '/') }],
|
||||
['link', { rel: 'stylesheet', href: `${base}style.css`.replace('//', '/') }]
|
||||
]
|
||||
|
||||
const commonThemeConfig = {
|
||||
logo: `${base}logo.png`.replace('//', '/'),
|
||||
search: {
|
||||
provider: 'local'
|
||||
},
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/datawhalechina/easy-vibe' }
|
||||
],
|
||||
outline: {
|
||||
level: [1, 6]
|
||||
}
|
||||
}
|
||||
|
||||
export default defineConfig({
|
||||
base: base,
|
||||
title: 'Easy-Vibe Tutorial',
|
||||
description: 'Easy-Vibe 中文实战课',
|
||||
head: [
|
||||
['link', { rel: 'icon', href: `${base}logo.png`.replace('//', '/') }],
|
||||
['link', { rel: 'stylesheet', href: `${base}style.css`.replace('//', '/') }]
|
||||
],
|
||||
themeConfig: {
|
||||
logo: `${base}logo.png`.replace('//', '/'),
|
||||
search: {
|
||||
provider: 'local'
|
||||
|
||||
// 多语言配置 - 使用 cn/en-us/ja 结构
|
||||
locales: {
|
||||
// 中文
|
||||
'zh-cn': {
|
||||
label: '简体中文',
|
||||
lang: 'zh-CN',
|
||||
link: '/zh-cn/',
|
||||
title: 'Easy-Vibe 教程',
|
||||
description: '从零到一学习 Vibe Coding',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: '页面导航'
|
||||
},
|
||||
nav: [
|
||||
{ text: '首页', link: '/zh-cn/' },
|
||||
{ text: '新手入门', link: '/zh-cn/stage-0/0.1-learning-map/' },
|
||||
{ text: '产品经理', link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: '初中级开发',
|
||||
link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '高级开发',
|
||||
link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: '附录', link: '/zh-cn/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {
|
||||
'/zh-cn/stage-0/': [
|
||||
{ text: '1. 学习地图', link: '/zh-cn/stage-0/0.1-learning-map/' },
|
||||
{
|
||||
text: '2. AI 时代，会说话就会编程',
|
||||
link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
|
||||
}
|
||||
],
|
||||
'/zh-cn/stage-1/': [
|
||||
{
|
||||
text: '1. 认识 AI IDE 工具',
|
||||
link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
|
||||
},
|
||||
{
|
||||
text: '2. 动手做出原型',
|
||||
link: '/zh-cn/stage-1/1.2-building-prototype/'
|
||||
},
|
||||
{
|
||||
text: '3. 给原型加上 AI 能力',
|
||||
link: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/'
|
||||
},
|
||||
{
|
||||
text: '4. 完整项目实战',
|
||||
link: '/zh-cn/stage-1/1.4-complete-project-practice/'
|
||||
},
|
||||
{
|
||||
text: '5. 大作业：完成一个 Web 应用原型',
|
||||
link: '/zh-cn/stage-1/1.5-final-project/'
|
||||
},
|
||||
{
|
||||
text: '附录 A：产品思维补充',
|
||||
link: '/zh-cn/stage-1/appendix-a-product-thinking/'
|
||||
},
|
||||
{
|
||||
text: '附录 B：常见报错及解决方案',
|
||||
link: '/zh-cn/stage-1/appendix-b-common-errors/'
|
||||
},
|
||||
{
|
||||
text: '附录示例：贪吃蛇游戏教程',
|
||||
link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||
},
|
||||
{
|
||||
text: '附录示例：用 AI 搭建完整网站',
|
||||
link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||
}
|
||||
],
|
||||
'/zh-cn/stage-2/': [
|
||||
{
|
||||
text: '前端开发',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '前端零：使用 Lovart 生产素材',
|
||||
link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '前端一：Figma 与 MasterGo 入门',
|
||||
link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/'
|
||||
},
|
||||
{
|
||||
text: '前端二：构建第一个现代应用程序 - UI 设计',
|
||||
link: '/zh-cn/stage-2/frontend/2.2-ui-design/'
|
||||
},
|
||||
{
|
||||
text: '前端三：参考 UI 设计规范与多产品 UI 设计',
|
||||
link: '/zh-cn/stage-2/frontend/2.3-multi-product-ui/'
|
||||
},
|
||||
{
|
||||
text: '前端四：一起做霍格沃茨画像',
|
||||
link: '/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '后端与全栈',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '后端一：什么是 API',
|
||||
link: '/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api'
|
||||
},
|
||||
{
|
||||
text: '后端二：从数据库到 Supabase',
|
||||
link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase'
|
||||
},
|
||||
{
|
||||
text: '后端三：大模型辅助编写接口代码与接口文档',
|
||||
link: '/zh-cn/stage-2/backend/2.3-ai-interface-code/'
|
||||
},
|
||||
{
|
||||
text: '后端四：Git 工作流',
|
||||
link: '/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github'
|
||||
},
|
||||
{
|
||||
text: '后端五：Zeabur 部署',
|
||||
link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
||||
},
|
||||
{
|
||||
text: '后端六：现代 CLI 开发工具',
|
||||
link: '/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
||||
},
|
||||
{
|
||||
text: '后端七：如何集成 Stripe 等收费系统',
|
||||
link: '/zh-cn/stage-2/backend/2.7-stripe-payment/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '大作业',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '大作业 1：构建第一个现代应用程序 - 全栈应用',
|
||||
link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
|
||||
},
|
||||
{
|
||||
text: '大作业 2：现代前端组件库 + Trae 实战',
|
||||
link: '/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'AI 能力附录',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: 'AI 一：Dify 入门与知识库集成',
|
||||
link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
||||
},
|
||||
{
|
||||
text: 'AI 二：学会查询 AI 词典与集成多模态 API',
|
||||
link: '/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/zh-cn/stage-3/': [
|
||||
{
|
||||
text: '核心技能',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级一：MCP 与 ClaudeCode Skills',
|
||||
link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{
|
||||
text: '高级二：如何让 Coding Tools 长时间工作',
|
||||
link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '多平台开发',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级三：如何构建微信小程序',
|
||||
link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
|
||||
},
|
||||
{
|
||||
text: '高级四：如何构建微信小程序（包含后端）',
|
||||
link: '/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/'
|
||||
},
|
||||
{
|
||||
text: '高级五：如何构建安卓程序',
|
||||
link: '/zh-cn/stage-3/cross-platform/3.5-android-app/'
|
||||
},
|
||||
{
|
||||
text: '高级六：如何构建 iOS 程序',
|
||||
link: '/zh-cn/stage-3/cross-platform/3.6-ios-app/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '个人品牌',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级七：如何构建属于自己的个人网页与学术博客',
|
||||
link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'AI 能力附录',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级 AI 一：什么是 RAG 以及它如何工作',
|
||||
link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future'
|
||||
},
|
||||
{
|
||||
text: '高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例',
|
||||
link: '/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/zh-cn/guide/': [
|
||||
{
|
||||
text: '课程指南',
|
||||
items: [{ text: '课程介绍', link: '/zh-cn/guide/introduction' }]
|
||||
}
|
||||
],
|
||||
'/zh-cn/extra/': [
|
||||
{
|
||||
text: 'Extra 扩展知识（旧版，已迁移到 Stage 2/3）',
|
||||
items: [
|
||||
{
|
||||
text: 'Extra 1: Git & GitHub',
|
||||
link: '/zh-cn/extra/extra1/extra1-what-is-git-and-what-is-github'
|
||||
},
|
||||
{
|
||||
text: 'Extra 2: What is API',
|
||||
link: '/zh-cn/extra/extra2/extra2-what-is-api'
|
||||
},
|
||||
{
|
||||
text: 'Extra 5: What is RAG',
|
||||
link: '/zh-cn/extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future'
|
||||
},
|
||||
{
|
||||
text: 'Extra 6: Zeabur Deployment',
|
||||
link: '/zh-cn/extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
||||
},
|
||||
{
|
||||
text: 'Extra 7: CLI AI Tools & TDD',
|
||||
link: '/zh-cn/extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/zh-cn/examples/': [
|
||||
{
|
||||
text: 'Examples 实战案例（旧版，已迁移到 Stage 0/3）',
|
||||
items: [
|
||||
{
|
||||
text: 'Ex 0.1: Snake Game',
|
||||
link: '/zh-cn/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||
},
|
||||
{
|
||||
text: 'Ex 0.2: Build Website with AI',
|
||||
link: '/zh-cn/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/zh-cn/project/': [
|
||||
{
|
||||
text: 'Project 文档（旧版，已迁移到 Stage 2）',
|
||||
items: [
|
||||
{
|
||||
text: '前端四：霍格沃茨画像',
|
||||
link: '/zh-cn/project/chapter4/chapter4-lets-build-hogwarts-portraits'
|
||||
},
|
||||
{
|
||||
text: '后端二：Supabase 数据库',
|
||||
link: '/zh-cn/project/chapter5/chapter5-from-database-to-supabase'
|
||||
},
|
||||
{
|
||||
text: 'AI 一：Dify & Knowledge Base',
|
||||
link: '/zh-cn/project/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/zh-cn/appendix/': [
|
||||
{
|
||||
text: '附录',
|
||||
items: [
|
||||
{ text: 'AI 能力词典', link: '/zh-cn/appendix/ai-capability-dictionary' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: '页面导航'
|
||||
|
||||
// 英文
|
||||
'en-us': {
|
||||
label: 'English (US)',
|
||||
lang: 'en-US',
|
||||
link: '/en-us/',
|
||||
title: 'Easy-Vibe Tutorial',
|
||||
description: 'Learn Vibe Coding from Zero to Advanced',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'On this page'
|
||||
},
|
||||
nav: [
|
||||
{ text: 'Home', link: '/en-us/' },
|
||||
{ text: 'Getting Started', link: '/en-us/stage-0/0.1-learning-map/' },
|
||||
{ text: 'AI Product Manager', link: '/en-us/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'Full-Stack Development',
|
||||
link: '/en-us/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: 'Advanced Development',
|
||||
link: '/en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: 'Appendix', link: '/en-us/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
// TODO: Add English sidebar when content is ready
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
nav: [
|
||||
{ text: '首页', link: '/' },
|
||||
{ text: '新手入门', link: '/stage-0/0.1-learning-map/' },
|
||||
{ text: '产品经理', link: '/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: '初中级开发',
|
||||
link: '/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '高级开发',
|
||||
link: '/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: '附录', link: '/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {
|
||||
'/stage-0/': [
|
||||
{ text: '1. 学习地图', link: '/stage-0/0.1-learning-map/' },
|
||||
{
|
||||
text: '2. AI 时代，会说话就会编程',
|
||||
link: '/stage-0/0.2-ai-capabilities-through-games/'
|
||||
}
|
||||
],
|
||||
'/stage-1/': [
|
||||
{
|
||||
text: '1. 认识 AI IDE 工具',
|
||||
link: '/stage-1/1.1-introduction-to-ai-ide/'
|
||||
|
||||
// 日文
|
||||
'ja-jp': {
|
||||
label: '日本語',
|
||||
lang: 'ja-JP',
|
||||
link: '/ja-jp/',
|
||||
title: 'Easy-Vibe チュートリアル',
|
||||
description: 'ゼロから学ぶ Vibe Coding',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'このページの目次'
|
||||
},
|
||||
{
|
||||
text: '2. 动手做出原型',
|
||||
link: '/stage-1/1.2-building-prototype/'
|
||||
},
|
||||
{
|
||||
text: '3. 给原型加上 AI 能力',
|
||||
link: '/stage-1/1.3-integrating-ai-capabilities/'
|
||||
},
|
||||
{
|
||||
text: '4. 完整项目实战',
|
||||
link: '/stage-1/1.4-complete-project-practice/'
|
||||
},
|
||||
{
|
||||
text: '5. 大作业：完成一个 Web 应用原型',
|
||||
link: '/stage-1/1.5-final-project/'
|
||||
},
|
||||
{
|
||||
text: '附录 A：产品思维补充',
|
||||
link: '/stage-1/appendix-a-product-thinking/'
|
||||
},
|
||||
{
|
||||
text: '附录 B：常见报错及解决方案',
|
||||
link: '/stage-1/appendix-b-common-errors/'
|
||||
},
|
||||
{
|
||||
text: '附录示例：贪吃蛇游戏教程',
|
||||
link: '/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||
},
|
||||
{
|
||||
text: '附录示例：用 AI 搭建完整网站',
|
||||
link: '/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||
}
|
||||
],
|
||||
'/stage-2/': [
|
||||
{
|
||||
text: '前端开发',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '前端零：使用 Lovart 生产素材',
|
||||
link: '/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '前端一：Figma 与 MasterGo 入门',
|
||||
link: '/stage-2/frontend/2.1-figma-mastergo/'
|
||||
},
|
||||
{
|
||||
text: '前端二：构建第一个现代应用程序 - UI 设计',
|
||||
link: '/stage-2/frontend/2.2-ui-design/'
|
||||
},
|
||||
{
|
||||
text: '前端三：参考 UI 设计规范与多产品 UI 设计',
|
||||
link: '/stage-2/frontend/2.3-multi-product-ui/'
|
||||
},
|
||||
{
|
||||
text: '前端四：一起做霍格沃茨画像',
|
||||
link: '/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '后端与全栈',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '后端一：什么是 API',
|
||||
link: '/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api'
|
||||
},
|
||||
{
|
||||
text: '后端二：从数据库到 Supabase',
|
||||
link: '/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase'
|
||||
},
|
||||
{
|
||||
text: '后端三：大模型辅助编写接口代码与接口文档',
|
||||
link: '/stage-2/backend/2.3-ai-interface-code/'
|
||||
},
|
||||
{
|
||||
text: '后端四：Git 工作流',
|
||||
link: '/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github'
|
||||
},
|
||||
{
|
||||
text: '后端五：Zeabur 部署',
|
||||
link: '/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
||||
},
|
||||
{
|
||||
text: '后端六：现代 CLI 开发工具',
|
||||
link: '/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
||||
},
|
||||
{
|
||||
text: '后端七：如何集成 Stripe 等收费系统',
|
||||
link: '/stage-2/backend/2.7-stripe-payment/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '大作业',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '大作业 1：构建第一个现代应用程序 - 全栈应用',
|
||||
link: '/stage-2/assignments/2.1-fullstack-app/'
|
||||
},
|
||||
{
|
||||
text: '大作业 2：现代前端组件库 + Trae 实战',
|
||||
link: '/stage-2/assignments/2.2-modern-frontend-trae/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'AI 能力附录',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: 'AI 一：Dify 入门与知识库集成',
|
||||
link: '/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
||||
},
|
||||
{
|
||||
text: 'AI 二：学会查询 AI 词典与集成多模态 API',
|
||||
link: '/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/stage-3/': [
|
||||
{
|
||||
text: '核心技能',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级一：MCP 与 ClaudeCode Skills',
|
||||
link: '/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{
|
||||
text: '高级二：如何让 Coding Tools 长时间工作',
|
||||
link: '/stage-3/core-skills/3.2-long-running-tasks/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '多平台开发',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级三：如何构建微信小程序',
|
||||
link: '/stage-3/cross-platform/3.3-wechat-miniprogram/'
|
||||
},
|
||||
{
|
||||
text: '高级四：如何构建微信小程序（包含后端）',
|
||||
link: '/stage-3/cross-platform/3.4-wechat-miniprogram-backend/'
|
||||
},
|
||||
{
|
||||
text: '高级五：如何构建安卓程序',
|
||||
link: '/stage-3/cross-platform/3.5-android-app/'
|
||||
},
|
||||
{
|
||||
text: '高级六：如何构建 iOS 程序',
|
||||
link: '/stage-3/cross-platform/3.6-ios-app/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '个人品牌',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级七：如何构建属于自己的个人网页与学术博客',
|
||||
link: '/stage-3/personal-brand/3.7-personal-website-blog/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'AI 能力附录',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '高级 AI 一：什么是 RAG 以及它如何工作',
|
||||
link: '/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future'
|
||||
},
|
||||
{
|
||||
text: '高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例',
|
||||
link: '/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/guide/': [
|
||||
{
|
||||
text: '课程指南',
|
||||
items: [{ text: '课程介绍', link: '/guide/introduction' }]
|
||||
}
|
||||
],
|
||||
'/extra/': [
|
||||
{
|
||||
text: 'Extra 扩展知识（旧版，已迁移到 Stage 2/3）',
|
||||
items: [
|
||||
{
|
||||
text: 'Extra 1: Git & GitHub',
|
||||
link: '/extra/extra1/extra1-what-is-git-and-what-is-github'
|
||||
},
|
||||
{
|
||||
text: 'Extra 2: What is API',
|
||||
link: '/extra/extra2/extra2-what-is-api'
|
||||
},
|
||||
{
|
||||
text: 'Extra 5: What is RAG',
|
||||
link: '/extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future'
|
||||
},
|
||||
{
|
||||
text: 'Extra 6: Zeabur Deployment',
|
||||
link: '/extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications'
|
||||
},
|
||||
{
|
||||
text: 'Extra 7: CLI AI Tools & TDD',
|
||||
link: '/extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/examples/': [
|
||||
{
|
||||
text: 'Examples 实战案例（旧版，已迁移到 Stage 0/3）',
|
||||
items: [
|
||||
{
|
||||
text: 'Ex 0.1: Snake Game',
|
||||
link: '/examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||
},
|
||||
{
|
||||
text: 'Ex 0.2: Build Website with AI',
|
||||
link: '/examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/project/': [
|
||||
{
|
||||
text: 'Project 文档（旧版，已迁移到 Stage 2）',
|
||||
items: [
|
||||
{
|
||||
text: '前端四：霍格沃茨画像',
|
||||
link: '/project/chapter4/chapter4-lets-build-hogwarts-portraits'
|
||||
},
|
||||
{
|
||||
text: '后端二：Supabase 数据库',
|
||||
link: '/project/chapter5/chapter5-from-database-to-supabase'
|
||||
},
|
||||
{
|
||||
text: 'AI 一：Dify & Knowledge Base',
|
||||
link: '/project/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/appendix/': [
|
||||
{
|
||||
text: '附录',
|
||||
items: [
|
||||
{ text: 'AI 能力词典', link: '/appendix/ai-capability-dictionary' }
|
||||
]
|
||||
}
|
||||
]
|
||||
nav: [
|
||||
{ text: 'ホーム', link: '/ja-jp/' },
|
||||
{ text: '入門', link: '/ja-jp/stage-0/0.1-learning-map/' },
|
||||
{ text: 'AI プロダクトマネージャー', link: '/ja-jp/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'フルスタック開発',
|
||||
link: '/ja-jp/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '上級開発',
|
||||
link: '/ja-jp/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: '付録', link: '/ja-jp/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
// TODO: Add Japanese sidebar when content is ready
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/datawhalechina/easy-vibe' }
|
||||
]
|
||||
'zh-tw': {
|
||||
label: '繁體中文',
|
||||
lang: 'zh-TW',
|
||||
link: '/zh-tw/',
|
||||
title: 'Easy-Vibe 教程',
|
||||
description: '從零到一學習 Vibe Coding',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: '頁面導航'
|
||||
},
|
||||
nav: [
|
||||
{ text: '首頁', link: '/zh-tw/' },
|
||||
{ text: '新手入門', link: '/zh-tw/stage-0/0.1-learning-map/' },
|
||||
{ text: '產品經理', link: '/zh-tw/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: '初中級開發',
|
||||
link: '/zh-tw/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '高級開發',
|
||||
link: '/zh-tw/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: '附錄', link: '/zh-tw/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
'ko-kr': {
|
||||
label: '한국어',
|
||||
lang: 'ko-KR',
|
||||
link: '/ko-kr/',
|
||||
title: 'Easy-Vibe 튜토리얼',
|
||||
description: 'Vibe Coding을 처음부터 체계적으로 학습합니다',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: '페이지 탐색'
|
||||
},
|
||||
nav: [
|
||||
{ text: '홈', link: '/ko-kr/' },
|
||||
{ text: '입문', link: '/ko-kr/stage-0/0.1-learning-map/' },
|
||||
{ text: 'AI PM', link: '/ko-kr/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: '풀스택 개발',
|
||||
link: '/ko-kr/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: '고급 개발',
|
||||
link: '/ko-kr/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: '부록', link: '/ko-kr/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
'es-es': {
|
||||
label: 'Español',
|
||||
lang: 'es-ES',
|
||||
link: '/es-es/',
|
||||
title: 'Tutorial de Easy-Vibe',
|
||||
description: 'Aprende Vibe Coding desde cero hasta avanzado',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'Navegación de página'
|
||||
},
|
||||
nav: [
|
||||
{ text: 'Inicio', link: '/es-es/' },
|
||||
{ text: 'Principiante', link: '/es-es/stage-0/0.1-learning-map/' },
|
||||
{ text: 'PM de IA', link: '/es-es/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'Desarrollo Full Stack',
|
||||
link: '/es-es/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: 'Desarrollo Avanzado',
|
||||
link: '/es-es/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: 'Apéndice', link: '/es-es/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
'fr-fr': {
|
||||
label: 'Français',
|
||||
lang: 'fr-FR',
|
||||
link: '/fr-fr/',
|
||||
title: 'Tutoriel Easy-Vibe',
|
||||
description: 'Apprenez Vibe Coding de zéro à avancé',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'Navigation de page'
|
||||
},
|
||||
nav: [
|
||||
{ text: 'Accueil', link: '/fr-fr/' },
|
||||
{ text: 'Débutant', link: '/fr-fr/stage-0/0.1-learning-map/' },
|
||||
{ text: 'PM IA', link: '/fr-fr/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'Développement Full Stack',
|
||||
link: '/fr-fr/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: 'Développement Avancé',
|
||||
link: '/fr-fr/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: 'Annexe', link: '/fr-fr/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
'de-de': {
|
||||
label: 'Deutsch',
|
||||
lang: 'de-DE',
|
||||
link: '/de-de/',
|
||||
title: 'Easy-Vibe Tutorial',
|
||||
description: 'Lernen Sie Vibe Coding von Null bis Fortgeschritten',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'Seitennavigation'
|
||||
},
|
||||
nav: [
|
||||
{ text: 'Start', link: '/de-de/' },
|
||||
{ text: 'Einsteiger', link: '/de-de/stage-0/0.1-learning-map/' },
|
||||
{ text: 'KI-PM', link: '/de-de/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'Full Stack Entwicklung',
|
||||
link: '/de-de/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: 'Fortgeschrittene Entwicklung',
|
||||
link: '/de-de/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: 'Anhang', link: '/de-de/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
'ar-sa': {
|
||||
label: 'العربية',
|
||||
lang: 'ar-SA',
|
||||
link: '/ar-sa/',
|
||||
title: 'دروس Easy-Vibe',
|
||||
description: 'تعلم Vibe Coding من الصفر إلى المتقدم',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'تنقل الصفحة'
|
||||
},
|
||||
nav: [
|
||||
{ text: 'الرئيسية', link: '/ar-sa/' },
|
||||
{ text: 'المبتدئين', link: '/ar-sa/stage-0/0.1-learning-map/' },
|
||||
{ text: 'مدير منتج AI', link: '/ar-sa/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'تطوير Full Stack',
|
||||
link: '/ar-sa/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: 'تطوير متقدم',
|
||||
link: '/ar-sa/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: 'ملحق', link: '/ar-sa/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
},
|
||||
'vi-vn': {
|
||||
label: 'Tiếng Việt',
|
||||
lang: 'vi-VN',
|
||||
link: '/vi-vn/',
|
||||
title: 'Hướng dẫn Easy-Vibe',
|
||||
description: 'Học Vibe Coding từ cơ bản đến nâng cao',
|
||||
head: commonHead,
|
||||
themeConfig: {
|
||||
...commonThemeConfig,
|
||||
outline: {
|
||||
level: [1, 6],
|
||||
label: 'Điều hướng trang'
|
||||
},
|
||||
nav: [
|
||||
{ text: 'Trang chủ', link: '/vi-vn/' },
|
||||
{ text: 'Người mới', link: '/vi-vn/stage-0/0.1-learning-map/' },
|
||||
{ text: 'PM AI', link: '/vi-vn/stage-1/1.1-introduction-to-ai-ide/' },
|
||||
{
|
||||
text: 'Phát triển Full Stack',
|
||||
link: '/vi-vn/stage-2/frontend/2.0-lovart-assets/'
|
||||
},
|
||||
{
|
||||
text: 'Phát triển Nâng cao',
|
||||
link: '/vi-vn/stage-3/core-skills/3.1-mcp-claudecode-skills/'
|
||||
},
|
||||
{ text: 'Phụ lục', link: '/vi-vn/appendix/ai-capability-dictionary' }
|
||||
],
|
||||
sidebar: {}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -206,3 +206,29 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移除链接下划线，改善阅读体验 */
|
||||
.vp-doc a {
|
||||
text-decoration: none !important;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-bottom-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.vp-doc a:hover {
|
||||
border-bottom-color: var(--vp-c-brand-1, #646cff);
|
||||
}
|
||||
|
||||
/* 链接保持无下划线，只在悬停时显示 */
|
||||
.VPDoc a,
|
||||
.VPLink a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* 侧边栏链接无下划线 */
|
||||
.VPSidebarItem .VPLink {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.VPSidebarItem .VPLink:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
# 🚀 部署说明
|
||||
|
||||
## Base 路径自动适配
|
||||
|
||||
本项目的 VitePress 配置已经正确处理了 **Vercel** 和 **GitHub Pages** 两种部署环境的不同 base 路径。
|
||||
|
||||
### 自动适配逻辑
|
||||
|
||||
```javascript
|
||||
// docs/.vitepress/config.mjs
|
||||
const isVercel = process.env.VERCEL === '1'
|
||||
const base = isVercel ? '/' : '/easy-vibe/'
|
||||
```
|
||||
|
||||
### 部署环境对比
|
||||
|
||||
| 平台 | Base 路径 | 示例 URL |
|
||||
|------|----------|----------|
|
||||
| **Vercel** | `/` | `https://your-project.vercel.app/cn/stage-0/...` |
|
||||
| **GitHub Pages** | `/easy-vibe/` | `https://datawhalechina.github.io/easy-vibe/cn/stage-0/...` |
|
||||
| **本地开发** | `/easy-vibe/` | `http://localhost:5173/easy-vibe/cn/stage-0/...` |
|
||||
| **本地预览** | `/easy-vibe/` | `http://localhost:4173/easy-vibe/cn/stage-0/...` |
|
||||
|
||||
### 首页动态链接
|
||||
|
||||
首页使用 VitePress 的 `useData()` API 来动态获取 base 路径：
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const { site } = useData()
|
||||
const base = site.value.base
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="base + 'cn/stage-0/0.1-learning-map/'">
|
||||
<!-- 链接会自动适配部署环境 -->
|
||||
</a>
|
||||
</template>
|
||||
```
|
||||
|
||||
**优点**：
|
||||
- ✅ 无需硬编码 fallback 值
|
||||
- ✅ 自动适配 Vercel 和 GitHub Pages
|
||||
- ✅ 构建时和运行时都正确
|
||||
|
||||
## 部署步骤
|
||||
|
||||
### Vercel 部署
|
||||
|
||||
1. 推送代码到 GitHub
|
||||
2. Vercel 会自动检测 `vercel.json` 配置
|
||||
3. 自动构建并部署
|
||||
4. 访问 `https://your-project.vercel.app`
|
||||
|
||||
**环境变量**：Vercel 自动设置 `VERCEL=1`
|
||||
|
||||
### GitHub Pages 部署
|
||||
|
||||
1. 配置 GitHub Pages 设置：
|
||||
- Source: `gh-pages` 分支
|
||||
- 或使用 GitHub Actions 从 `main` 分支部署
|
||||
|
||||
2. 构建命令：
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
3. 访问 `https://datawhalechina.github.io/easy-vibe`
|
||||
|
||||
## 验证部署
|
||||
|
||||
部署后检查以下链接是否正常：
|
||||
|
||||
- [ ] 首页能正常访问
|
||||
- [ ] 导航栏链接能正确跳转
|
||||
- [ ] 首页卡片"查看详情"链接正确
|
||||
- [ ] 语言切换功能正常
|
||||
- [ ] 图片资源能正常加载
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: Vercel 部署后链接变成 `/easy-vibe/cn/...` 导致 404
|
||||
|
||||
**原因**：Vercel 环境变量未正确设置
|
||||
|
||||
**解决**：
|
||||
1. 检查 Vercel 项目设置中 `Environment Variables`
|
||||
2. 确保 `VERCEL` = `1` 已设置（通常自动设置）
|
||||
3. 重新部署
|
||||
|
||||
### Q: GitHub Pages 部署后所有链接 404
|
||||
|
||||
**原因**：缺少 `/easy-vibe/` base 路径
|
||||
|
||||
**解决**：
|
||||
1. 检查 `docs/.vitepress/config.mjs` 中的 base 配置
|
||||
2. 确保 GitHub Pages 环境下 `isVercel = false`
|
||||
3. 重新构建并部署
|
||||
|
||||
### Q: 本地预览链接缺少 `/easy-vibe/` 前缀
|
||||
|
||||
**原因**：使用了错误的预览命令
|
||||
|
||||
**解决**：
|
||||
```bash
|
||||
# 错误
|
||||
npm run preview # 默认端口 4173，但路径可能不对
|
||||
|
||||
# 正确
|
||||
npm run build
|
||||
npm run preview # 访问 http://localhost:4173/easy-vibe/
|
||||
```
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'تعلم Vibe Coding من الصفر'
|
||||
tagline:
|
||||
- كن شخصًا خارقًا يجمع بين المنتج والتصميم والتطوير الكامل.
|
||||
- من الفكرة إلى النموذج الأولي، من النموذج الأولي إلى المنتج، حول كل مخرج إلى منتج قابل للتسليم.
|
||||
- اجعل AI شريكك: أسرع ، أكثر استقرارًا ، أكثر إبداعًا.
|
||||
- ابنِ خندقك التكنولوجي والمنتجي مع مسار تعلم منهجي.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: ابدأ التعلم
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ Star على GitHub
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: ودود للمبتدئين
|
||||
details: مصمم لخلفيات غير تقنية. ابدأ بـ "إذا يمكنك التحدث ، يمكنك البرمجة" ، ابدأ بسرعة من خلال ألعاب مثل Snake ، وتغلب على الخوف التقني.
|
||||
- title: مسار تدريجي عملي
|
||||
details: طريقة تعلم فريدة "ثلاث مراحل". من تفكير مدير منتج AI ، إلى تطوير كامل المكدس ، إلى بناء تطبيقات معقدة ، خطوة بخطوة.
|
||||
- title: Vibe Coding نموذج جديد
|
||||
details: إتقان جوهر البرمجة في عصر الذكاء الاصطناعي. تعلم البرمجة الزوجية مع AI ، وجعل IDE أقوى شريك لك.
|
||||
- title: مدفوع بمشاريع حقيقية
|
||||
details: لا رمز ألعاب. قم ببناء نماذج ويب وتطبيقات كاملة المكدس وبرامج WeChat المصغرة بيديك ، وجعل كل فكرة منتجًا حقًا.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 الترجمة العربية قيد التقدم</h2>
|
||||
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||
نحن نعمل بجد لترجمة البرنامج التعليمي الكامل لـ Easy-Vibe إلى العربية.<br>
|
||||
ترقبوا النسخة الكاملة!<br><br>
|
||||
في هذه الأثناء ، يمكنك زيارة<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">النسخة الإنجليزية</a> أو <a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">النسخة الصينية</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">هل تجد هذا مفيدًا؟</h3>
|
||||
<p class="support-text">Star الخاص بك يحفزنا على الاستمرار في التحديث 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Lernen Sie Vibe Coding von Null'
|
||||
tagline:
|
||||
- Werden Sie eine Superperson, die Produkt, Design und Full-Stack-Entwicklung kombiniert.
|
||||
- Von Idee zu Prototyp, von Prototyp zu Produkt, machen Sie aus jeder Ausgabe ein lieferbares Produkt.
|
||||
- Machen Sie die KI zu Ihrem Partner: schneller, stabiler, kreativer.
|
||||
- Bauen Sie Ihren technologie- und produktbezogenen Graben mit einem systematischen Lernpfad auf.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Lernen beginnen
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ Star auf GitHub
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: Einsteigerfreundlich
|
||||
details: Entwickelt für nicht-technische Hintergründe. Beginnen Sie mit "wenn Sie sprechen können, können Sie programmieren", starten Sie schnell durch Spiele wie Snake, und überwinden Sie technische Angst.
|
||||
- title: Progressive Praxis-Route
|
||||
details: Einzigartige "Drei-Phasen"-Lernmethode. Von KI-Produktmanager-Denken, bis zu Full-Stack-Entwicklungs-Implementierung, bis zum Aufbau komplexer Anwendungen, Schritt für Schritt.
|
||||
- title: Vibe Coding Neues Paradigma
|
||||
details: Meistern Sie den Kern der Programmierung im KI-Zeitalter. Lernen Sie, mit der KI zu paaren, und machen Sie Ihre IDE zu Ihrem stärksten Partner.
|
||||
- title: Durch echte Projekte getrieben
|
||||
details: Kein Spielzeugcode. Bauen Sie Web-Prototypen, Full-Stack-Anwendungen, WeChat-Mini-Programme mit Ihren eigenen Händen und machen Sie wirklich jede Idee zu einem Produkt.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Deutsche Übersetzung läuft</h2>
|
||||
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||
Wir arbeiten hart daran, das vollständige Easy-Vibe-Tutorial auf Deutsch zu übersetzen.<br>
|
||||
Bleiben Sie dran für die vollständige Version!<br><br>
|
||||
In der Zwischenzeit können Sie die<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">englische Version</a> oder die<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">chinesische Version</a> besuchen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">Haben Sie das nützlich gefunden?</h3>
|
||||
<p class="support-text">Ihr Star motiviert uns, weiter zu aktualisieren 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Learn Vibe Coding from 0 to 1'
|
||||
tagline:
|
||||
- Become a super individual combining product, design, and full-stack development.
|
||||
- From idea to prototype, from prototype to production, turn every output into a deliverable product.
|
||||
- Make AI your partner: faster, more stable, more creative.
|
||||
- Build your personal technology and product moat with a systematic learning path.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Start Learning
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ Star on GitHub
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: Beginner-Friendly
|
||||
details: Designed for non-technical backgrounds. Start with "if you can speak, you can code", quickly get started through games like Snake, and overcome technical fear.
|
||||
- title: Progressive Practical Path
|
||||
details: Unique "three-stage" learning method. From AI product manager thinking, to full-stack development implementation, to complex application construction, step by step.
|
||||
- title: Vibe Coding New Paradigm
|
||||
details: Master the core of AI era programming. Learn to pair-program with AI, making your IDE your strongest partner.
|
||||
- title: Real Project-Driven
|
||||
details: No toy code. Build web prototypes, full-stack applications, WeChat mini-programs with your own hands, and truly land every idea as a product.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Why Choose Easy-Vibe?</h2>
|
||||
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||
2025 is the first year of AI programming. More and more people are trying AI programming, but often stop at simple demos.<br>
|
||||
Easy-Vibe is dedicated to filling this gap, teaching you how to organize the development process with AI like a professional, from prototype to production, bridging the last mile of product landing.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="stage-container">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🌱</div>
|
||||
<h3>Stage 0: Getting Started</h3>
|
||||
<p>Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.</p>
|
||||
<a href="./stage-0/0.1-learning-map/">Learn More →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎨</div>
|
||||
<h3>Stage 1: AI Product Manager</h3>
|
||||
<p>Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.</p>
|
||||
<a href="./stage-1/1.1-introduction-to-ai-ide/">Learn More →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Stage 2: Full-Stack Development</h3>
|
||||
<p>Dive deep into full-stack development. Frontend componentization, database design, backend API development, and deployment.</p>
|
||||
<a href="./stage-2/frontend/2.0-lovart-assets/">Learn More →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Stage 3: Advanced Development</h3>
|
||||
<p>Build complex cross-platform applications. WeChat mini-program practical实战, challenge higher-level AI-native application development.</p>
|
||||
<a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">Learn More →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.stage-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||
|
||||
.stage-card {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--card-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover h3 {
|
||||
color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stage-card a {
|
||||
color: var(--card-color);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stage-card a:hover {
|
||||
text-decoration: none;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">Find this helpful?</h3>
|
||||
<p class="support-text">Your Star motivates us to keep updating 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.footer-cta:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"] {
|
||||
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||
background-size: 200% auto;
|
||||
border: 1px solid transparent !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
animation: gradient 3s linear infinite;
|
||||
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@@ -0,0 +1,178 @@
|
||||
:root {
|
||||
/* 调整侧边栏分组之间的间距 */
|
||||
--vp-sidebar-nav-section-gap: 8px;
|
||||
--ev-doc-font-size: 13px;
|
||||
--ev-doc-line-height: 1.65;
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
font-size: var(--ev-doc-font-size);
|
||||
line-height: var(--ev-doc-line-height);
|
||||
--el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
|
||||
--el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
|
||||
--el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
|
||||
--el-font-size-base: var(--ev-doc-font-size);
|
||||
--el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
|
||||
--el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
|
||||
--el-font-line-height-primary: var(--ev-doc-line-height);
|
||||
}
|
||||
|
||||
.vp-doc p,
|
||||
.vp-doc ul,
|
||||
.vp-doc ol {
|
||||
line-height: var(--ev-doc-line-height) !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.vp-doc blockquote {
|
||||
font-size: 0.9em !important;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.vp-doc blockquote p {
|
||||
font-size: inherit !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(li) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.vp-doc :where(ul, ol) {
|
||||
padding-left: 1.15em;
|
||||
}
|
||||
|
||||
.vp-doc :where(h1, h2, h3, h4, h5, h6) {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.vp-doc :where(h1) {
|
||||
margin: 22px 0 12px;
|
||||
}
|
||||
|
||||
.vp-doc :where(h2) {
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
margin: 16px 0 8px !important;
|
||||
padding-top: 10px !important;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(h3) {
|
||||
margin: 18px 0 8px;
|
||||
}
|
||||
|
||||
.vp-doc :where(h4, h5, h6) {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.vp-doc :where(hr) {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.vp-doc :where(th, td) {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.vp-doc :where(:not(pre) > code) {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* 减少一级标题（如"前端开发"）底部的间距 */
|
||||
.VPSidebarItem.level-0 {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
/* 减少一级标题文字与下方子菜单的间距 */
|
||||
.VPSidebarItem.level-0 > .item {
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
/* 调整子菜单项之间的间距 - 针对所有层级 */
|
||||
.VPSidebarItem.level-1 .item,
|
||||
.VPSidebarItem.level-2 .item,
|
||||
.VPSidebarItem.level-3 .item,
|
||||
.VPSidebarItem.level-4 .item {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
min-height: 24px !important; /* 强制减小最小高度 */
|
||||
}
|
||||
|
||||
/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
|
||||
.VPSidebarGroup {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* 进一步压缩分组标题与第一项之间的间距 */
|
||||
.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
|
||||
margin-top: -2px !important;
|
||||
}
|
||||
|
||||
/* 压缩分组标题本身的行高 */
|
||||
.VPSidebarItem.level-0 .text {
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
/* 压缩子项的行高 */
|
||||
.VPSidebarItem.level-1 .text,
|
||||
.VPSidebarItem.level-2 .text,
|
||||
.VPSidebarItem.level-3 .text {
|
||||
line-height: 1.4 !important;
|
||||
padding: 0 !important; /* 移除文字本身的内边距 */
|
||||
}
|
||||
|
||||
/* 强制链接本身没有额外的边距 */
|
||||
.VPSidebarItem .VPLink {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* 图片高度限制策略：根据长宽比调整最大高度 */
|
||||
/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
|
||||
.vp-doc img.img-tall {
|
||||
max-height: 380px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-very-tall {
|
||||
max-height: 280px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-ultra-tall {
|
||||
max-height: 200px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-limit-width {
|
||||
max-width: 100% !important;
|
||||
max-height: 320px !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-limit-height {
|
||||
max-height: 450px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Fix tagline wrapping issues */
|
||||
.VPHomeHero .tagline {
|
||||
white-space: nowrap;
|
||||
max-width: none !important;
|
||||
}
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Aprende Vibe Coding desde Cero'
|
||||
tagline:
|
||||
- Conviértete en un súper individuo combinando producto, diseño y desarrollo full-stack.
|
||||
- De idea a prototipo, de prototipo a producto, convierte cada salida en un producto entregable.
|
||||
- Haz de la IA tu pareja: más rápido, más estable, más creativo.
|
||||
- Construye tu moat tecnológico y de producto con una ruta de aprendizaje sistemática.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Empezar a Aprender
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ Star en GitHub
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: Amigable para Principiantes
|
||||
details: Diseñado para antecedentes no técnicos. Comienza con "si puedes hablar, puedes programar", empieza rápidamente a través de juegos como Snake, y supera el miedo técnico.
|
||||
- title: Ruta Progresiva Práctica
|
||||
details: Método único de aprendizaje en "tres etapas". Desde el pensamiento de producto de IA, hasta la implementación de desarrollo full-stack, hasta la construcción de aplicaciones complejas, paso a paso.
|
||||
- title: Nuevo Paradigma de Vibe Coding
|
||||
details: Domina el núcleo de la programación en la era de la IA. Aprende a programar en pareja con la IA, haciendo de tu IDE tu socio más fuerte.
|
||||
- title: Impulsado por Proyectos Reales
|
||||
details: Sin código de juguete. Construye prototipos web, aplicaciones full-stack, mini-programas de WeChat con tus propias manos, y realmente lleva cada idea a un producto.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Traducción en Español en Progreso</h2>
|
||||
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||
Estamos trabajando duro para traducir el tutorial completo de Easy-Vibe al español.<br>
|
||||
¡Estén atentos para la versión completa!<br><br>
|
||||
Mientras tanto, puedes visitar la<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">versión en inglés</a> o la<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">versión en chino</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">¿Te resulta útil?</h3>
|
||||
<p class="support-text">Tu Star nos motiva a seguir actualizando 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Apprenez Vibe Coding de Zéro'
|
||||
tagline:
|
||||
- Devenez une super personne combinant produit, design et développement full-stack.
|
||||
- De l'idée au prototype, du prototype au produit, transformez chaque sortie en un produit livrable.
|
||||
- Faites de l'IA votre partenaire : plus rapide, plus stable, plus créatif.
|
||||
- Construisez votre fossé technologique et produit avec une voie d'apprentissage systématique.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Commencer à Apprendre
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ Star sur GitHub
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: Adapté aux Débutants
|
||||
details: Conçu pour les origines non techniques. Commencez par "si vous pouvez parler, vous pouvez coder", démarrez rapidement par des jeux comme Snake, et surmontez la peur technique.
|
||||
- title: Voie Progressive Pratique
|
||||
details: Méthode unique d'apprentissage en "trois étapes". De la pensée produit IA, à la implémentation développement full-stack, à la construction d'applications complexes, étape par étape.
|
||||
- title: Nouveau Paradigme de Vibe Coding
|
||||
details: Maîtrisez le cœur de la programmation à l'ère de l'IA. Apprenez à programmer en binôme avec l'IA, faisant de votre IDE votre partenaire le plus fort.
|
||||
- title: Piloté par des Projets Réels
|
||||
details: Pas de code jouet. Construisez des prototypes web, des applications full-stack, des mini-programmes WeChat de vos propres mains, et faites vraiment de chaque idée un produit.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Traduction en Français en Cours</h2>
|
||||
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||
Nous travaillons dur pour traduire le tutoriel complet d'Easy-Vibe en français.<br>
|
||||
Restez à l'écoute pour la version complète !<br><br>
|
||||
En attendant, vous pouvez visiter la<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">version anglaise</a> ou la<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">version chinoise</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">Trouvez cela utile ?</h3>
|
||||
<p class="support-text">Votre Star nous motive à continuer à mettre à jour 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
+43
-229
@@ -1,239 +1,53 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Learn Vibe Coding from 0 to 1'
|
||||
tagline:
|
||||
- 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
|
||||
- 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
|
||||
- 让 AI 成为你的搭档：更快、更稳、更有创造力。
|
||||
- 用系统化的学习路径，构建你的个人技术与产品护城河。
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 开启学习之旅
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ github 加速更新
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: 零基础友好
|
||||
details: 专为非技术背景设计。从“会说话就会编程”开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
|
||||
- title: 循序渐进的实战路径
|
||||
details: 独创“三阶段”学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
|
||||
- title: Vibe Coding 新范式
|
||||
details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
|
||||
- title: 真实项目驱动
|
||||
details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
|
||||
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||
2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
|
||||
Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
|
||||
</p>
|
||||
</div>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
<div class="stage-container">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🌱</div>
|
||||
<h3>Stage 0: 新手入门</h3>
|
||||
<p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
|
||||
<a href="./stage-0/0.1-learning-map/">查看详情 →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎨</div>
|
||||
<h3>Stage 1: AI 产品经理</h3>
|
||||
<p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
|
||||
<a href="./stage-1/1.1-introduction-to-ai-ide/">查看详情 →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Stage 2: 初中级开发</h3>
|
||||
<p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
|
||||
<a href="./stage-2/frontend/2.0-lovart-assets/">查看详情 →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Stage 3: 高级开发</h3>
|
||||
<p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
|
||||
<a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">查看详情 →</a>
|
||||
</div>
|
||||
</div>
|
||||
onMounted(() => {
|
||||
// 获取当前的基础路径（考虑 Vercel 和 GitHub Pages）
|
||||
const isVercel = typeof window !== 'undefined' && window.location.hostname.includes('vercel.app')
|
||||
const base = isVercel ? '' : '/easy-vibe'
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.stage-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||
|
||||
.stage-card {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// 语言映射：浏览器语言代码 -> 网站路径
|
||||
const langMap = {
|
||||
'zh': '/zh-cn/',
|
||||
'zh-cn': '/zh-cn/',
|
||||
'zh-tw': '/zh-tw/',
|
||||
'zh-hk': '/zh-tw/',
|
||||
'en': '/en-us/',
|
||||
'en-us': '/en-us/',
|
||||
'en-gb': '/en-us/',
|
||||
'ja': '/ja-jp/',
|
||||
'ja-jp': '/ja-jp/',
|
||||
'ko': '/ko-kr/',
|
||||
'ko-kr': '/ko-kr/',
|
||||
'es': '/es-es/',
|
||||
'es-es': '/es-es/',
|
||||
'fr': '/fr-fr/',
|
||||
'fr-fr': '/fr-fr/',
|
||||
'de': '/de-de/',
|
||||
'de-de': '/de-de/',
|
||||
'ar': '/ar-sa/',
|
||||
'ar-sa': '/ar-sa/',
|
||||
'vi': '/vi-vn/',
|
||||
'vi-vn': '/vi-vn/'
|
||||
}
|
||||
|
||||
.stage-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--card-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
// 获取浏览器语言
|
||||
const browserLang = navigator.language.toLowerCase()
|
||||
const browserLangShort = browserLang.split('-')[0]
|
||||
|
||||
// 确定目标语言
|
||||
let targetLang = langMap[browserLang] || langMap[browserLangShort]
|
||||
|
||||
// 如果没有匹配的语言，默认使用中文
|
||||
if (!targetLang) {
|
||||
targetLang = '/zh-cn/'
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover h3 {
|
||||
color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stage-card a {
|
||||
color: var(--card-color);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stage-card a:hover {
|
||||
text-decoration: none;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">觉得有帮助？</h3>
|
||||
<p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ... existing styles ... */
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.footer-cta:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px; /* Make the button slightly larger */
|
||||
}
|
||||
|
||||
/* Custom style for the GitHub Star button in Hero section */
|
||||
.VPButton.alt[href*="github.com"] {
|
||||
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||
background-size: 200% auto;
|
||||
border: 1px solid transparent !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
animation: gradient 3s linear infinite;
|
||||
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
</style>
|
||||
// 立即跳转，不显示任何内容
|
||||
window.location.replace(base + targetLang)
|
||||
})
|
||||
</script>
|
||||
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,237 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Vibe Coding を 0 から 1 へ'
|
||||
tagline:
|
||||
- プロダクト、デザイン、フルスタック開発を兼ね備えたスーパー個人になりましょう。
|
||||
- アイデアからプロトタイプへ、プロトタイプから製品へ、すべてのアウトプットを納品可能な製品にします。
|
||||
- AI をあなたのパートナーに：より速く、より安定して、より創造的に。
|
||||
- システマティックな学習パスで、あなたの個人的技術と製品の護城河を構築します。
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 学習を始める
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ GitHub で Star
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: 初心者に優しい
|
||||
details: 非技術的背景のために設計されています。「話せるならコードも書ける」から始めて、Snake などのゲームを通じて素早く始め、技術への恐怖を克服しましょう。
|
||||
- title: 段階的な実践パス
|
||||
details: 独自の「3段階」学習法。AI プロダクトマネージャー思考から、フルスタック開発実装、複雑なアプリケーション構築へ、着実に進みます。
|
||||
- title: Vibe Coding の新しいパラダイム
|
||||
details: AI 時代のプログラミングの中核をマスターしましょう。AI とペアプログラミングする方法を学び、IDE を最強のパートナーにします。
|
||||
- title: リアルプロジェクト主導
|
||||
details: おもちゃのコードはありません。Web プロトタイプ、フルスタックアプリケーション、WeChat ミニプログラムを自分の手で構築し、すべてのアイデアを本当の製品として落地させます。
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">Easy-Vibe を選ぶ理由</h2>
|
||||
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||
2025 年は AI プログラミングの元年です。ますます多くの人々が AI プログラミングを試していますが、しばしば単純なデモで止まっています。<br>
|
||||
Easy-Vibe はこのギャップを埋めることに専念しており、プロのように AI で開発プロセスを整理し、プロトタイプから製品まで、製品落地の最後の 1 キロを橋渡しする方法を教えます。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="stage-container">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🌱</div>
|
||||
<h3>Stage 0: 入門</h3>
|
||||
<p>プロダクト、運用、非技術的背景に適しています。ゲームを通じて AI プログラミングロジックを理解し、自信を構築しましょう。</p>
|
||||
<a href="./stage-0/0.1-learning-map/">詳しく見る →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎨</div>
|
||||
<h3>Stage 1: AI プロダクトマネージャー</h3>
|
||||
<p>Vibe Coding ワークフローをマスターしましょう。要件を分解し、高品質な Web アプリケーションプロトタイプを独立して完成させる方法を学びます。</p>
|
||||
<a href="./stage-1/1.1-introduction-to-ai-ide/">詳しく見る →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Stage 2: フルスタック開発</h3>
|
||||
<p>フルスタック開発に深く潜り込みましょう。フロントエンドコンポーネント化、データベース設計、バックエンド API 開発、デプロイメント。</p>
|
||||
<a href="./stage-2/frontend/2.0-lovart-assets/">詳しく見る →</a>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Stage 3: 上級開発</h3>
|
||||
<p>複雑なクロスプラットフォームアプリケーションを構築しましょう。WeChat ミニプログラム実戦、より高レベルの AI ネイティブアプリケーション開発に挑戦します。</p>
|
||||
<a href="./stage-3/core-skills/3.1-mcp-claudecode-skills/">詳しく見る →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.stage-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||
|
||||
.stage-card {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--card-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover h3 {
|
||||
color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stage-card a {
|
||||
color: var(--card-color);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stage-card a:hover {
|
||||
text-decoration: none;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">お役に立ちましたか？</h3>
|
||||
<p class="support-text">あなたの Star が更新の励みになります 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.footer-cta:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"] {
|
||||
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||
background-size: 200% auto;
|
||||
border: 1px solid transparent !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
animation: gradient 3s linear infinite;
|
||||
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@@ -0,0 +1,178 @@
|
||||
:root {
|
||||
/* 调整侧边栏分组之间的间距 */
|
||||
--vp-sidebar-nav-section-gap: 8px;
|
||||
--ev-doc-font-size: 13px;
|
||||
--ev-doc-line-height: 1.65;
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
font-size: var(--ev-doc-font-size);
|
||||
line-height: var(--ev-doc-line-height);
|
||||
--el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
|
||||
--el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
|
||||
--el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
|
||||
--el-font-size-base: var(--ev-doc-font-size);
|
||||
--el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
|
||||
--el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
|
||||
--el-font-line-height-primary: var(--ev-doc-line-height);
|
||||
}
|
||||
|
||||
.vp-doc p,
|
||||
.vp-doc ul,
|
||||
.vp-doc ol {
|
||||
line-height: var(--ev-doc-line-height) !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.vp-doc blockquote {
|
||||
font-size: 0.9em !important;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.vp-doc blockquote p {
|
||||
font-size: inherit !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(li) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.vp-doc :where(ul, ol) {
|
||||
padding-left: 1.15em;
|
||||
}
|
||||
|
||||
.vp-doc :where(h1, h2, h3, h4, h5, h6) {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.vp-doc :where(h1) {
|
||||
margin: 22px 0 12px;
|
||||
}
|
||||
|
||||
.vp-doc :where(h2) {
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
margin: 16px 0 8px !important;
|
||||
padding-top: 10px !important;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(h3) {
|
||||
margin: 18px 0 8px;
|
||||
}
|
||||
|
||||
.vp-doc :where(h4, h5, h6) {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.vp-doc :where(hr) {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.vp-doc :where(th, td) {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.vp-doc :where(:not(pre) > code) {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* 减少一级标题（如"前端开发"）底部的间距 */
|
||||
.VPSidebarItem.level-0 {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
/* 减少一级标题文字与下方子菜单的间距 */
|
||||
.VPSidebarItem.level-0 > .item {
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
/* 调整子菜单项之间的间距 - 针对所有层级 */
|
||||
.VPSidebarItem.level-1 .item,
|
||||
.VPSidebarItem.level-2 .item,
|
||||
.VPSidebarItem.level-3 .item,
|
||||
.VPSidebarItem.level-4 .item {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
min-height: 24px !important; /* 强制减小最小高度 */
|
||||
}
|
||||
|
||||
/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
|
||||
.VPSidebarGroup {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* 进一步压缩分组标题与第一项之间的间距 */
|
||||
.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
|
||||
margin-top: -2px !important;
|
||||
}
|
||||
|
||||
/* 压缩分组标题本身的行高 */
|
||||
.VPSidebarItem.level-0 .text {
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
/* 压缩子项的行高 */
|
||||
.VPSidebarItem.level-1 .text,
|
||||
.VPSidebarItem.level-2 .text,
|
||||
.VPSidebarItem.level-3 .text {
|
||||
line-height: 1.4 !important;
|
||||
padding: 0 !important; /* 移除文字本身的内边距 */
|
||||
}
|
||||
|
||||
/* 强制链接本身没有额外的边距 */
|
||||
.VPSidebarItem .VPLink {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* 图片高度限制策略：根据长宽比调整最大高度 */
|
||||
/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
|
||||
.vp-doc img.img-tall {
|
||||
max-height: 380px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-very-tall {
|
||||
max-height: 280px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-ultra-tall {
|
||||
max-height: 200px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-limit-width {
|
||||
max-width: 100% !important;
|
||||
max-height: 320px !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-limit-height {
|
||||
max-height: 450px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Fix tagline wrapping issues */
|
||||
.VPHomeHero .tagline {
|
||||
white-space: nowrap;
|
||||
max-width: none !important;
|
||||
}
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Vibe Coding을 처음부터 체계적으로 학습'
|
||||
tagline:
|
||||
- 제품, 디자인, 풀스택 개발을 결합한 슈퍼 개인이 되세요.
|
||||
- 아이디어에서 프로토타입으로, 프로토타입에서 제품으로, 모든 결과물을 실제 제품으로 전환하세요.
|
||||
- AI를 파트너로 만드세요: 더 빠르게, 더 안정적으로, 더 창의적으로.
|
||||
- 체계적인 학습 경로로 개인의 기술과 제품의 보호막을 구축하세요.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 학습 시작
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ GitHub Star
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: 초보자 친화적
|
||||
details: 비기술 배경을 위해 설계되었습니다. "말할 수 있다면 코딩할 수 있습니다"로 시작하여 스네이크 게임 등을 통해 빠르게 시작하고 기술적 두려움을 극복하세요.
|
||||
- title: 점진적 실무 경로
|
||||
details: 독특한 "3단계" 학습 방법론. AI 제품 매니저 사고방식에서 풀스택 개발 구현까지, 복잡한 애플리케이션 구축까지 단계별로.
|
||||
- title: Vibe Coding 새로운 패러다임
|
||||
details: AI 시대 프로그래밍의 핵심을 마스터하세요. AI와 페어 프로그래밍하는 법을 배우고 IDE를 가장 강력한 파트너로 만드세요.
|
||||
- title: 실제 프로젝트 주도
|
||||
details: 장난감 코드는 없습니다. 직접 웹 프로토타입, 풀스택 애플리케이션, 위챗 미니 프로그램을 구축하고 모든 아이디어를 실제 제품으로 실현하세요.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 한국어 번역 진행 중</h2>
|
||||
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||
전체 Easy-Vibe 튜토리얼을 한국어로 번역하는 작업이 진행 중입니다.<br>
|
||||
완전한 버전을 기다려주세요!<br><br>
|
||||
그 전에는<a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">중국어 간체판</a> 또는 <a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">영문판</a>을 먼저 방문하실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">도움이 되셨나요?</h3>
|
||||
<p class="support-text">Star는 저희가 계속 업데이트할 수 있는 동기가 됩니다 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../../assets
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Học Vibe Coding từ Con Số Không'
|
||||
tagline:
|
||||
- Trở thành một cá nhân siêu kết hợp sản phẩm, thiết kế và phát triển full-stack.
|
||||
- Từ ý tưởng sang nguyên mẫu, từ nguyên mẫu sang sản phẩm, biến mọi đầu ra thành sản phẩm có thể giao hàng.
|
||||
- Khiến AI trở thành đối tác của bạn: nhanh hơn, ổn định hơn, sáng tạo hơn.
|
||||
- Xây dựng hào kỹ thuật và sản phẩm cá nhân với lộ trình học tập có hệ thống.
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Bắt Đầu Học
|
||||
link: /stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ Star trên GitHub
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: Thân thiện với Người mới
|
||||
details: Được thiết kế cho nền tảng không kỹ thuật. Bắt đầu với "nếu bạn có thể nói, bạn có thể lập trình", bắt đầu nhanh thông qua các trò chơi như Snake, và vượt qua nỗi sợ kỹ thuật.
|
||||
- title: Lộ trình Thực tế Tiến bộ
|
||||
details: Phương pháp học tập độc đáo "ba giai đoạn". Từ tư duy quản lý sản phẩm AI, đến triển khai phát triển full-stack, đến xây dựng ứng dụng phức tạp, từng bước một.
|
||||
- title: Vibe Coding Paradigm Mới
|
||||
details: Làm chủ cốt lõi của lập trình trong kỷ nguyên AI. Học lập trình cặp với AI, làm cho IDE trở thành đối tác mạnh nhất của bạn.
|
||||
- title: Dẫn dắt bởi Dự án Thực
|
||||
details: Không mã đồ chơi. Tự xây dựng nguyên mẫu web, ứng dụng full-stack, chương trình nhỏ WeChat, và thực hiện biến mọi ý tưởng thành sản phẩm.
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 60px; margin-bottom: 60px;">
|
||||
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: 20px; max-width: 700px;">
|
||||
<h2 style="color: white; border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">🚧 Bản dịch tiếng Việt đang tiến hành</h2>
|
||||
<p style="color: white; font-size: 1.2rem; line-height: 1.8; margin: 0;">
|
||||
Chúng tôi đang nỗ lực dịch toàn bộ hướng dẫn Easy-Vibe sang tiếng Việt.<br>
|
||||
Hãy chờ đợi phiên bản hoàn chỉnh!<br><br>
|
||||
Trong thời gian chờ đợi, bạn có thể truy cập<a href="../en-us/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">phiên bản tiếng Anh</a> hoặc <a href="../zh-cn/" style="color: #fbbf24; text-decoration: underline; font-weight: bold;">phiên bản tiếng Trung</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">Bạn thấy có hữu ích không?</h3>
|
||||
<p class="support-text">Star của bạn thúc đẩy chúng tôi tiếp tục cập nhật 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
@@ -18,31 +18,31 @@
|
||||
|
||||
### 总附录
|
||||
|
||||
[AI 能力词典：常见 AI 核心概念与名词、场景解释](/appendix/ai-capability-dictionary)
|
||||
[AI 能力词典：常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/ai-capability-dictionary)
|
||||
|
||||
### 零、幼儿园
|
||||
|
||||
| 章节 | 关键内容 | 状态 |
|
||||
| :------------------------------------------------------------------------------- | :------------------------------------- | :--- |
|
||||
| [新手入门：学习地图](/stage-0/0.1-learning-map/) | 整体学习路径导览 | ✅ |
|
||||
| [新手入门：AI 时代，会说话就会编程](/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
|
||||
| [新手入门：学习地图](/zh-cn/stage-0/0.1-learning-map/) | 整体学习路径导览 | ✅ |
|
||||
| [新手入门：AI 时代，会说话就会编程](/zh-cn/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅ |
|
||||
|
||||
### 一、AI 产品经理
|
||||
|
||||
| 章节 | 关键内容 | 状态 |
|
||||
| :---------------------------------------------------------------------- | :------------------------------------------------ | :--- |
|
||||
| [初级二：认识 AI IDE 工具](/stage-1/1.1-introduction-to-ai-ide/) | 学会使用 IDE，掌握界面结构和高效提示方式 | ✅ |
|
||||
| [初级三：动手做出原型](/stage-1/1.2-building-prototype/) | 从产品分析拆解，到多页面产品原型实现的完整闭环 | ✅ |
|
||||
| [初级四：给原型加上 AI 能力](/stage-1/1.3-integrating-ai-capabilities/) | 理解并完成常见 AI 能力（文本图片视频）的 API 接入 | ✅ |
|
||||
| [初级五：完整项目实战](/stage-1/1.4-complete-project-practice/) | 模拟真实场景、接受用户反馈迭代并完成项目展示 | ✅ |
|
||||
| [大作业：做一个完整的 Web 应用原型并展示](/stage-1/1.5-final-project/) | 独立用 AI IDE 落地并演示一个可用 Web 应用 | ✅ |
|
||||
| [初级二：认识 AI IDE 工具](/zh-cn/stage-1/1.1-introduction-to-ai-ide/) | 学会使用 IDE，掌握界面结构和高效提示方式 | ✅ |
|
||||
| [初级三：动手做出原型](/zh-cn/stage-1/1.2-building-prototype/) | 从产品分析拆解，到多页面产品原型实现的完整闭环 | ✅ |
|
||||
| [初级四：给原型加上 AI 能力](/zh-cn/stage-1/1.3-integrating-ai-capabilities/) | 理解并完成常见 AI 能力（文本图片视频）的 API 接入 | ✅ |
|
||||
| [初级五：完整项目实战](/zh-cn/stage-1/1.4-complete-project-practice/) | 模拟真实场景、接受用户反馈迭代并完成项目展示 | ✅ |
|
||||
| [大作业：做一个完整的 Web 应用原型并展示](/zh-cn/stage-1/1.5-final-project/) | 独立用 AI IDE 落地并演示一个可用 Web 应用 | ✅ |
|
||||
|
||||
#### 附录
|
||||
|
||||
| 章节 | 关键内容 | 状态 |
|
||||
| :-------------------------------------------------------------- | :---------------------------------------- | :--- |
|
||||
| [附录A：产品思维补充](/stage-1/appendix-a-product-thinking/) | 从想法评估到需求拆解与 MVP 的产品思维框架 | ✅ |
|
||||
| [附录B：常见报错及解决方案](/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 | ✅ |
|
||||
| [附录A：产品思维补充](/zh-cn/stage-1/appendix-a-product-thinking/) | 从想法评估到需求拆解与 MVP 的产品思维框架 | ✅ |
|
||||
| [附录B：常见报错及解决方案](/zh-cn/stage-1/appendix-b-common-errors/) | vibe coding 中的常见错误及排查方法 | ✅ |
|
||||
|
||||
### 二、初中级开发工程师
|
||||
|
||||
@@ -54,14 +54,14 @@
|
||||
| 前端一：Figma 与 MasterGo 入门 | 用设计工具梳理信息架构和页面结构，为前端实现打基础 | 🚧 |
|
||||
| 前端二：构建第一个现代应用程序-UI 设计 | 基于设计稿完成组件化界面，实现从设计到代码的第一条链路 | 🚧 |
|
||||
| 前端三：参考 UI 设计规范与多产品 UI 设计 | 围绕统一主视觉扩展多产品界面，练习系统化设计能力 | 🚧 |
|
||||
| [前端四：一起做霍格沃茨画像](/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 | 🚧 |
|
||||
| [前端四：一起做霍格沃茨画像](/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits) | 从 0 到 1 做出接入 AI 能力的前端应用，串联设计与开发 | 🚧 |
|
||||
|
||||
#### 后端与全栈部分
|
||||
|
||||
| 章节 | 关键内容 | 状态 |
|
||||
| :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ | :--- |
|
||||
| 后端一：什么是 API | 理解 HTTP 接口与请求响应模型，为后端集成与联调做准备 | 🚧 |
|
||||
| [后端二：从数据库到 Supabase](/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 | 🚧 |
|
||||
| [后端二：从数据库到 Supabase](/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase) | 在 Supabase 上落地数据库和 API，打通数据模型与前端页面 | 🚧 |
|
||||
| 后端三：大模型辅助编写接口代码与接口文档 | 用大模型协助生成接口与数据库文档及代码，实现可读可测的后端 | 🚧 |
|
||||
| 后端四：Git 工作流与 Zeabur 部署 | 在 Git 工作流中管理代码，并将应用部署到 Zeabur 上线 | 🚧 |
|
||||
| 后端五：现代 CLI 开发工具 | 使用 CLI 类 AI 编程工具加速开发与调试，形成个人工程化工作流 | 🚧 |
|
||||
@@ -73,7 +73,7 @@
|
||||
|
||||
| 章节 | 关键内容 | 状态 |
|
||||
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------- | :--- |
|
||||
| [AI 一：Dify 入门与知识库集成](/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 | 🚧 |
|
||||
| [AI 一：Dify 入门与知识库集成](/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration) | 用 Dify Workflow 与基础 RAG 搭建工具类产品，为后续应用升级打样 | 🚧 |
|
||||
| AI 二：学会查询 AI 词典与集成多模态 API | 学会查找合适的模型与 API，并把文本、图像等多模态能力接入产品 | 🚧 |
|
||||
|
||||
### 三、高级开发工程师
|
||||
@@ -0,0 +1,245 @@
|
||||
---
|
||||
layout: home
|
||||
hero:
|
||||
name: 'Easy-Vibe'
|
||||
text: 'Learn Vibe Coding from 0 to 1'
|
||||
tagline:
|
||||
- 不止是写代码，而是成为集产品、设计、全栈开发于一身的超级个体。
|
||||
- 从想法到原型，从原型到上线，把每一次输出变成可交付的产品。
|
||||
- 让 AI 成为你的搭档：更快、更稳、更有创造力。
|
||||
- 用系统化的学习路径，构建你的个人技术与产品护城河。
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 开启学习之旅
|
||||
link: /zh-cn/stage-0/0.1-learning-map/
|
||||
- theme: alt
|
||||
text: ⭐️ GitHub 加速更新
|
||||
link: https://github.com/datawhalechina/easy-vibe
|
||||
features:
|
||||
- title: 零基础友好
|
||||
details: 专为非技术背景设计。从"会说话就会编程"开始，通过贪吃蛇等小游戏快速上手，打破技术恐惧。
|
||||
- title: 循序渐进的实战路径
|
||||
details: 独创"三阶段"学习法。从 AI 产品经理思维，到全栈开发落地，再到复杂应用构建，步步为营。
|
||||
- title: Vibe Coding 新范式
|
||||
details: 掌握 AI 时代的编程核心。学会与 AI 结对编程，让 IDE 成为你的最强搭档。
|
||||
- title: 真实项目驱动
|
||||
details: 拒绝玩具代码。亲手构建 Web 原型、全栈应用、微信小程序，将每一个想法真正落地为产品。
|
||||
---
|
||||
|
||||
<div align="center" style="margin-top: 40px; margin-bottom: 40px;">
|
||||
<h2 style="border: none; font-size: 2rem; font-weight: 700; margin-bottom: 20px;">为什么选择 Easy-Vibe？</h2>
|
||||
<p style="font-size: 1.2rem; color: var(--vp-c-text-2); max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
||||
2025 年是 AI 编程的元年。越来越多的人开始尝试 AI 编程，但往往止步于简单的 Demo。<br>
|
||||
Easy-Vibe 致力于填补这一空白，教你如何像专业人士一样，用 AI 组织开发流程，从原型到上线，打通产品落地的最后一公里。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { useData } from 'vitepress'
|
||||
|
||||
const { site } = useData()
|
||||
const base = site.value.base
|
||||
</script>
|
||||
|
||||
<div class="stage-container">
|
||||
<a :href="base + 'cn/stage-0/0.1-learning-map/'" class="stage-card">
|
||||
<div class="stage-icon">🌱</div>
|
||||
<h3>Stage 0: 新手入门</h3>
|
||||
<p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
|
||||
<span>查看详情 →</span>
|
||||
</a>
|
||||
<a :href="base + 'cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
|
||||
<div class="stage-icon">🎨</div>
|
||||
<h3>Stage 1: AI 产品经理</h3>
|
||||
<p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
|
||||
<span>查看详情 →</span>
|
||||
</a>
|
||||
<a :href="base + 'cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>Stage 2: 初中级开发</h3>
|
||||
<p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
|
||||
<span>查看详情 →</span>
|
||||
</a>
|
||||
<a :href="base + 'cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>Stage 3: 高级开发</h3>
|
||||
<p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
|
||||
<span>查看详情 →</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.VPHomeHero .text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.stage-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
max-width: 1152px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.stage-card:nth-child(1) { --card-color: #10b981; } /* Green for Stage 0 */
|
||||
.stage-card:nth-child(2) { --card-color: #3b82f6; } /* Blue for Stage 1 */
|
||||
.stage-card:nth-child(3) { --card-color: #8b5cf6; } /* Purple for Stage 2 */
|
||||
.stage-card:nth-child(4) { --card-color: #f59e0b; } /* Orange for Stage 3 */
|
||||
|
||||
.stage-card {
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.stage-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background-color: var(--card-color);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.stage-card:hover h3 {
|
||||
color: var(--card-color);
|
||||
}
|
||||
|
||||
.stage-card p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stage-card a {
|
||||
color: var(--card-color);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stage-card a:hover {
|
||||
text-decoration: none;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="footer-cta">
|
||||
<p class="love-text">Made with ❤️ by Open Source Contributors</p>
|
||||
<h3 class="support-title">觉得有帮助？</h3>
|
||||
<p class="support-text">你的 Star 是我们持续更新的动力 🚀</p>
|
||||
<div class="github-badge">
|
||||
<a href="https://github.com/datawhalechina/easy-vibe" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/datawhalechina/easy-vibe?style=social&label=Star on GitHub" alt="GitHub stars"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-cta {
|
||||
margin-top: 100px;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 24px;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
border: 1px solid var(--vp-c-bg-soft);
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.footer-cta:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.love-text {
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 24px;
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.support-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.support-text {
|
||||
font-size: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.github-badge {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.github-badge img {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"] {
|
||||
background: linear-gradient(90deg, #8B5CF6, #EC4899, #8B5CF6);
|
||||
background-size: 200% auto;
|
||||
border: 1px solid transparent !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
animation: gradient 3s linear infinite;
|
||||
box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.VPButton.alt[href*="github.com"]:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
|
||||
background-position: right center;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 374 KiB |
@@ -0,0 +1,178 @@
|
||||
:root {
|
||||
/* 调整侧边栏分组之间的间距 */
|
||||
--vp-sidebar-nav-section-gap: 8px;
|
||||
--ev-doc-font-size: 13px;
|
||||
--ev-doc-line-height: 1.65;
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
font-size: var(--ev-doc-font-size);
|
||||
line-height: var(--ev-doc-line-height);
|
||||
--el-font-size-extra-large: calc(var(--ev-doc-font-size) + 6px);
|
||||
--el-font-size-large: calc(var(--ev-doc-font-size) + 4px);
|
||||
--el-font-size-medium: calc(var(--ev-doc-font-size) + 2px);
|
||||
--el-font-size-base: var(--ev-doc-font-size);
|
||||
--el-font-size-small: calc(var(--ev-doc-font-size) - 1px);
|
||||
--el-font-size-extra-small: calc(var(--ev-doc-font-size) - 2px);
|
||||
--el-font-line-height-primary: var(--ev-doc-line-height);
|
||||
}
|
||||
|
||||
.vp-doc p,
|
||||
.vp-doc ul,
|
||||
.vp-doc ol {
|
||||
line-height: var(--ev-doc-line-height) !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(p, ul, ol, table, blockquote, pre, details, figure) {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.vp-doc blockquote {
|
||||
font-size: 0.9em !important;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.vp-doc blockquote p {
|
||||
font-size: inherit !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(li) {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.vp-doc :where(ul, ol) {
|
||||
padding-left: 1.15em;
|
||||
}
|
||||
|
||||
.vp-doc :where(h1, h2, h3, h4, h5, h6) {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.vp-doc :where(h1) {
|
||||
margin: 22px 0 12px;
|
||||
}
|
||||
|
||||
.vp-doc :where(h2) {
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
margin: 16px 0 8px !important;
|
||||
padding-top: 10px !important;
|
||||
border-top: 0 !important;
|
||||
}
|
||||
|
||||
.vp-doc :where(h3) {
|
||||
margin: 18px 0 8px;
|
||||
}
|
||||
|
||||
.vp-doc :where(h4, h5, h6) {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
.vp-doc :where(hr) {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.vp-doc :where(th, td) {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.vp-doc :where(:not(pre) > code) {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
/* 减少一级标题（如"前端开发"）底部的间距 */
|
||||
.VPSidebarItem.level-0 {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
/* 减少一级标题文字与下方子菜单的间距 */
|
||||
.VPSidebarItem.level-0 > .item {
|
||||
padding-bottom: 2px !important;
|
||||
}
|
||||
|
||||
/* 调整子菜单项之间的间距 - 针对所有层级 */
|
||||
.VPSidebarItem.level-1 .item,
|
||||
.VPSidebarItem.level-2 .item,
|
||||
.VPSidebarItem.level-3 .item,
|
||||
.VPSidebarItem.level-4 .item {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
min-height: 24px !important; /* 强制减小最小高度 */
|
||||
}
|
||||
|
||||
/* 针对可能存在的特定类名进行覆盖，确保紧凑 */
|
||||
.VPSidebarGroup {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
/* 进一步压缩分组标题与第一项之间的间距 */
|
||||
.VPSidebarItem.level-0 + .VPSidebarItem.level-1 {
|
||||
margin-top: -2px !important;
|
||||
}
|
||||
|
||||
/* 压缩分组标题本身的行高 */
|
||||
.VPSidebarItem.level-0 .text {
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
/* 压缩子项的行高 */
|
||||
.VPSidebarItem.level-1 .text,
|
||||
.VPSidebarItem.level-2 .text,
|
||||
.VPSidebarItem.level-3 .text {
|
||||
line-height: 1.4 !important;
|
||||
padding: 0 !important; /* 移除文字本身的内边距 */
|
||||
}
|
||||
|
||||
/* 强制链接本身没有额外的边距 */
|
||||
.VPSidebarItem .VPLink {
|
||||
padding-top: 2px !important;
|
||||
padding-bottom: 2px !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* 图片高度限制策略：根据长宽比调整最大高度 */
|
||||
/* 越高的图片（长宽比越大），限制的高度越小，避免占用过多纵向空间 */
|
||||
.vp-doc img.img-tall {
|
||||
max-height: 380px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-very-tall {
|
||||
max-height: 280px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-ultra-tall {
|
||||
max-height: 200px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-limit-width {
|
||||
max-width: 100% !important;
|
||||
max-height: 320px !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.vp-doc img.img-limit-height {
|
||||
max-height: 450px !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Fix tagline wrapping issues */
|
||||
.VPHomeHero .tagline {
|
||||
white-space: nowrap;
|
||||
max-width: none !important;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 623 KiB After Width: | Height: | Size: 623 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 379 KiB After Width: | Height: | Size: 379 KiB |
|
Before Width: | Height: | Size: 373 KiB After Width: | Height: | Size: 373 KiB |
|
Before Width: | Height: | Size: 656 KiB After Width: | Height: | Size: 656 KiB |
|
Before Width: | Height: | Size: 318 KiB After Width: | Height: | Size: 318 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 283 KiB After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 108 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 223 KiB After Width: | Height: | Size: 223 KiB |
|
Before Width: | Height: | Size: 385 KiB After Width: | Height: | Size: 385 KiB |
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 299 KiB |
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 98 KiB |
|
Before Width: | Height: | Size: 268 KiB After Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 167 KiB |
|
Before Width: | Height: | Size: 640 KiB After Width: | Height: | Size: 640 KiB |
|
Before Width: | Height: | Size: 13 MiB After Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.9 MiB |
|
Before Width: | Height: | Size: 514 KiB After Width: | Height: | Size: 514 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 5.3 MiB After Width: | Height: | Size: 5.3 MiB |
|
Before Width: | Height: | Size: 529 KiB After Width: | Height: | Size: 529 KiB |
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 313 KiB |
|
Before Width: | Height: | Size: 407 KiB After Width: | Height: | Size: 407 KiB |
|
Before Width: | Height: | Size: 587 KiB After Width: | Height: | Size: 587 KiB |
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 651 KiB After Width: | Height: | Size: 651 KiB |
|
Before Width: | Height: | Size: 3.3 MiB After Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 124 KiB After Width: | Height: | Size: 124 KiB |
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 183 KiB |
|
Before Width: | Height: | Size: 442 KiB After Width: | Height: | Size: 442 KiB |
|
Before Width: | Height: | Size: 540 KiB After Width: | Height: | Size: 540 KiB |
|
Before Width: | Height: | Size: 4.1 MiB After Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 2.6 MiB After Width: | Height: | Size: 2.6 MiB |
|
Before Width: | Height: | Size: 3.7 MiB After Width: | Height: | Size: 3.7 MiB |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 602 KiB After Width: | Height: | Size: 602 KiB |
|
Before Width: | Height: | Size: 658 KiB After Width: | Height: | Size: 658 KiB |
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 333 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 97 KiB |
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 236 KiB |
|
Before Width: | Height: | Size: 336 KiB After Width: | Height: | Size: 336 KiB |
|
Before Width: | Height: | Size: 880 KiB After Width: | Height: | Size: 880 KiB |
|
Before Width: | Height: | Size: 201 KiB After Width: | Height: | Size: 201 KiB |
|
Before Width: | Height: | Size: 388 KiB After Width: | Height: | Size: 388 KiB |
|
Before Width: | Height: | Size: 556 KiB After Width: | Height: | Size: 556 KiB |
|
Before Width: | Height: | Size: 478 KiB After Width: | Height: | Size: 478 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 92 KiB After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 402 KiB After Width: | Height: | Size: 402 KiB |
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 869 KiB After Width: | Height: | Size: 869 KiB |
|
Before Width: | Height: | Size: 517 KiB After Width: | Height: | Size: 517 KiB |
|
Before Width: | Height: | Size: 692 KiB After Width: | Height: | Size: 692 KiB |
|
Before Width: | Height: | Size: 275 KiB After Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 342 KiB After Width: | Height: | Size: 342 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user