{
    "version": "https://jsonfeed.org/version/1",
    "title": "AI Programming Blog",
    "home_page_url": "https://programming.chanmeng.org/zh-Hans/blog/",
    "description": "Learn AI-assisted programming through hands-on projects — latest articles and tutorials from the AI Programming Education Platform",
    "items": [
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/her-waka-2026-programme-intro/",
            "content_html": "<p>我们把 <strong>HER WAKA 2026</strong> 项目的全部教学内容并入了本站，作为一个全新的版本 —— <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2026-her-waka/programme/about-her-waka/\">2026 HER WAKA 活动</a> —— 与已有的「2024 年冬季她行活动」「2025 年夏季她行活动」并列。</p>\n<!-- -->\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"这是什么\">这是什么？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/her-waka-2026-programme-intro/#%E8%BF%99%E6%98%AF%E4%BB%80%E4%B9%88\" class=\"hash-link\" aria-label=\"这是什么？的直接链接\" title=\"这是什么？的直接链接\" translate=\"no\">​</a></h2>\n<p>HER WAKA 是由 <strong>SheSharp</strong> 与 <strong>Ministry of Social Development（MSD，新西兰社会发展部）</strong> 合作、<strong>academyEX</strong> 承办、<strong>RCSA</strong> 提供招聘视角的综合就业赋能项目。面向奥克兰地区准备重返职场的女性 MSD 客户，2026 年 3 月至 6 月每月一场工作坊，全部线下在 academyEX Pikopiko 举办。</p>\n<p>项目核心有三块：</p>\n<ol>\n<li class=\"\"><strong>四场线下工作坊</strong> —— AI 与未来工作、#IAmRemarkable 与 Vibe Coding、就业权益、Networking 与职业连接</li>\n<li class=\"\"><strong>10 个自学 AI 教程</strong> —— 按 ★ 到 ★★★★★ 五个难度编排，从「用 AI 总结 Gmail」到「用 Claude Code 打造 Daily Report Bot」</li>\n<li class=\"\"><strong>完整求职资源库</strong> —— 新西兰 IT 市场、求职平台、招聘机构、CV/LinkedIn、就业权益、AI 学习工具、科技社区</li>\n</ol>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"为什么要并进本站\">为什么要并进本站？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/her-waka-2026-programme-intro/#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%B9%B6%E8%BF%9B%E6%9C%AC%E7%AB%99\" class=\"hash-link\" aria-label=\"为什么要并进本站？的直接链接\" title=\"为什么要并进本站？的直接链接\" translate=\"no\">​</a></h2>\n<p>HER WAKA 原本是一个独立的 Mintlify 站点。把它合并到本站之后：</p>\n<ul>\n<li class=\"\"><strong>一套导航，三届活动</strong> —— 通过右上角版本下拉可以无缝切换 2024 冬、2025 夏、2026 HER WAKA</li>\n<li class=\"\"><strong>共享搜索与博客</strong> —— Algolia 索引一次性覆盖三届内容，博客持续更新</li>\n<li class=\"\"><strong>双语支持</strong> —— 中文为默认；切换到 English 可看原版英文教学（原生为 MSD 客户设计）</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"快速入口\">快速入口<a href=\"https://programming.chanmeng.org/zh-Hans/blog/her-waka-2026-programme-intro/#%E5%BF%AB%E9%80%9F%E5%85%A5%E5%8F%A3\" class=\"hash-link\" aria-label=\"快速入口的直接链接\" title=\"快速入口的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">👉 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2026-her-waka/programme/about-her-waka/\">项目介绍</a></li>\n<li class=\"\">👉 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2026-her-waka/programme/schedule/\">四场工作坊日程</a></li>\n<li class=\"\">👉 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2026-her-waka/tutorial/\">10 个自学教程总览</a></li>\n<li class=\"\">👉 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2026-her-waka/resources/job-readiness/\">求职资源库</a></li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"技术笔记为好奇的同学\">技术笔记（为好奇的同学）<a href=\"https://programming.chanmeng.org/zh-Hans/blog/her-waka-2026-programme-intro/#%E6%8A%80%E6%9C%AF%E7%AC%94%E8%AE%B0%E4%B8%BA%E5%A5%BD%E5%A5%87%E7%9A%84%E5%90%8C%E5%AD%A6\" class=\"hash-link\" aria-label=\"技术笔记（为好奇的同学）的直接链接\" title=\"技术笔记（为好奇的同学）的直接链接\" translate=\"no\">​</a></h2>\n<p>原站使用 Mintlify 专有组件（<code>&lt;Card&gt;</code>/<code>&lt;Tabs&gt;</code>/<code>&lt;Steps&gt;</code>/<code>&lt;Accordion&gt;</code> 等）。为避免 1000+ 处 MDX 手动改写，本次迁移通过一个轻量的 <strong>MintlifyShim 兼容层</strong> 把这些组件映射到 Docusaurus 原生能力（<code>@theme/Tabs</code>、<code>@theme/Admonition</code>、原生 <code>&lt;details&gt;</code> 等），并通过 swizzle <code>MDXComponents.js</code> 全局注入，MDX 文件几乎零改动。这套兼容层未来也可以复用到任何从 Mintlify 迁来的项目。</p>\n<p>祝学习愉快 🌸</p>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/her-waka-2026-programme-intro/",
            "title": "HER WAKA 2026：为奥克兰女性准备的 AI × 就业赋能项目",
            "summary": "SheSharp × MSD × AcademyEX 联合推出的 HER WAKA 2026 —— 四场线下工作坊、10 个自学 AI 教程、完整求职资源库。现已作为新版本并入本站。",
            "date_modified": "2026-03-01T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "她行活动",
                "AI编程",
                "教程"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/",
            "content_html": "<p>在 AI 编程工具百花齐放的 2025 年，<strong>Cursor IDE</strong> 和 <strong>Gemini CLI</strong> 是两种截然不同的开发体验。Cursor 提供的是一个完整的可视化 IDE，而 Gemini CLI 则是纯命令行的 AI 助手。本文将从多个维度深度对比这两款工具，帮助你找到最适合自己的选择。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"工具概览\">工具概览<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E5%B7%A5%E5%85%B7%E6%A6%82%E8%A7%88\" class=\"hash-link\" aria-label=\"工具概览的直接链接\" title=\"工具概览的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"cursor-ide\">Cursor IDE<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#cursor-ide\" class=\"hash-link\" aria-label=\"Cursor IDE的直接链接\" title=\"Cursor IDE的直接链接\" translate=\"no\">​</a></h3>\n<p>Cursor 是基于 VS Code 的 AI 增强型编辑器。它将 AI 能力深度集成到编辑器的每一个环节中，包括代码补全、代码编辑、多文件修改和对话式开发。</p>\n<p><strong>核心特点</strong>：</p>\n<ul>\n<li class=\"\">基于 VS Code，界面和操作习惯完全兼容</li>\n<li class=\"\">Cmd+K / Ctrl+K 快捷键调用内联编辑</li>\n<li class=\"\">Composer 模式支持跨文件的大规模修改</li>\n<li class=\"\">自动理解项目上下文</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"gemini-cli\">Gemini CLI<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#gemini-cli\" class=\"hash-link\" aria-label=\"Gemini CLI的直接链接\" title=\"Gemini CLI的直接链接\" translate=\"no\">​</a></h3>\n<p>Gemini CLI 是 Google 推出的命令行 AI 工具，基于 Gemini 大模型。它运行在终端中，通过自然语言对话完成开发任务。</p>\n<p><strong>核心特点</strong>：</p>\n<ul>\n<li class=\"\">纯命令行操作，无需图形界面</li>\n<li class=\"\">可以直接执行系统命令</li>\n<li class=\"\">理解项目文件结构和内容</li>\n<li class=\"\">免费使用（有每日限额）</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"功能对比\">功能对比<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E5%8A%9F%E8%83%BD%E5%AF%B9%E6%AF%94\" class=\"hash-link\" aria-label=\"�功能对比的直接链接\" title=\"功能对比的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"代码编辑\">代码编辑<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91\" class=\"hash-link\" aria-label=\"代码编辑的直接链接\" title=\"代码编辑的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"theme-tabs-container tabs-container tabList__CuJ\"><ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\"><li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">Cursor IDE</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">Gemini CLI</li></ul><div class=\"margin-top--md\"><div role=\"tabpanel\" class=\"tabItem_Ymn6\"><p><strong>优势</strong>：</p><ul>\n<li class=\"\">实时代码补全，边打字边提示</li>\n<li class=\"\">Tab 键一键接受建议</li>\n<li class=\"\">Cmd+K 选中代码后直接描述修改意图</li>\n<li class=\"\">可以看到修改前后的 diff 对比</li>\n</ul><p><strong>体验</strong>：</p><div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">1. 选中一段代码</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">2. 按 Cmd+K</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">3. 输入：\"添加错误处理和日志记录\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">4. 预览修改 → 接受/拒绝</span><br></span></code></pre></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><p><strong>优势</strong>：</p><ul>\n<li class=\"\">通过自然语言描述任意修改</li>\n<li class=\"\">可以同时操作多个文件</li>\n<li class=\"\">可以创建新文件和目录结构</li>\n<li class=\"\">不受编辑器界面限制</li>\n</ul><p><strong>体验</strong>：</p><div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我在 src/utils.js 中添加一个日期格式化函数，</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  支持中文和英文两种格式，并给它写单元测试</span><br></span></code></pre></div></div></div></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"项目管理\">项目管理<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86\" class=\"hash-link\" aria-label=\"项目管理的直接链接\" title=\"项目管理的直接链接\" translate=\"no\">​</a></h3>\n<table><thead><tr><th>能力</th><th>Cursor IDE</th><th>Gemini CLI</th></tr></thead><tbody><tr><td>创建新项目</td><td>需要手动或用终端</td><td>直接通过对话创建</td></tr><tr><td>安装依赖</td><td>使用集成终端</td><td>直接执行 npm/pip 命令</td></tr><tr><td>Git 操作</td><td>使用内置 Git 面板或终端</td><td>自然语言驱动</td></tr><tr><td>环境配置</td><td>手动配置</td><td>AI 自动诊断和修复</td></tr><tr><td>文件重命名/移动</td><td>图形化操作</td><td>自然语言指令</td></tr></tbody></table>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"学习与调试\">学习与调试<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E5%AD%A6%E4%B9%A0%E4%B8%8E%E8%B0%83%E8%AF%95\" class=\"hash-link\" aria-label=\"学习与调试的直接链接\" title=\"学习与调试的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>Cursor IDE</strong> 更适合在写代码时即时获得帮助：</p>\n<ul>\n<li class=\"\">遇到报错？选中错误信息，Cmd+L 发送给 AI</li>\n<li class=\"\">不理解某段代码？选中后按 Cmd+L 询问</li>\n<li class=\"\">需要重构？选中代码，Cmd+K 描述新的结构</li>\n</ul>\n<p><strong>Gemini CLI</strong> 更适合整体性的问题排查：</p>\n<ul>\n<li class=\"\">\"帮我检查这个项目为什么运行不起来\"</li>\n<li class=\"\">\"分析一下这个项目的性能瓶颈\"</li>\n<li class=\"\">\"把这个项目从 JavaScript 迁移到 TypeScript\"</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"适用场景分析\">适用场景分析<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E9%80%82%E7%94%A8%E5%9C%BA%E6%99%AF%E5%88%86%E6%9E%90\" class=\"hash-link\" aria-label=\"适用场景分析的直接链接\" title=\"适用场景分析的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"选择-cursor-ide-的场景\">选择 Cursor IDE 的场景<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E9%80%89%E6%8B%A9-cursor-ide-%E7%9A%84%E5%9C%BA%E6%99%AF\" class=\"hash-link\" aria-label=\"选择 Cursor IDE 的场景的直接链接\" title=\"选择 Cursor IDE 的场景的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">\n<p><strong>日常编码工作</strong></p>\n<ul>\n<li class=\"\">你大部分时间都在写代码和修改代码</li>\n<li class=\"\">你需要实时的代码补全和建议</li>\n<li class=\"\">你习惯在图形化 IDE 中工作</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>团队协作项目</strong></p>\n<ul>\n<li class=\"\">项目有严格的代码规范</li>\n<li class=\"\">需要频繁的代码审查</li>\n<li class=\"\">需要精细控制每一行改动</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>复杂应用开发</strong></p>\n<ul>\n<li class=\"\">大型前端应用（React/Vue/Angular）</li>\n<li class=\"\">后端 API 开发</li>\n<li class=\"\">需要频繁在多个文件之间切换</li>\n</ul>\n</li>\n</ol>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"选择-gemini-cli-的场景\">选择 Gemini CLI 的场景<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E9%80%89%E6%8B%A9-gemini-cli-%E7%9A%84%E5%9C%BA%E6%99%AF\" class=\"hash-link\" aria-label=\"选择 Gemini CLI 的场景的直接链接\" title=\"选择 Gemini CLI 的场景的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">\n<p><strong>环境管理和项目搭建</strong></p>\n<ul>\n<li class=\"\">初始化新项目</li>\n<li class=\"\">安装和配置开发工具</li>\n<li class=\"\">系统环境诊断和修复</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>学习编程</strong></p>\n<ul>\n<li class=\"\">你是零基础初学者</li>\n<li class=\"\">想通过实际项目学习</li>\n<li class=\"\">需要 AI 手把手指导</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>自动化任务</strong></p>\n<ul>\n<li class=\"\">批量文件处理</li>\n<li class=\"\">数据格式转换</li>\n<li class=\"\">部署和运维脚本</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>预算有限</strong></p>\n<ul>\n<li class=\"\">Gemini CLI 免费使用</li>\n<li class=\"\">不需要额外订阅费用</li>\n</ul>\n</li>\n</ol>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"上手难度对比\">上手难度对比<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E4%B8%8A%E6%89%8B%E9%9A%BE%E5%BA%A6%E5%AF%B9%E6%AF%94\" class=\"hash-link\" aria-label=\"上手难度对比的直接链接\" title=\"上手难度对比的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"cursor-ide-1\">Cursor IDE<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#cursor-ide-1\" class=\"hash-link\" aria-label=\"Cursor IDE的直接链接\" title=\"Cursor IDE的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>学习曲线</strong>：低（如果熟悉 VS Code）/ 中等（如果是新手）</p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第1天：安装 Cursor，熟悉界面</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第2天：学习 Cmd+K（内联编辑）和 Cmd+L（AI 对话）</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第3天：尝试 Composer 模式进行多文件编辑</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第4天：定制设置，了解 .cursorrules 文件</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"gemini-cli-1\">Gemini CLI<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#gemini-cli-1\" class=\"hash-link\" aria-label=\"Gemini CLI的直接链接\" title=\"Gemini CLI的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>学习曲线</strong>：中等</p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第1天：安装 Node.js 和 Gemini CLI，完成授权</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第2天：学习基本对话交互，文件读写操作</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第3天：尝试项目级别的操作（创建、修改、部署）</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第4天：学习高级用法，建立自己的工作流</span><br></span></code></pre></div></div>\n<div class=\"theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>入门建议</div><div class=\"admonitionContent_BuS1\"><p>如果你完全没有编程经验，建议从 Gemini CLI 开始。它的对话式交互更接近日常聊天，学习曲线更平缓。等你对编程有了基本认知后，再过渡到 Cursor IDE 进行更高效的日常开发。</p></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"费用对比\">费用对比<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E8%B4%B9%E7%94%A8%E5%AF%B9%E6%AF%94\" class=\"hash-link\" aria-label=\"费用对比的直接链接\" title=\"费用对比的直接链接\" translate=\"no\">​</a></h2>\n<table><thead><tr><th>方案</th><th>Cursor IDE</th><th>Gemini CLI</th></tr></thead><tbody><tr><td><strong>免费版</strong></td><td>有限次数 AI 调用</td><td>每日有使用限额</td></tr><tr><td><strong>个人版</strong></td><td>$20/月</td><td>免费</td></tr><tr><td><strong>团队版</strong></td><td>$40/月/人</td><td>-</td></tr><tr><td><strong>性价比</strong></td><td>高（对专业开发者）</td><td>极高（免费）</td></tr></tbody></table>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"最佳实践两者结合使用\">最佳实践：两者结合使用<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5%E4%B8%A4%E8%80%85%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8\" class=\"hash-link\" aria-label=\"最佳实践：两者结合使用的直接链接\" title=\"最佳实践：两者结合使用的直接链接\" translate=\"no\">​</a></h2>\n<p>实际上，这两款工具并不是非此即彼的关系。最高效的方式是<strong>根据任务类型灵活切换</strong>：</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"推荐工作流\">推荐工作流<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E6%8E%A8%E8%8D%90%E5%B7%A5%E4%BD%9C%E6%B5%81\" class=\"hash-link\" aria-label=\"推荐工作流的直接链接\" title=\"推荐工作流的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">1. 项目初始化 → Gemini CLI</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">   \"创建一个 Next.js 项目，配置好 TypeScript 和 Tailwind CSS\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">2. 日常编码 → Cursor IDE</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">   在 Cursor 中编写和修改代码，享受实时补全</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">3. 环境问题排查 → Gemini CLI</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">   \"为什么我的项目 build 失败了？帮我排查\"</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">4. 大规模重构 → Cursor IDE（Composer 模式）</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">   使用 Composer 进行跨文件的结构调整</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">5. 部署和运维 → Gemini CLI</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">   \"帮我配置 Vercel 部署，设置环境变量\"</span><br></span></code></pre></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"总结\">总结<a href=\"https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/#%E6%80%BB%E7%BB%93\" class=\"hash-link\" aria-label=\"总结的直接链接\" title=\"总结的直接链接\" translate=\"no\">​</a></h2>\n<table><thead><tr><th>维度</th><th>Cursor IDE</th><th>Gemini CLI</th></tr></thead><tbody><tr><td><strong>最大优势</strong></td><td>深度集成的编码体验</td><td>免费且操作灵活</td></tr><tr><td><strong>最大限制</strong></td><td>需要付费</td><td>没有图形界面</td></tr><tr><td><strong>适合人群</strong></td><td>日常写代码的开发者</td><td>初学者、运维、项目搭建</td></tr><tr><td><strong>推荐指数</strong></td><td>专业开发者必备</td><td>零基础入门首选</td></tr></tbody></table>\n<p>没有最好的工具，只有最适合当前任务的工具。了解每款工具的优势和局限，根据实际需求灵活选择，才是 AI 时代的正确打开方式。</p>\n<hr>\n<div class=\"theme-admonition theme-admonition-info admonition_xJq3 alert alert--info\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"></path></svg></span>动手试试</div><div class=\"admonitionContent_BuS1\"><p>想要亲身体验 Gemini CLI 的强大能力？从我们的 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/basics/\">Gemini CLI 环境管理课程</a> 开始，7天内搭建你的第一个 AI 项目！</p><p>已经在使用 Cursor 或其他工具？欢迎在 <a href=\"https://discord.gg/T3NJG5n98a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Discord 社区</a> 分享你的工具使用心得！</p></div></div>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/cursor-ide-vs-gemini-cli/",
            "title": "Cursor IDE vs Gemini CLI：AI 编程工具深度对比",
            "summary": "深度对比 Cursor IDE 和 Gemini CLI 两大 AI 编程工具。分析它们的优势、适用场景、上手难度和性价比，帮助你选择最适合自己的 AI 编程助手。",
            "date_modified": "2025-08-10T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "Cursor IDE",
                "Gemini CLI",
                "工具对比",
                "AI工具",
                "AI编程"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/",
            "content_html": "<p>AI 正在改变编程学习的方式。过去，学习编程意味着花费数月时间记忆语法、理解算法。而现在，AI 编程助手让你可以用自然语言描述需求，就能生成可运行的代码。本文将帮助你理解 AI 辅助编程是什么，以及如何从零开始高效学习。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"为什么-2025-年是学习-ai-编程的最佳时机\">为什么 2025 年是学习 AI 编程的最佳时机？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E4%B8%BA%E4%BB%80%E4%B9%88-2025-%E5%B9%B4%E6%98%AF%E5%AD%A6%E4%B9%A0-ai-%E7%BC%96%E7%A8%8B%E7%9A%84%E6%9C%80%E4%BD%B3%E6%97%B6%E6%9C%BA\" class=\"hash-link\" aria-label=\"为什么 2025 年是学习 AI 编程的最佳时机？的直接链接\" title=\"为什么 2025 年是学习 AI 编程的最佳时机？的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"ai-编程工具已经成熟\">AI 编程工具已经成熟<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#ai-%E7%BC%96%E7%A8%8B%E5%B7%A5%E5%85%B7%E5%B7%B2%E7%BB%8F%E6%88%90%E7%86%9F\" class=\"hash-link\" aria-label=\"AI 编程工具已经成熟的直接链接\" title=\"AI 编程工具已经成熟的直接链接\" translate=\"no\">​</a></h3>\n<p>2024-2025 年，AI 编程工具经历了爆发式发展：</p>\n<ul>\n<li class=\"\"><strong>Google Gemini CLI</strong> — 免费的命令行 AI 助手，可以直接在终端操作文件和执行命令</li>\n<li class=\"\"><strong>GitHub Copilot</strong> — 在编辑器中实时提供代码补全建议</li>\n<li class=\"\"><strong>Cursor IDE</strong> — 专为 AI 编程设计的集成开发环境</li>\n<li class=\"\"><strong>Claude / ChatGPT</strong> — 通用 AI 助手，擅长代码解释和生成</li>\n</ul>\n<p>这些工具已经足够成熟，能够帮助完全零基础的人完成实际项目。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"学习门槛大幅降低\">学习门槛大幅降低<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E5%AD%A6%E4%B9%A0%E9%97%A8%E6%A7%9B%E5%A4%A7%E5%B9%85%E9%99%8D%E4%BD%8E\" class=\"hash-link\" aria-label=\"学习门槛大幅降低的直接链接\" title=\"学习门槛大幅降低的直接链接\" translate=\"no\">​</a></h3>\n<p>传统编程学习路径：</p>\n<blockquote>\n<p>学语法 → 练算法 → 做项目 → 找工作（6-12个月）</p>\n</blockquote>\n<p>AI 辅助编程学习路径：</p>\n<blockquote>\n<p>学工具 → 做项目 → 边做边学 → 快速见效（2-4周上手）</p>\n</blockquote>\n<div class=\"theme-admonition theme-admonition-info admonition_xJq3 alert alert--info\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"></path></svg></span>关键转变</div><div class=\"admonitionContent_BuS1\"><p>AI 辅助编程不是要替代编程学习，而是让你能够<strong>在实践中学习</strong>，而不是死记硬背。你仍然需要理解编程概念，但 AI 帮你跳过了大量入门阶段的挫败感。</p></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"主流-ai-编程工具对比\">主流 AI 编程工具对比<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E4%B8%BB%E6%B5%81-ai-%E7%BC%96%E7%A8%8B%E5%B7%A5%E5%85%B7%E5%AF%B9%E6%AF%94\" class=\"hash-link\" aria-label=\"主流 AI 编程工具对比的直接链接\" title=\"主流 AI 编程工具对比的直接链接\" translate=\"no\">​</a></h2>\n<p>选择合适的工具是入门的第一步。以下是2025年最主流的 AI 编程工具对比：</p>\n<table><thead><tr><th>特性</th><th>Gemini CLI</th><th>GitHub Copilot</th><th>Cursor IDE</th><th>Claude</th></tr></thead><tbody><tr><td><strong>费用</strong></td><td>免费</td><td>$10/月</td><td>$20/月</td><td>免费/付费</td></tr><tr><td><strong>使用方式</strong></td><td>命令行</td><td>编辑器插件</td><td>独立 IDE</td><td>网页/API</td></tr><tr><td><strong>本地文件操作</strong></td><td>支持</td><td>有限</td><td>支持</td><td>不支持</td></tr><tr><td><strong>适合场景</strong></td><td>环境管理、项目搭建</td><td>日常编码</td><td>复杂开发</td><td>学习、问答</td></tr><tr><td><strong>上手难度</strong></td><td>中等</td><td>简单</td><td>简单</td><td>最简单</td></tr><tr><td><strong>推荐人群</strong></td><td>想学终端操作的初学者</td><td>有编辑器基础的开发者</td><td>追求效率的开发者</td><td>完全零基础</td></tr></tbody></table>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"推荐组合\">推荐组合<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E6%8E%A8%E8%8D%90%E7%BB%84%E5%90%88\" class=\"hash-link\" aria-label=\"推荐组合的直接链接\" title=\"推荐组合的直接链接\" translate=\"no\">​</a></h3>\n<p>对于零基础学习者，推荐以下组合：</p>\n<ol>\n<li class=\"\">\n<p><strong>起步阶段</strong>：Claude（网页版）+ Gemini CLI</p>\n<ul>\n<li class=\"\">用 Claude 理解概念、解答疑惑</li>\n<li class=\"\">用 Gemini CLI 动手实践</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>进阶阶段</strong>：Cursor IDE + GitHub Copilot</p>\n<ul>\n<li class=\"\">用 Cursor 进行日常开发</li>\n<li class=\"\">用 Copilot 提升编码效率</li>\n</ul>\n</li>\n</ol>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"零基础学习路线图\">零基础学习路线图<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF%E5%9B%BE\" class=\"hash-link\" aria-label=\"零基础学习路线图的直接链接\" title=\"零基础学习路线图的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第一周认识-ai-编程\">第一周：认识 AI 编程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E7%AC%AC%E4%B8%80%E5%91%A8%E8%AE%A4%E8%AF%86-ai-%E7%BC%96%E7%A8%8B\" class=\"hash-link\" aria-label=\"第一周：认识 AI 编程的直接链接\" title=\"第一周：认识 AI 编程的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>目标</strong>：理解 AI 编程是什么，搭建基本环境</p>\n<p><strong>具体步骤</strong>：</p>\n<ol>\n<li class=\"\">\n<p><strong>了解基本概念</strong></p>\n<ul>\n<li class=\"\">什么是终端/命令行</li>\n<li class=\"\">什么是代码编辑器</li>\n<li class=\"\">什么是版本控制（Git）</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>注册必要账号</strong></p>\n<ul>\n<li class=\"\">Google 账号（用于 Gemini CLI）</li>\n<li class=\"\">GitHub 账号（代码托管和协作）</li>\n<li class=\"\">Vercel 账号（网站部署）</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>安装开发工具</strong></p>\n<ul>\n<li class=\"\">Node.js（JavaScript 运行时）</li>\n<li class=\"\">VS Code（代码编辑器）</li>\n<li class=\"\">Git（版本控制）</li>\n</ul>\n</li>\n</ol>\n<div class=\"theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>快速起步</div><div class=\"admonitionContent_BuS1\"><p>如果你觉得手动安装这些工具太麻烦，可以直接使用 Gemini CLI 帮你完成！详见我们的 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/basics/\">Gemini CLI 环境管理课程</a>。</p></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第二周第一个-ai-项目\">第二周：第一个 AI 项目<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E7%AC%AC%E4%BA%8C%E5%91%A8%E7%AC%AC%E4%B8%80%E4%B8%AA-ai-%E9%A1%B9%E7%9B%AE\" class=\"hash-link\" aria-label=\"第二周：第一个 AI 项目的直接链接\" title=\"第二周：第一个 AI 项目的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>目标</strong>：用 AI 工具完成一个完整的小项目</p>\n<p><strong>推荐项目</strong>：搭建个人网站</p>\n<p>为什么推荐做个人网站？</p>\n<ul>\n<li class=\"\">成果可见——做出来就能看到</li>\n<li class=\"\">实用性强——可以作为作品集</li>\n<li class=\"\">技术覆盖全面——前端、部署、域名等</li>\n<li class=\"\">AI 擅长帮忙——模板生成、内容优化等</li>\n</ul>\n<p><strong>具体步骤</strong>：</p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第1天：用 Gemini CLI 初始化 Docusaurus 项目</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第2天：自定义网站配置（标题、颜色、导航）</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第3天：创建个人介绍和项目展示页面</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第4天：学习 Markdown 写作，发布第一篇博客</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">第5天：部署到 Vercel，绑定自定义域名</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第三周深入实践\">第三周：深入实践<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E7%AC%AC%E4%B8%89%E5%91%A8%E6%B7%B1%E5%85%A5%E5%AE%9E%E8%B7%B5\" class=\"hash-link\" aria-label=\"第三周：深入实践的直接链接\" title=\"第三周：深入实践的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>目标</strong>：掌握更多 AI 辅助开发技巧</p>\n<ul>\n<li class=\"\">学习用 AI 调试代码</li>\n<li class=\"\">学习用 AI 管理 Git 工作流</li>\n<li class=\"\">尝试用 AI 生成更复杂的功能</li>\n<li class=\"\">学习阅读和理解 AI 生成的代码</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第四周建立工作流\">第四周：建立工作流<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E7%AC%AC%E5%9B%9B%E5%91%A8%E5%BB%BA%E7%AB%8B%E5%B7%A5%E4%BD%9C%E6%B5%81\" class=\"hash-link\" aria-label=\"第四周：建立工作流的直接链接\" title=\"第四周：建立工作流的直接链接\" translate=\"no\">​</a></h3>\n<p><strong>目标</strong>：形成自己的 AI 辅助开发工作流</p>\n<ul>\n<li class=\"\">总结哪些任务适合交给 AI</li>\n<li class=\"\">哪些任务需要自己理解</li>\n<li class=\"\">如何验证 AI 生成的代码</li>\n<li class=\"\">如何持续学习和提升</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"常见误区\">常见误区<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E5%B8%B8%E8%A7%81%E8%AF%AF%E5%8C%BA\" class=\"hash-link\" aria-label=\"常见误区的直接链接\" title=\"常见误区的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"误区一ai-会替代程序员\">误区一：\"AI 会替代程序员\"<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E8%AF%AF%E5%8C%BA%E4%B8%80ai-%E4%BC%9A%E6%9B%BF%E4%BB%A3%E7%A8%8B%E5%BA%8F%E5%91%98\" class=\"hash-link\" aria-label=\"误区一：&quot;AI 会替代程序员&quot;的直接链接\" title=\"误区一：&quot;AI 会替代程序员&quot;的直接链接\" translate=\"no\">​</a></h3>\n<p>AI 是工具，不是替代品。就像计算器没有替代数学家一样，AI 编程工具不会替代程序员。它改变的是工作方式，而不是取消这个职业。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"误区二用-ai-写代码是作弊\">误区二：\"用 AI 写代码是作弊\"<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E8%AF%AF%E5%8C%BA%E4%BA%8C%E7%94%A8-ai-%E5%86%99%E4%BB%A3%E7%A0%81%E6%98%AF%E4%BD%9C%E5%BC%8A\" class=\"hash-link\" aria-label=\"误区二：&quot;用 AI 写代码是作弊&quot;的直接链接\" title=\"误区二：&quot;用 AI 写代码是作弊&quot;的直接链接\" translate=\"no\">​</a></h3>\n<p>在专业开发中，使用任何能提升效率的工具都是正确的做法。AI 编程助手与代码自动补全、代码片段、Stack Overflow 一样，都是开发者工具箱的一部分。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"误区三不需要学编程基础了\">误区三：\"不需要学编程基础了\"<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E8%AF%AF%E5%8C%BA%E4%B8%89%E4%B8%8D%E9%9C%80%E8%A6%81%E5%AD%A6%E7%BC%96%E7%A8%8B%E5%9F%BA%E7%A1%80%E4%BA%86\" class=\"hash-link\" aria-label=\"误区三：&quot;不需要学编程基础了&quot;的直接链接\" title=\"误区三：&quot;不需要学编程基础了&quot;的直接链接\" translate=\"no\">​</a></h3>\n<p>AI 工具可以帮你写代码，但理解代码在做什么仍然是你的责任。基础知识帮助你：</p>\n<ul>\n<li class=\"\">判断 AI 生成的代码是否正确</li>\n<li class=\"\">描述更精准的需求</li>\n<li class=\"\">调试和修复问题</li>\n<li class=\"\">做出架构决策</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"误区四越贵的工具越好\">误区四：\"越贵的工具越好\"<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E8%AF%AF%E5%8C%BA%E5%9B%9B%E8%B6%8A%E8%B4%B5%E7%9A%84%E5%B7%A5%E5%85%B7%E8%B6%8A%E5%A5%BD\" class=\"hash-link\" aria-label=\"误区四：&quot;越贵的工具越好&quot;的直接链接\" title=\"误区四：&quot;越贵的工具越好&quot;的直接链接\" translate=\"no\">​</a></h3>\n<p>免费工具足以完成大部分学习和个人项目。不要在入门阶段就花钱订阅付费工具。先用免费方案（Gemini CLI + VS Code），等你确认这是你想深入的方向后，再考虑付费工具。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"学习资源推荐\">学习资源推荐<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%BA%90%E6%8E%A8%E8%8D%90\" class=\"hash-link\" aria-label=\"学习资源推荐的直接链接\" title=\"学习资源推荐的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"在线课程\">在线课程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E5%9C%A8%E7%BA%BF%E8%AF%BE%E7%A8%8B\" class=\"hash-link\" aria-label=\"在线课程的直接链接\" title=\"在线课程的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\"><a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/intro/\">AI 编程公开课</a> — 我们的免费课程系列，从环境搭建到网站部署</li>\n<li class=\"\"><a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/basics/\">Gemini CLI 基础教程</a> — 系统学习 Gemini CLI</li>\n<li class=\"\"><a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/website/\">个人网站开发部署</a> — 动手做项目</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"社区\">社区<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E7%A4%BE%E5%8C%BA\" class=\"hash-link\" aria-label=\"社区的直接链接\" title=\"社区的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\"><a href=\"https://discord.gg/T3NJG5n98a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Discord 学习社区</a> — 加入学习群组，互相交流</li>\n<li class=\"\"><a href=\"https://github.com/ChanMeng666/ai-programming-teaching-project/discussions\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">GitHub Discussions</a> — 提问和讨论</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"实用链接\">实用链接<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E5%AE%9E%E7%94%A8%E9%93%BE%E6%8E%A5\" class=\"hash-link\" aria-label=\"实用链接的直接链接\" title=\"实用链接的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\"><a href=\"https://nodejs.org/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Node.js 官网</a> — 安装 JavaScript 运行时</li>\n<li class=\"\"><a href=\"https://code.visualstudio.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">VS Code 官网</a> — 免费代码编辑器</li>\n<li class=\"\"><a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">GitHub</a> — 代码托管平台</li>\n<li class=\"\"><a href=\"https://vercel.com/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Vercel</a> — 免费网站部署平台</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"写在最后\">写在最后<a href=\"https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/#%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8E\" class=\"hash-link\" aria-label=\"写在最后的直接链接\" title=\"写在最后的直接链接\" translate=\"no\">​</a></h2>\n<p>学习 AI 编程最重要的不是天赋，而是<strong>动手</strong>。完美的学习计划不如一个实际完成的项目。</p>\n<p>建议你现在就开始：</p>\n<ol>\n<li class=\"\">打开我们的 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/intro/\">课程介绍</a></li>\n<li class=\"\">按照指引搭建开发环境</li>\n<li class=\"\">完成你的第一个 AI 辅助项目</li>\n</ol>\n<p>每一位优秀的开发者都是从零开始的。AI 只是让这个起步变得更加平滑。</p>\n<hr>\n<div class=\"theme-admonition theme-admonition-info admonition_xJq3 alert alert--info\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"></path></svg></span>开始你的 AI 编程之旅</div><div class=\"admonitionContent_BuS1\"><p>准备好了吗？从 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/basics/\">Gemini CLI 环境管理</a> 开始你的第一步，或者加入我们的 <a href=\"https://discord.gg/T3NJG5n98a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Discord 社区</a> 与其他学习者交流！</p></div></div>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/ai-programming-beginners-guide/",
            "title": "AI 编程入门指南：2025年零基础学习路线",
            "summary": "面向完全零基础的 AI 编程入门指南。介绍为什么要学习 AI 辅助编程，主流 AI 编程工具对比，以及从零开始的学习路线图。",
            "date_modified": "2025-08-05T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "AI编程",
                "教程",
                "入门指南",
                "AI工具"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/",
            "content_html": "<p>Google 推出的 Gemini CLI 是一款强大的命令行 AI 编程助手，它可以帮助开发者在终端中直接与 AI 对话，完成代码生成、环境管理、文件操作等任务。本文将带你从零开始，全面掌握 Gemini CLI 的使用方法。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"什么是-gemini-cli\">什么是 Gemini CLI？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E4%BB%80%E4%B9%88%E6%98%AF-gemini-cli\" class=\"hash-link\" aria-label=\"什么是 Gemini CLI？的直接链接\" title=\"什么是 Gemini CLI？的直接链接\" translate=\"no\">​</a></h2>\n<p>Gemini CLI 是 Google 基于 Gemini 大语言模型打造的命令行工具。与传统的 AI 聊天界面不同，它直接运行在你的终端中，能够：</p>\n<ul>\n<li class=\"\">理解你的项目结构和代码上下文</li>\n<li class=\"\">直接读写本地文件</li>\n<li class=\"\">执行系统命令</li>\n<li class=\"\">帮助调试和修复代码问题</li>\n<li class=\"\">自动化重复性开发任务</li>\n</ul>\n<div class=\"theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>为什么选择 Gemini CLI？</div><div class=\"admonitionContent_BuS1\"><p>对于初学者来说，Gemini CLI 的最大优势在于<strong>免费</strong>且<strong>无需复杂配置</strong>。只需要一个 Google 账号，就能立即开始使用。</p></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"安装-gemini-cli\">安装 Gemini CLI<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%AE%89%E8%A3%85-gemini-cli\" class=\"hash-link\" aria-label=\"安装 Gemini CLI的直接链接\" title=\"安装 Gemini CLI的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"前置要求\">前置要求<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%89%8D%E7%BD%AE%E8%A6%81%E6%B1%82\" class=\"hash-link\" aria-label=\"前置要求的直接链接\" title=\"前置要求的直接链接\" translate=\"no\">​</a></h3>\n<p>在安装 Gemini CLI 之前，你需要确保系统已安装 <strong>Node.js 18 或更高版本</strong>。</p>\n<div class=\"theme-tabs-container tabs-container tabList__CuJ\"><ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\"><li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">Windows</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">macOS</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">Linux</li></ul><div class=\"margin-top--md\"><div role=\"tabpanel\" class=\"tabItem_Ymn6\"><p><strong>1. 安装 Node.js</strong></p><p>访问 <a href=\"https://nodejs.org/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Node.js 官网</a> 下载并安装 LTS 版本。安装完成后，打开 PowerShell 验证：</p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">node --version</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npm --version</span><br></span></code></pre></div></div><p><strong>2. 安装 Gemini CLI</strong></p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npm install -g @google/gemini-cli</span><br></span></code></pre></div></div><p>或使用 npx 直接运行（无需全局安装）：</p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx @google/gemini-cli</span><br></span></code></pre></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><p><strong>1. 安装 Node.js（推荐使用 Homebrew）</strong></p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">brew install node</span><br></span></code></pre></div></div><p><strong>2. 安装 Gemini CLI</strong></p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npm install -g @google/gemini-cli</span><br></span></code></pre></div></div><p>或直接运行：</p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npx @google/gemini-cli</span><br></span></code></pre></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><p><strong>1. 安装 Node.js</strong></p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"># Ubuntu/Debian</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">sudo apt-get install -y nodejs</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"># Fedora</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">sudo dnf install nodejs</span><br></span></code></pre></div></div><p><strong>2. 安装 Gemini CLI</strong></p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">npm install -g @google/gemini-cli</span><br></span></code></pre></div></div></div></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"首次配置\">首次配置<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E9%A6%96%E6%AC%A1%E9%85%8D%E7%BD%AE\" class=\"hash-link\" aria-label=\"首次配置的直接链接\" title=\"首次配置的直接链接\" translate=\"no\">​</a></h3>\n<p>安装完成后，首次运行 Gemini CLI 会引导你完成 Google 账号授权：</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">gemini</span><br></span></code></pre></div></div>\n<p>按照终端中的提示完成 OAuth 登录流程。授权成功后，你就可以开始使用了。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"基础使用\">基础使用<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8\" class=\"hash-link\" aria-label=\"基础使用的直接链接\" title=\"基础使用的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"启动交互模式\">启动交互模式<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%90%AF%E5%8A%A8%E4%BA%A4%E4%BA%92%E6%A8%A1%E5%BC%8F\" class=\"hash-link\" aria-label=\"启动交互模式的直接链接\" title=\"启动交互模式的直接链接\" translate=\"no\">​</a></h3>\n<p>在任意项目目录中运行：</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">gemini</span><br></span></code></pre></div></div>\n<p>进入交互模式后，你可以直接输入自然语言指令：</p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我查看这个项目的结构</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 这个目录下有哪些 JavaScript 文件？</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我创建一个简单的 HTTP 服务器</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"单次命令模式\">单次命令模式<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%8D%95%E6%AC%A1%E5%91%BD%E4%BB%A4%E6%A8%A1%E5%BC%8F\" class=\"hash-link\" aria-label=\"单次命令模式的直接链接\" title=\"单次命令模式的直接链接\" translate=\"no\">​</a></h3>\n<p>如果只需要执行一次性任务：</p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">gemini \"帮我解释这段代码的作用\" &lt; main.py</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"常用指令示例\">常用指令示例<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4%E7%A4%BA%E4%BE%8B\" class=\"hash-link\" aria-label=\"常用指令示例的直接链接\" title=\"常用指令示例的直接链接\" translate=\"no\">​</a></h3>\n<p>以下是一些实用的 Gemini CLI 使用场景：</p>\n<p><strong>环境诊断与修复：</strong></p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 检查我的开发环境，看看是否缺少必要的工具</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 我的 Git 配置有什么问题吗？帮我修复</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 清理系统中不需要的 Node.js 旧版本</span><br></span></code></pre></div></div>\n<p><strong>代码生成与修改：</strong></p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 在当前目录创建一个 Express.js 项目模板</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我给这个函数添加错误处理</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 把这个 JavaScript 文件重构为 TypeScript</span><br></span></code></pre></div></div>\n<p><strong>Git 操作自动化：</strong></p>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我初始化 Git 仓库并创建 .gitignore</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 查看最近的修改并帮我写一个有意义的 commit 信息</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 创建一个新分支并切换过去</span><br></span></code></pre></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"实战案例用-gemini-cli-搭建个人网站\">实战案例：用 Gemini CLI 搭建个人网站<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B%E7%94%A8-gemini-cli-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99\" class=\"hash-link\" aria-label=\"实战案例：用 Gemini CLI 搭建个人网站的直接链接\" title=\"实战案例：用 Gemini CLI 搭建个人网站的直接链接\" translate=\"no\">​</a></h2>\n<p>让我们通过一个实际案例来展示 Gemini CLI 的强大能力。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第一步项目初始化\">第一步：项目初始化<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E7%AC%AC%E4%B8%80%E6%AD%A5%E9%A1%B9%E7%9B%AE%E5%88%9D%E5%A7%8B%E5%8C%96\" class=\"hash-link\" aria-label=\"第一步：项目初始化的直接链接\" title=\"第一步：项目初始化的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我创建一个基于 Docusaurus 的个人网站项目，项目名叫 my-portfolio</span><br></span></code></pre></div></div>\n<p>Gemini CLI 会为你执行必要的命令，创建项目结构，并安装依赖。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第二步自定义配置\">第二步：自定义配置<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE\" class=\"hash-link\" aria-label=\"第二步：自定义配置的直接链接\" title=\"第二步：自定义配置的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我修改 docusaurus.config.js，把网站标题改成\"我的作品集\"，</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  并添加中文语言支持</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第三步创建内容\">第三步：创建内容<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E7%AC%AC%E4%B8%89%E6%AD%A5%E5%88%9B%E5%BB%BA%E5%86%85%E5%AE%B9\" class=\"hash-link\" aria-label=\"第三步：创建内容的直接链接\" title=\"第三步：创建内容的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 在 docs 目录下创建一个自我介绍页面，使用 Markdown 格式，</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  包含个人简介、技能列表和项目经历</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第四步本地预览\">第四步：本地预览<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E7%AC%AC%E5%9B%9B%E6%AD%A5%E6%9C%AC%E5%9C%B0%E9%A2%84%E8%A7%88\" class=\"hash-link\" aria-label=\"第四步：本地预览的直接链接\" title=\"第四步：本地预览的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 启动开发服务器，让我预览网站效果</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第五步部署上线\">第五步：部署上线<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E7%AC%AC%E4%BA%94%E6%AD%A5%E9%83%A8%E7%BD%B2%E4%B8%8A%E7%BA%BF\" class=\"hash-link\" aria-label=\"第五步：部署上线的直接链接\" title=\"第五步：部署上线的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我把这个项目部署到 Vercel，给我详细的操作步骤</span><br></span></code></pre></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"进阶技巧\">进阶技巧<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7\" class=\"hash-link\" aria-label=\"进阶技巧的直接链接\" title=\"进阶技巧的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"1-利用上下文感知\">1. 利用上下文感知<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#1-%E5%88%A9%E7%94%A8%E4%B8%8A%E4%B8%8B%E6%96%87%E6%84%9F%E7%9F%A5\" class=\"hash-link\" aria-label=\"1. 利用上下文感知的直接链接\" title=\"1. 利用上下文感知的直接链接\" translate=\"no\">​</a></h3>\n<p>Gemini CLI 能够读取当前目录下的文件，自动理解项目上下文。在项目根目录下启动 Gemini CLI，它就能智能地：</p>\n<ul>\n<li class=\"\">识别项目类型（Node.js、Python、Go 等）</li>\n<li class=\"\">理解项目结构和依赖关系</li>\n<li class=\"\">根据现有代码风格生成一致的代码</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"2-批量文件操作\">2. 批量文件操作<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#2-%E6%89%B9%E9%87%8F%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C\" class=\"hash-link\" aria-label=\"2. 批量文件操作的直接链接\" title=\"2. 批量文件操作的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 帮我把 src 目录下所有 .js 文件的 var 声明改成 const 或 let</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 给所有 Python 文件添加 type hints</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"3-学习与调试\">3. 学习与调试<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#3-%E5%AD%A6%E4%B9%A0%E4%B8%8E%E8%B0%83%E8%AF%95\" class=\"hash-link\" aria-label=\"3. 学习与调试的直接链接\" title=\"3. 学习与调试的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-text codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-text codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 解释这个正则表达式的含义：/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">&gt; 这段代码为什么会产生内存泄漏？帮我找到原因并修复</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"4-安全实践\">4. 安全实践<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#4-%E5%AE%89%E5%85%A8%E5%AE%9E%E8%B7%B5\" class=\"hash-link\" aria-label=\"4. 安全实践的直接链接\" title=\"4. 安全实践的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"theme-admonition theme-admonition-caution admonition_xJq3 alert alert--warning\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z\"></path></svg></span>安全提示</div><div class=\"admonitionContent_BuS1\"><ul>\n<li class=\"\">Gemini CLI 可以执行系统命令，使用前请仔细确认它即将执行的操作</li>\n<li class=\"\">不要在包含敏感信息（密码、API 密钥）的目录中使用不受限的命令执行</li>\n<li class=\"\">建议在版本控制下的项目中使用，便于回滚意外修改</li>\n</ul></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"常见问题\">常见问题<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98\" class=\"hash-link\" aria-label=\"常见问题的直接链接\" title=\"常见问题的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"q-gemini-cli-和-chatgpt-有什么区别\">Q: Gemini CLI 和 ChatGPT 有什么区别？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#q-gemini-cli-%E5%92%8C-chatgpt-%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB\" class=\"hash-link\" aria-label=\"Q: Gemini CLI 和 ChatGPT 有什么区别？的直接链接\" title=\"Q: Gemini CLI 和 ChatGPT 有什么区别？的直接链接\" translate=\"no\">​</a></h3>\n<p>Gemini CLI 运行在本地终端，能直接访问你的文件系统和开发环境，适合实际编程任务。而 ChatGPT 是网页聊天界面，更适合一般性的问答。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"q-使用-gemini-cli-需要付费吗\">Q: 使用 Gemini CLI 需要付费吗？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#q-%E4%BD%BF%E7%94%A8-gemini-cli-%E9%9C%80%E8%A6%81%E4%BB%98%E8%B4%B9%E5%90%97\" class=\"hash-link\" aria-label=\"Q: 使用 Gemini CLI 需要付费吗？的直接链接\" title=\"Q: 使用 Gemini CLI 需要付费吗？的直接链接\" translate=\"no\">​</a></h3>\n<p>Gemini CLI 基础版本免费使用，有每日使用次数限制。对于大多数个人学习和小型项目来说完全够用。</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"q-我完全不会编程也能用-gemini-cli-吗\">Q: 我完全不会编程，也能用 Gemini CLI 吗？<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#q-%E6%88%91%E5%AE%8C%E5%85%A8%E4%B8%8D%E4%BC%9A%E7%BC%96%E7%A8%8B%E4%B9%9F%E8%83%BD%E7%94%A8-gemini-cli-%E5%90%97\" class=\"hash-link\" aria-label=\"Q: 我完全不会编程，也能用 Gemini CLI 吗？的直接链接\" title=\"Q: 我完全不会编程，也能用 Gemini CLI 吗？的直接链接\" translate=\"no\">​</a></h3>\n<p>可以！Gemini CLI 的一大优势就是你可以用自然语言描述你想做的事情，它会帮你生成代码和执行命令。不过，建议先学习一些基础的终端操作知识。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"总结\">总结<a href=\"https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/#%E6%80%BB%E7%BB%93\" class=\"hash-link\" aria-label=\"总结的直接链接\" title=\"总结的直接链接\" translate=\"no\">​</a></h2>\n<p>Gemini CLI 是学习 AI 辅助编程的绝佳工具。它降低了编程的门槛，让初学者能够通过自然语言与 AI 协作完成开发任务。无论你是想学习编程、管理开发环境、还是快速搭建项目，Gemini CLI 都能成为你的得力助手。</p>\n<p>想要更深入地学习 Gemini CLI 的使用？欢迎查看我们的 <a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/basics/\">Gemini CLI 环境管理课程</a>，通过实践项目系统性地掌握这一工具。</p>\n<hr>\n<div class=\"theme-admonition theme-admonition-info admonition_xJq3 alert alert--info\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"></path></svg></span>相关资源</div><div class=\"admonitionContent_BuS1\"><ul>\n<li class=\"\"><a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/basics/\">课程一：Gemini CLI 环境管理</a> - 系统性学习 Gemini CLI</li>\n<li class=\"\"><a class=\"\" href=\"https://programming.chanmeng.org/zh-Hans/docs/2025-summer/website/\">课程二：开发并部署个人网站</a> - 用 AI 搭建个人网站</li>\n<li class=\"\"><a href=\"https://discord.gg/T3NJG5n98a\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Discord 社区</a> - 加入学习社区交流</li>\n</ul></div></div>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/gemini-cli-complete-guide/",
            "title": "Gemini CLI 完全指南：从安装到实战的 AI 编程助手",
            "summary": "详细介绍 Google Gemini CLI 的安装、配置和实际使用方法。涵盖 Windows、macOS、Linux 三大平台，适合零基础开发者快速上手 AI 辅助编程。",
            "date_modified": "2025-08-01T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "Gemini CLI",
                "教程",
                "AI编程",
                "入门指南"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/",
            "content_html": "<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"导师答疑会议视频\">导师答疑会议视频<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E5%AF%BC%E5%B8%88%E7%AD%94%E7%96%91%E4%BC%9A%E8%AE%AE%E8%A7%86%E9%A2%91\" class=\"hash-link\" aria-label=\"导师答疑会议视频的直接链接\" title=\"导师答疑会议视频的直接链接\" translate=\"no\">​</a></h2>\n<p>作为2025年夏季她行活动的导师，我在2025年7月27日的导师小组答疑活动中分享了关于身份认知与社会群体划分的深度思考。</p>\n<iframe width=\"100%\" height=\"400\" src=\"https://www.youtube.com/embed/-0m3p4uCgcE?si=xqdLVush-BqEG74Z\" title=\"导师小组答疑会议视频\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen=\"\"></iframe>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"核心观点概览\">核心观点概览<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E6%A0%B8%E5%BF%83%E8%A7%82%E7%82%B9%E6%A6%82%E8%A7%88\" class=\"hash-link\" aria-label=\"核心观点概览的直接链接\" title=\"核心观点概览的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>演讲核心</div><div class=\"admonitionContent_BuS1\"><p>本次演讲深入探讨了\"我们\"、\"你们\"与\"他们\"这些基本社会范畴的建构过程，揭示了身份认同背后的权力运作、话语建构以及心理机制。</p></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"理论框架\">理论框架<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E7%90%86%E8%AE%BA%E6%A1%86%E6%9E%B6\" class=\"hash-link\" aria-label=\"理论框架的直接链接\" title=\"理论框架的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"社会认同理论-social-identity-theory\">社会认同理论 (Social Identity Theory)<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E7%A4%BE%E4%BC%9A%E8%AE%A4%E5%90%8C%E7%90%86%E8%AE%BA-social-identity-theory\" class=\"hash-link\" aria-label=\"社会认同理论 (Social Identity Theory)的直接链接\" title=\"社会认同理论 (Social Identity Theory)的直接链接\" translate=\"no\">​</a></h3>\n<p>社会认同的三个核心过程：</p>\n<ol>\n<li class=\"\"><strong>社会分类</strong> (Social Categorization) - 将人群划分为不同群体</li>\n<li class=\"\"><strong>社会认同</strong> (Social Identification) - 认识并认同自己的群体归属</li>\n<li class=\"\"><strong>社会比较</strong> (Social Comparison) - 通过群体间比较获得积极独特性</li>\n</ol>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"多重叙事视角\">多重叙事视角<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E5%A4%9A%E9%87%8D%E5%8F%99%E4%BA%8B%E8%A7%86%E8%A7%92\" class=\"hash-link\" aria-label=\"多重叙事视角的直接链接\" title=\"多重叙事视角的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-tabs-container tabs-container tabList__CuJ\"><ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\"><li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">国家叙事</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">民族与种族叙事</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">性别叙事</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">宗教叙事</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">地缘政治叙事</li></ul><div class=\"margin-top--md\"><div role=\"tabpanel\" class=\"tabItem_Ymn6\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"想象的共同体\">想象的共同体<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E6%83%B3%E8%B1%A1%E7%9A%84%E5%85%B1%E5%90%8C%E4%BD%93\" class=\"hash-link\" aria-label=\"想象的共同体的直接链接\" title=\"想象的共同体的直接链接\" translate=\"no\">​</a></h3><p><strong>概念来源</strong>：本尼迪克特·安德森 (Benedict Anderson)</p><p><strong>核心观点</strong>：民族国家是\"想象的共同体\"</p><p><strong>维系机制</strong>：</p><ul>\n<li class=\"\">共享的历史记忆</li>\n<li class=\"\">文化符号（国旗、国歌）</li>\n<li class=\"\">大众传媒的传播</li>\n</ul><div class=\"theme-admonition theme-admonition-caution admonition_xJq3 alert alert--warning\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z\"></path></svg></span>叙事的双刃剑</div><div class=\"admonitionContent_BuS1\"><p>国家叙事既是凝聚力量的源泉，也可能成为冲突与分裂的根源。</p></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"文化与权力的交织\">文化与权力的交织<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E6%96%87%E5%8C%96%E4%B8%8E%E6%9D%83%E5%8A%9B%E7%9A%84%E4%BA%A4%E7%BB%87\" class=\"hash-link\" aria-label=\"文化与权力的交织的直接链接\" title=\"文化与权力的交织的直接链接\" translate=\"no\">​</a></h3><p><strong>民族认同</strong>：更侧重文化而非血缘（如中国的\"汉族\"形成）</p><p><strong>种族概念</strong>：社会建构的产物，历史上与殖民主义密切相关</p><p><strong>批判视角</strong>：批判种族理论 (CRT) 揭示种族主义如何内在于法律和制度</p><div class=\"theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z\"></path></svg></span>注意</div><div class=\"admonitionContent_BuS1\"><p>种族叙事的建构往往与特定群体的政治经济地位密切相关，需要批判性审视。</p></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"从父权制到酷儿理论\">从父权制到酷儿理论<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E4%BB%8E%E7%88%B6%E6%9D%83%E5%88%B6%E5%88%B0%E9%85%B7%E5%84%BF%E7%90%86%E8%AE%BA\" class=\"hash-link\" aria-label=\"从父权制到酷儿理论的直接链接\" title=\"从父权制到酷儿理论的直接链接\" translate=\"no\">​</a></h3><p><strong>1. 父权制叙事</strong></p><ul>\n<li class=\"\">男性的\"理性\"vs 女性的\"情感\"</li>\n<li class=\"\">公私领域的性别分工</li>\n</ul><p><strong>2. 女性主义挑战</strong></p><ul>\n<li class=\"\">性别不平等是社会建构</li>\n<li class=\"\">交叉性女权主义关注多重压迫</li>\n</ul><p><strong>3. 酷儿理论解构</strong></p><ul>\n<li class=\"\">性别和性取向的流动性</li>\n<li class=\"\">挑战二元对立的身份标签</li>\n</ul></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"信徒与异教徒的边界\">信徒与异教徒的边界<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E4%BF%A1%E5%BE%92%E4%B8%8E%E5%BC%82%E6%95%99%E5%BE%92%E7%9A%84%E8%BE%B9%E7%95%8C\" class=\"hash-link\" aria-label=\"信徒与异教徒的边界的直接链接\" title=\"信徒与异教徒的边界的直接链接\" translate=\"no\">​</a></h3><p><strong>选民观念</strong>：信仰群体的特殊性认知</p><p><strong>神圣vs凡俗</strong>：二元对立的世界观</p><p><strong>双重作用</strong>：</p><ul>\n<li class=\"\">提供归属感和道德指引</li>\n<li class=\"\">可能导致偏见和冲突</li>\n</ul></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"东�西南北的权力地理\">东西南北的权力地理<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E4%B8%9C%E8%A5%BF%E5%8D%97%E5%8C%97%E7%9A%84%E6%9D%83%E5%8A%9B%E5%9C%B0%E7%90%86\" class=\"hash-link\" aria-label=\"东西南北的权力地理的直接链接\" title=\"东西南北的权力地理的直接链接\" translate=\"no\">​</a></h3><p><strong>东方学批判</strong>（爱德华·萨义德）</p><p><strong>全球南北分野</strong>：发展水平与历史遗产</p><p><strong>话语权争夺</strong>：谁定义\"发展\"与\"文明\"</p></div></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"心理机制解析\">心理机制解析<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E5%BF%83%E7%90%86%E6%9C%BA%E5%88%B6%E8%A7%A3%E6%9E%90\" class=\"hash-link\" aria-label=\"心理机制解析的直接链接\" title=\"心理机制解析的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\"><strong>内群体偏私</strong>：偏爱自己所属群体成员，以提升自尊感</li>\n<li class=\"\"><strong>外群体同质性偏见</strong>：认为\"他们都一样\"，忽视外群体的多样性</li>\n<li class=\"\"><strong>恐怖管理理论</strong>：通过群体认同管理死亡焦虑</li>\n<li class=\"\"><strong>进化心理学视角</strong>：群体忠诚可能具有进化适应性</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"交叉性理论的洞见\">交叉性理论的洞见<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E4%BA%A4%E5%8F%89%E6%80%A7%E7%90%86%E8%AE%BA%E7%9A%84%E6%B4%9E%E8%A7%81\" class=\"hash-link\" aria-label=\"交叉性理论的洞见的直接链接\" title=\"交叉性理论的洞见的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-admonition theme-admonition-info admonition_xJq3 alert alert--info\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 14 16\"><path fill-rule=\"evenodd\" d=\"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z\"></path></svg></span>交叉性 (Intersectionality)</div><div class=\"admonitionContent_BuS1\"><p>由金伯利·克伦肖提出，强调个体身份的多重性和复杂性。一个人可以同时属于多个\"我们\"群体，面临独特的、复合性的经历。</p></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"交叉性的重要启示\">交叉性的重要启示<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E4%BA%A4%E5%8F%89%E6%80%A7%E7%9A%84%E9%87%8D%E8%A6%81%E5%90%AF%E7%A4%BA\" class=\"hash-link\" aria-label=\"交叉性的重要启示的直接链接\" title=\"交叉性的重要启示的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">不存在普遍的、同质化的群体经验</li>\n<li class=\"\">必须关注多重权力结构的相互作用</li>\n<li class=\"\">避免以一个群体的\"我们\"覆盖另一个群体的特殊性</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"数字时代的新挑战\">数字时代的新挑战<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E6%95%B0%E5%AD%97%E6%97%B6%E4%BB%A3%E7%9A%84%E6%96%B0%E6%8C%91%E6%88%98\" class=\"hash-link\" aria-label=\"数字时代的新挑战的直接链接\" title=\"数字时代的新挑战的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-tabs-container tabs-container tabList__CuJ\"><ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\"><li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">全球化影响</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">互联网效应</li></ul><div class=\"margin-top--md\"><div role=\"tabpanel\" class=\"tabItem_Ymn6\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"身份的流动与固化\">身份的流动与固化<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E8%BA%AB%E4%BB%BD%E7%9A%84%E6%B5%81%E5%8A%A8%E4%B8%8E%E5%9B%BA%E5%8C%96\" class=\"hash-link\" aria-label=\"身份的流动与固化的直接链接\" title=\"身份的流动与固化的直接链接\" translate=\"no\">​</a></h3><p><strong>双重效应</strong>：</p><ul>\n<li class=\"\"><strong>积极面</strong>：促进文化交流，催生混合身份</li>\n<li class=\"\"><strong>消极面</strong>：引发本土身份焦虑，强化排他意识</li>\n</ul></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"连接与分裂并存\">连接与分裂并存<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E8%BF%9E%E6%8E%A5%E4%B8%8E%EF%BF%BD%EF%BF%BD%E5%88%86%E8%A3%82%E5%B9%B6%E5%AD%98\" class=\"hash-link\" aria-label=\"连接与分裂并存的直接链接\" title=\"连接与分裂并存的直接链接\" translate=\"no\">​</a></h3><p><strong>新机遇</strong>：</p><ul>\n<li class=\"\">跨地域的兴趣社群</li>\n<li class=\"\">边缘群体的发声平台（如 #MeToo）</li>\n</ul><p><strong>新挑战</strong>：</p><ul>\n<li class=\"\">回音室效应和过滤气泡</li>\n<li class=\"\">算法强化的群体极化</li>\n<li class=\"\">网络匿名带来的仇恨言论</li>\n</ul></div></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"未来展望超越二元对立\">未来展望：超越二元对立<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E6%9C%AA%E6%9D%A5%E5%B1%95%E6%9C%9B%E8%B6%85%E8%B6%8A%E4%BA%8C%E5%85%83%E5%AF%B9%E7%AB%8B\" class=\"hash-link\" aria-label=\"未来展望：超越二元对立的直接链接\" title=\"未来展望：超越二元对立的直接链接\" translate=\"no\">​</a></h2>\n<p>构建包容性\"大我们\"的路径：</p>\n<ul>\n<li class=\"\">培养批判性思维，审视叙事框架</li>\n<li class=\"\">促进跨群体对话，打破刻板印象</li>\n<li class=\"\">构建公正社会结构，减少权力不平等</li>\n<li class=\"\">拥抱身份复杂性，寻找共同立场</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"结语\">结语<a href=\"https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/#%E7%BB%93%E8%AF%AD\" class=\"hash-link\" aria-label=\"结语的直接链接\" title=\"结语的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-admonition theme-admonition-success admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>核心洞察</div><div class=\"admonitionContent_BuS1\"><p>\"我们\"与\"他们\"的界限并非固定不变，而是社会建构的产物。认识到这些划分的人为性和流动性，是迈向更包容和公正社会的第一步。</p></div></div>\n<p>未来的挑战在于，如何在承认和尊重差异的同时，努力寻找和构建更具包容性的、能够促进共同福祉的\"大我们\"。这需要我们以一种更宏观、更细致、更具同理心的视角看待世界的差异和问题。</p>\n<hr>\n<p><em>本文基于2025年7月27日她行活动导师小组答疑会的演讲内容整理而成。</em></p>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/identity-recognition-through-multiple-lenses/",
            "title": "我们、你们、他们：多棱镜下的身份认知与世界分野",
            "summary": "2025年夏季她行活动导师小组答疑会演讲：探讨身份认知的社会建构与群体界限",
            "date_modified": "2025-07-27T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "她行活动",
                "导师答疑",
                "身份认知",
                "社会认同理论",
                "交叉性"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/video-resources/",
            "content_html": "<p>这里整理了文档中所有的教程视频资源，方便大家集中学习和查看。</p>\n<!-- -->\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"coze工作流开发教程\">Coze工作流开发教程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#coze%E5%B7%A5%E4%BD%9C%E6%B5%81%E5%BC%80%E5%8F%91%E6%95%99%E7%A8%8B\" class=\"hash-link\" aria-label=\"Coze工作流开发教程的直接链接\" title=\"Coze工作流开发教程的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"环境配置部分\">环境配置部分<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E9%83%A8%E5%88%86\" class=\"hash-link\" aria-label=\"环境配置部分的直接链接\" title=\"环境配置部分的直接链接\" translate=\"no\">​</a></h3>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第一部分基础配置\">第一部分：基础配置<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E4%B8%80%E9%83%A8%E5%88%86%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE\" class=\"hash-link\" aria-label=\"第一部分：基础配置的直接链接\" title=\"第一部分：基础配置的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第二部分进阶设置\">第二部分：进阶设置<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%E8%BF%9B%E9%98%B6%E8%AE%BE%E7%BD%AE\" class=\"hash-link\" aria-label=\"第二部分：进阶设置的直接链接\" title=\"第二部分：进阶设置的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第三部分完整流程\">第三部分：完整流程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E5%AE%8C%E6%95%B4%E6%B5%81%E7%A8%8B\" class=\"hash-link\" aria-label=\"第三部分：完整流程的直接链接\" title=\"第三部分：完整流程的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"docusaurus教程系列\">Docusaurus教程系列<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#docusaurus%E6%95%99%E7%A8%8B%E7%B3%BB%E5%88%97\" class=\"hash-link\" aria-label=\"Docusaurus教程系列的直接链接\" title=\"Docusaurus教程系列的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"网站开发完整教程\">网站开发完整教程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%BD%91%E7%AB%99%E5%BC%80%E5%8F%91%E5%AE%8C%E6%95%B4%E6%95%99%E7%A8%8B\" class=\"hash-link\" aria-label=\"网站开发完整教程的直接链接\" title=\"网站开发完整教程的直接链接\" translate=\"no\">​</a></h3>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第一部分项目初始化\">第一部分：项目初始化<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E4%B8%80%E9%83%A8%E5%88%86%E9%A1%B9%E7%9B%AE%E5%88%9D%E5%A7%8B%E5%8C%96\" class=\"hash-link\" aria-label=\"第一部分：项目初始化的直接链接\" title=\"第一部分：项目初始化的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<p>创建项目并进行基础配置。</p>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第二部分内容编写\">第二部分：内容编写<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E4%BA%8C%E9%83%A8%E5%88%86%E5%86%85%E5%AE%B9%E7%BC%96%E5%86%99\" class=\"hash-link\" aria-label=\"第二部分：内容编写的直接链接\" title=\"第二部分：内容编写的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<p>学习如何编写和组织文档内容。</p>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第三部分主题定制\">第三部分：主题定制<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E4%B8%89%E9%83%A8%E5%88%86%E4%B8%BB%E9%A2%98%E5%AE%9A%E5%88%B6\" class=\"hash-link\" aria-label=\"第三部分：主题定制的直接链接\" title=\"第三部分：主题定制的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<p>自定义网站主题和样式。</p>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第四部分上部署准备\">第四部分（上）：部署准备<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%E4%B8%8A%E9%83%A8%E7%BD%B2%E5%87%86%E5%A4%87\" class=\"hash-link\" aria-label=\"第四部分（上）：部署准备的直接链接\" title=\"第四部分（上）：部署准备的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<p>部署前的准备工作和配置。</p>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第四部分下vercel部署\">第四部分（下）：Vercel部署<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%AC%AC%E5%9B%9B%E9%83%A8%E5%88%86%E4%B8%8Bvercel%E9%83%A8%E7%BD%B2\" class=\"hash-link\" aria-label=\"第四部分（下）：Vercel部署的直接链接\" title=\"第四部分（下）：Vercel部署的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<p>将网站部署到Vercel平台。</p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"ai绘图教程\">AI绘图教程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#ai%E7%BB%98%E5%9B%BE%E6%95%99%E7%A8%8B\" class=\"hash-link\" aria-label=\"AI绘图教程的直接链接\" title=\"AI绘图教程的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"logo设计基础\">LOGO设计基础<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#logo%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80\" class=\"hash-link\" aria-label=\"LOGO设计基础的直接链接\" title=\"LOGO设计基础的直接链接\" translate=\"no\">​</a></h3>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"教程视频-1logo设计入门\">教程视频 1：LOGO设计入门<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E6%95%99%E7%A8%8B%E8%A7%86%E9%A2%91-1logo%E8%AE%BE%E8%AE%A1%E5%85%A5%E9%97%A8\" class=\"hash-link\" aria-label=\"教程视频 1：LOGO设计入门的直接链接\" title=\"教程视频 1：LOGO设计入门的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"教程视频-2进阶技巧\">教程视频 2：进阶技巧<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E6%95%99%E7%A8%8B%E8%A7%86%E9%A2%91-2%E8%BF%9B%E9%98%B6%E6%8A%80%E5%B7%A7\" class=\"hash-link\" aria-label=\"教程视频 2：进阶技巧的直接链接\" title=\"教程视频 2：进阶技巧的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"ai对话系统\">AI对话系统<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#ai%E5%AF%B9%E8%AF%9D%E7%B3%BB%E7%BB%9F\" class=\"hash-link\" aria-label=\"AI对话系统的直接链接\" title=\"AI对话系统的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"环境配置教程\">环境配置教程<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B\" class=\"hash-link\" aria-label=\"环境配置教程的直接链接\" title=\"环境配置教程的直接链接\" translate=\"no\">​</a></h3>\n<h4 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"环境配置指南\">环境配置指南<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE%E6%8C%87%E5%8D%97\" class=\"hash-link\" aria-label=\"环境配置指南的直接链接\" title=\"环境配置指南的直接链接\" translate=\"no\">​</a></h4>\n<div style=\"width:100%;height:100%\"></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"提示\">提示<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E6%8F%90%E7%A4%BA\" class=\"hash-link\" aria-label=\"提示的直接链接\" title=\"提示的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">视频资源来自YouTube，请确保网络环境可以正常访问</li>\n<li class=\"\">建议按照顺序观看，每个系列的视频都是循序渐进的</li>\n<li class=\"\">如果视频无法播放，可以直接访问YouTube链接观看</li>\n<li class=\"\">欢迎在评论区留言交流和讨论</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"定期更新\">定期更新<a href=\"https://programming.chanmeng.org/zh-Hans/blog/video-resources/#%E5%AE%9A%E6%9C%9F%E6%9B%B4%E6%96%B0\" class=\"hash-link\" aria-label=\"定期更新的直接链接\" title=\"定期更新的直接链接\" translate=\"no\">​</a></h2>\n<p>我们会定期更新和补充新的视频教程资源，欢迎经常回来查看最新内容。如果你发现任何问题或有好的建议，也请告诉我们。</p>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/video-resources/",
            "title": "教程视频资源合集",
            "summary": "这里整理了文档中所有的教程视频资源，方便大家集中学习和查看。",
            "date_modified": "2025-02-01T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "教程",
                "视频资源"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/",
            "content_html": "<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"视频\">视频<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E8%A7%86%E9%A2%91\" class=\"hash-link\" aria-label=\"视频的直接链接\" title=\"视频的直接链接\" translate=\"no\">​</a></h2>\n<div style=\"width:100%;height:100%\"></div>\n<!-- -->\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"关于继续深造\">关于继续深造<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E5%85%B3%E4%BA%8E%E7%BB%A7%E7%BB%AD%E6%B7%B1%E9%80%A0\" class=\"hash-link\" aria-label=\"关于继续深造的直接链接\" title=\"关于继续深造的直接链接\" translate=\"no\">​</a></h2>\n<p>在申请海外研究生项目时，需要注意以下几个关键点：</p>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"工作经验的价值\">工作经验的价值<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E5%B7%A5%E4%BD%9C%E7%BB%8F%E9%AA%8C%E7%9A%84%E4%BB%B7%E5%80%BC\" class=\"hash-link\" aria-label=\"工作经验的价值的直接链接\" title=\"工作经验的价值的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">国内开发工作经验可以带来一定加分</li>\n<li class=\"\">但影响相对有限</li>\n<li class=\"\">需要重点突出与专业相关的实践经历</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"海外就业考量\">海外就业考量<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E6%B5%B7%E5%A4%96%E5%B0%B1%E4%B8%9A%E8%80%83%E9%87%8F\" class=\"hash-link\" aria-label=\"海外就业考量的直接链接\" title=\"海外就业考量的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"专业选择的关键因素\">专业选择的关键因素<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E4%B8%93%E4%B8%9A%E9%80%89%E6%8B%A9%E7%9A%84%E5%85%B3%E9%94%AE%E5%9B%A0%E7%B4%A0\" class=\"hash-link\" aria-label=\"专业选择的关键因素的直接链接\" title=\"专业选择的关键因素的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">\n<p><strong>就业市场需求导向</strong></p>\n<ul>\n<li class=\"\">研究目标国家的人才需求</li>\n<li class=\"\">了解热门行业和职位</li>\n<li class=\"\">分析未来市场趋势</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>移民政策考量</strong></p>\n<ul>\n<li class=\"\">是否有意向移民当地</li>\n<li class=\"\">了解当地移民政策</li>\n<li class=\"\">评估专业与移民的关联性</li>\n</ul>\n</li>\n<li class=\"\">\n<p><strong>个人职业规划</strong></p>\n<ul>\n<li class=\"\">明确长期职业目标</li>\n<li class=\"\">评估专业发展前景</li>\n<li class=\"\">考虑个人兴趣与能力</li>\n</ul>\n</li>\n</ol>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"建议与提醒\">建议与提醒<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E5%BB%BA%E8%AE%AE%E4%B8%8E%E6%8F%90%E9%86%92\" class=\"hash-link\" aria-label=\"建议与提醒的直接链接\" title=\"建议与提醒的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"申请前准备\">申请前准备<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E7%94%B3%E8%AF%B7%E5%89%8D%E5%87%86%E5%A4%87\" class=\"hash-link\" aria-label=\"申请前准备的直接链接\" title=\"申请前准备的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">充分调研目标国家</li>\n<li class=\"\">了解就业市场情况</li>\n<li class=\"\">研究移民政策变化</li>\n<li class=\"\">评估个人竞争力</li>\n</ol>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"规划要点\">规划要点<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E8%A7%84%E5%88%92%E8%A6%81%E7%82%B9\" class=\"hash-link\" aria-label=\"规划要点的直接链接\" title=\"规划要点的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">设定清晰的目标</li>\n<li class=\"\">制定详细的时间表</li>\n<li class=\"\">准备充足的资金</li>\n<li class=\"\">提前做好语言准备</li>\n</ul>\n<div class=\"theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>建议</div><div class=\"admonitionContent_BuS1\"><p>在做决定之前，建议：</p><ul>\n<li class=\"\">与在海外工作/学习的人交流</li>\n<li class=\"\">参加相关讲座和分享会</li>\n<li class=\"\">关注目标国家的政策变化</li>\n<li class=\"\">制定多个备选方案</li>\n</ul></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"行动计划\">行动计划<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E8%A1%8C%E5%8A%A8%E8%AE%A1%E5%88%92\" class=\"hash-link\" aria-label=\"行动计划的直接链接\" title=\"行动计划的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第一步信息收集\">第一步：信息收集<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E7%AC%AC%E4%B8%80%E6%AD%A5%E4%BF%A1%E6%81%AF%E6%94%B6%E9%9B%86\" class=\"hash-link\" aria-label=\"第一步：信息收集的直接链接\" title=\"第一步：信息收集的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">研究目标院校和专业</li>\n<li class=\"\">了解申请要求和截止日期</li>\n<li class=\"\">收集往年录取数据</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第二步能力提升\">第二步：能力提升<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E8%83%BD%E5%8A%9B%E6%8F%90%E5%8D%87\" class=\"hash-link\" aria-label=\"第二步：能力提升的直接链接\" title=\"第二步：能力提升的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">提高语言水平</li>\n<li class=\"\">积累相关工作经验</li>\n<li class=\"\">准备标准化考试</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第三步申请准备\">第三步：申请准备<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E7%AC%AC%E4%B8%89%E6%AD%A5%E7%94%B3%E8%AF%B7%E5%87%86%E5%A4%87\" class=\"hash-link\" aria-label=\"第三步：申请准备的直接链接\" title=\"第三步：申请准备的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">撰写个人陈述</li>\n<li class=\"\">准备推荐信</li>\n<li class=\"\">整理申请材料</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第四步长期规划\">第四步：长期规划<a href=\"https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/#%E7%AC%AC%E5%9B%9B%E6%AD%A5%E9%95%BF%E6%9C%9F%E8%A7%84%E5%88%92\" class=\"hash-link\" aria-label=\"第四步：长期规划的直接链接\" title=\"第四步：长期规划的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">制定职业发展路径</li>\n<li class=\"\">建立专业人脉网络</li>\n<li class=\"\">关注行业动态</li>\n</ul>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/overseas-study-career-planning/",
            "title": "如何规划海外深造与职业发展",
            "summary": "视频",
            "date_modified": "2024-12-11T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "留学",
                "职业规划",
                "海外发展"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/",
            "content_html": "<div class=\"theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 12 16\"><path fill-rule=\"evenodd\" d=\"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z\"></path></svg></span>前言</div><div class=\"admonitionContent_BuS1\"><p>这份教程将教你如何下载腾讯会议的录屏视频。整个过程不需要编程知识，只需要按照步骤操作即可。</p></div></div>\n<!-- -->\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"准备工作\">准备工作<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C\" class=\"hash-link\" aria-label=\"准备工作的直接链接\" title=\"准备工作的直接链接\" translate=\"no\">​</a></h2>\n<p>你需要准备：</p>\n<ul>\n<li class=\"\">电脑（Windows系统）</li>\n<li class=\"\">谷歌浏览器（Chrome）</li>\n<li class=\"\">Git Bash 软件（后面会教你安装）</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"详细步骤\">详细步骤<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E8%AF%A6%E7%BB%86%E6%AD%A5%E9%AA%A4\" class=\"hash-link\" aria-label=\"详细步骤的直接链接\" title=\"详细步骤的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第一步安装必要软件\">第一步：安装必要软件<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%AE%89%E8%A3%85%E5%BF%85%E8%A6%81%E8%BD%AF%E4%BB%B6\" class=\"hash-link\" aria-label=\"第一步：安装必要软件的直接链接\" title=\"第一步：安装必要软件的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">如果你还没有安装 Git Bash：<!-- -->\n<ul>\n<li class=\"\">访问官网：<a href=\"https://git-scm.com/downloads\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"\">Git 下载页面</a></li>\n<li class=\"\">点击 \"Download for Windows\"</li>\n<li class=\"\">下载完成后双击安装包</li>\n<li class=\"\">一路点击\"下一步\"使用默认设置完成安装</li>\n</ul>\n</li>\n</ol>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第二步获取视频下载信息\">第二步：获取视频下载信息<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E7%AC%AC%E4%BA%8C%E6%AD%A5%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD%E4%BF%A1%E6%81%AF\" class=\"hash-link\" aria-label=\"第二步：获取视频下载信息的直接链接\" title=\"第二步：获取视频下载信息的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">用谷歌浏览器打开腾讯会议录屏链接</li>\n<li class=\"\">点击播放视频，等待视频开始播放</li>\n<li class=\"\">在键盘上按 <code>F12</code> 键（某些笔记本可能需要同时按 <code>Fn + F12</code>）</li>\n<li class=\"\">在开发者工具窗口顶部找到并点击 \"Network\"（网络）标签</li>\n<li class=\"\">在 Network 下面找到并点击 \"Media\"（媒体）选项</li>\n<li class=\"\">刷新网页，重新开始播放视频</li>\n<li class=\"\">等待几秒，找到以 <code>.mp4</code> 结尾的文件</li>\n<li class=\"\">右键点击这个 <code>.mp4</code> 文件</li>\n<li class=\"\">选择 \"Copy\" → \"Copy as cURL(bash)\"</li>\n</ol>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第三步修改下载命令\">第三步：修改下载命令<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E7%AC%AC%E4%B8%89%E6%AD%A5%E4%BF%AE%E6%94%B9%E4%B8%8B%E8%BD%BD%E5%91%BD%E4%BB%A4\" class=\"hash-link\" aria-label=\"第三步：修改下载命令的直接链接\" title=\"第三步：修改下载命令的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"theme-tabs-container tabs-container tabList__CuJ\"><ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\"><li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">修改前</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">修改后</li></ul><div class=\"margin-top--md\"><div role=\"tabpanel\" class=\"tabItem_Ymn6\"><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">curl 'https://example.com/video.mp4' \\</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">-H 'range: bytes=14200808-314114094' \\</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">-H 'if-range: \"17c5ccf6d75f9bccce2a71f5a32dbea4-3\"' \\</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">-H 'accept: */*' \\</span><br></span></code></pre></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">curl 'https://example.com/video.mp4' \\</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">-H 'accept: */*' \\</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">--output /d/meeting_video.mp4</span><br></span></code></pre></div></div></div></div></div>\n<div class=\"theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z\"></path></svg></span>重要提示</div><div class=\"admonitionContent_BuS1\"><p>必须删除包含 <code>range:</code> 和 <code>if-range:</code> 的行，这是确保下载完整视频的关键步骤！</p></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"第四步下载视频\">第四步：下载视频<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E7%AC%AC%E5%9B%9B%E6%AD%A5%E4%B8%8B%E8%BD%BD%E8%A7%86%E9%A2%91\" class=\"hash-link\" aria-label=\"第四步：下载视频的直接链接\" title=\"第四步：下载视频的直接链接\" translate=\"no\">​</a></h3>\n<ol>\n<li class=\"\">打开 Git Bash（从开始菜单找到）</li>\n<li class=\"\">粘贴修改好的命令</li>\n<li class=\"\">按回车键执行</li>\n<li class=\"\">等待下载完成</li>\n</ol>\n<p>下载过程示例：</p>\n<p><img decoding=\"async\" loading=\"lazy\" alt=\"腾讯会议视频下载过程截图\" src=\"https://programming.chanmeng.org/zh-Hans/assets/images/2024-11-24-tencent-meeting-recording-5dfce77d2bd5d80f1ed57bcf23c2d756.png\" width=\"1457\" height=\"990\" class=\"img_ev3q\"></p>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"常见问题解答\">常见问题解答<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94\" class=\"hash-link\" aria-label=\"常见问题解答的直接链接\" title=\"常见问题解答的直接链接\" translate=\"no\">​</a></h2>\n<details class=\"details_lb9f alert alert--info details_b_Ee\" data-collapsed=\"true\"><summary>1. 为什么我下载的视频不完整？</summary><div><div class=\"collapsibleContent_i85q\"><ul>\n<li class=\"\">最可能的原因是没有删除 range 字段</li>\n<li class=\"\">请回到第三步，确保删除了所有 range 相关的行</li>\n<li class=\"\">重新获取下载命令，从头操作一遍</li>\n</ul></div></div></details>\n<details class=\"details_lb9f alert alert--info details_b_Ee\" data-collapsed=\"true\"><summary>2. 找不到 range 字段怎么办？</summary><div><div class=\"collapsibleContent_i85q\"><ul>\n<li class=\"\">仔细查看复制的命令中是否包含 <code>range:</code> 或 <code>if-range:</code></li>\n<li class=\"\">如果确实找不到，说明可能不需要删除，直接添加保存路径即可</li>\n<li class=\"\">如果不确定，可以把命令发给懂技术的朋友帮忙检查</li>\n</ul></div></div></details>\n<details class=\"details_lb9f alert alert--info details_b_Ee\" data-collapsed=\"true\"><summary>3. 想更改保存位置怎么办？</summary><div><div class=\"collapsibleContent_i85q\"><p>可以修改 <code>--output</code> 参数：</p><div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"># D盘根目录</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">--output /d/视频名称.mp4</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"># D盘的 Videos 文件夹</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">--output /d/Videos/视频名称.mp4</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"># 桌面</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">--output /c/Users/你的用户名/Desktop/视频名称.mp4</span><br></span></code></pre></div></div></div></div></details>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"注意事项\">注意事项<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9\" class=\"hash-link\" aria-label=\"注意事项的直接链接\" title=\"注意事项的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">确保有足够的磁盘空间</li>\n<li class=\"\">下载过程中不要关闭 Git Bash</li>\n<li class=\"\">保持网络连接稳定</li>\n<li class=\"\">下载完成前不要关机或休眠</li>\n<li class=\"\">如果下载速度很慢，可以尝试重新获取下载命令</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"进阶提示\">进阶提示<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E8%BF%9B%E9%98%B6%E6%8F%90%E7%A4%BA\" class=\"hash-link\" aria-label=\"进阶提示的直接链接\" title=\"进阶提示的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">创建专门的文件夹存放下载的视频</li>\n<li class=\"\">给视频文件起一个有意义的名字</li>\n<li class=\"\">下载完成后确认视频是否可以正常播放</li>\n<li class=\"\">及时备份重要的视频文件</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"最后提醒\">最后提醒<a href=\"https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/#%E6%9C%80%E5%90%8E%E6%8F%90%E9%86%92\" class=\"hash-link\" aria-label=\"最后提醒的直接链接\" title=\"最后提醒的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-admonition theme-admonition-caution admonition_xJq3 alert alert--warning\"><div class=\"admonitionHeading_Gvgb\"><span class=\"admonitionIcon_Rf37\"><svg viewBox=\"0 0 16 16\"><path fill-rule=\"evenodd\" d=\"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z\"></path></svg></span>重要</div><div class=\"admonitionContent_BuS1\"><ol>\n<li class=\"\">请尊重视频版权，不要随意传播下载的视频</li>\n<li class=\"\">下载的视频仅供个人学习使用</li>\n<li class=\"\">重要的视频建议及时备份</li>\n<li class=\"\">如果遇到问题，可以从第一步重新操作</li>\n<li class=\"\">特别强调：别忘了删除 range 字段，这是最关键的一步！</li>\n</ol></div></div>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/tencent-meeting-recording-download/",
            "title": "腾讯会议录屏下载完整指南",
            "summary": "这份教程将教你如何下载腾讯会议的录屏视频。整个过程不需要编程知识，只需要按照步骤操作即可。",
            "date_modified": "2024-11-24T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "教程",
                "腾讯会议",
                "视频下载"
            ]
        },
        {
            "id": "https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/",
            "content_html": "\n<!-- -->\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"设计理念\">设计理念<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E8%AE%BE%E8%AE%A1%E7%90%86%E5%BF%B5\" class=\"hash-link\" aria-label=\"设计理念的直接链接\" title=\"设计理念的直接链接\" translate=\"no\">​</a></h2>\n<p>受极简几何艺术家的启发，我们的设计系统强调：</p>\n<ul>\n<li class=\"\">清晰的线条和基本几何形状（方形、圆形、三角形）</li>\n<li class=\"\">有限但对比鲜明的配色方案</li>\n<li class=\"\">基于网格的布局</li>\n<li class=\"\">将负空间作为设计元素</li>\n<li class=\"\">视觉元素的系统性重复</li>\n<li class=\"\">注重功能性和可读性</li>\n</ul>\n<!-- -->\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"色彩系统\">色彩系统<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E8%89%B2%E5%BD%A9%E7%B3%BB%E7%BB%9F\" class=\"hash-link\" aria-label=\"色彩系统的直接链接\" title=\"色彩系统的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"主色\">主色<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E4%B8%BB%E8%89%B2\" class=\"hash-link\" aria-label=\"主色的直接链接\" title=\"主色的直接链接\" translate=\"no\">​</a></h3>\n<div style=\"display:flex;flex-wrap:wrap;gap:10px\"><div style=\"background-color:#1a237e;width:100px;height:100px;display:inline-block;margin:10px;border-radius:4px;text-align:center;color:white;padding:8px\"><div>深海军蓝</div><div>#1a237e</div></div><div style=\"background-color:#ffffff;width:100px;height:100px;display:inline-block;margin:10px;border-radius:4px;text-align:center;color:#121212;padding:8px\"><div>纯白</div><div>#ffffff</div></div><div style=\"background-color:#121212;width:100px;height:100px;display:inline-block;margin:10px;border-radius:4px;text-align:center;color:white;padding:8px\"><div>几何黑</div><div>#121212</div></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"辅助色\">辅助色<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E8%BE%85%E5%8A%A9%E8%89%B2\" class=\"hash-link\" aria-label=\"辅助色的直接链接\" title=\"辅助色的直接链接\" translate=\"no\">​</a></h3>\n<div style=\"display:flex;flex-wrap:wrap;gap:10px\"><div style=\"background-color:#4a5fc1;width:100px;height:100px;display:inline-block;margin:10px;border-radius:4px;text-align:center;color:white;padding:8px\"><div>柔和蓝</div><div>#4a5fc1</div></div><div style=\"background-color:#f5f6f7;width:100px;height:100px;display:inline-block;margin:10px;border-radius:4px;text-align:center;color:#121212;padding:8px\"><div>浅灰</div><div>#f5f6f7</div></div><div style=\"background-color:#ef5350;width:100px;height:100px;display:inline-block;margin:10px;border-radius:4px;text-align:center;color:white;padding:8px\"><div>强调红</div><div>#ef5350</div></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"字体系统\">字体系统<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%AD%97%E4%BD%93%E7%B3%BB%E7%BB%9F\" class=\"hash-link\" aria-label=\"字体系统的直接链接\" title=\"字体系统的直接链接\" translate=\"no\">​</a></h2>\n<div class=\"theme-tabs-container tabs-container tabList__CuJ\"><ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\"><li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">基础字体</li><li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">等宽字体</li></ul><div class=\"margin-top--md\"><div role=\"tabpanel\" class=\"tabItem_Ymn6\"><div class=\"language-css codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-css codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token variable\" style=\"color:#36acaa\">--ifm-font-family-base</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'Space Grotesk'</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> system-ui</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> -apple-system</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><br></span></code></pre></div></div></div><div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\"><div class=\"language-css codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-css codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token variable\" style=\"color:#36acaa\">--ifm-font-family-monospace</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'JetBrains Mono'</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> SFMono-Regular</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> Monaco</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><br></span></code></pre></div></div></div></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"字体大小\">字体大小<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F\" class=\"hash-link\" aria-label=\"字体大小的直接链接\" title=\"字体大小的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">标题:<!-- -->\n<ul>\n<li class=\"\">h1: 2.5rem (40px)</li>\n<li class=\"\">h2: 2rem (32px)</li>\n<li class=\"\">h3: 1.5rem (24px)</li>\n</ul>\n</li>\n<li class=\"\">正文: 1rem (16px)</li>\n<li class=\"\">代码: 0.9375rem (15px)</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"布局指南\">布局指南<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%B8%83%E5%B1%80%E6%8C%87%E5%8D%97\" class=\"hash-link\" aria-label=\"布局指南的直接链接\" title=\"布局指南的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"网格系统\">网格系统<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E7%BD%91%E6%A0%BC%E7%B3%BB%E7%BB%9F\" class=\"hash-link\" aria-label=\"网格系统的直接链接\" title=\"网格系统的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">12列网格</li>\n<li class=\"\">槽宽: 24px</li>\n<li class=\"\">最大内容宽度: 1200px</li>\n<li class=\"\">响应式断点:<!-- -->\n<ul>\n<li class=\"\">移动端: 320px</li>\n<li class=\"\">平板: 768px</li>\n<li class=\"\">桌面: 1024px</li>\n</ul>\n</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"间距比例\">间距比例<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E9%97%B4%E8%B7%9D%E6%AF%94%E4%BE%8B\" class=\"hash-link\" aria-label=\"间距比例的直接链接\" title=\"间距比例的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-css codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-css codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token variable\" style=\"color:#36acaa\">--space-xs</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0.25</span><span class=\"token unit\">rem</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\">  </span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 4px */</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token variable\" style=\"color:#36acaa\">--space-sm</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0.5</span><span class=\"token unit\">rem</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\">   </span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 8px */</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token variable\" style=\"color:#36acaa\">--space-md</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">1</span><span class=\"token unit\">rem</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\">     </span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 16px */</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token variable\" style=\"color:#36acaa\">--space-lg</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">1.5</span><span class=\"token unit\">rem</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\">   </span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 24px */</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token variable\" style=\"color:#36acaa\">--space-xl</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">2</span><span class=\"token unit\">rem</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\">     </span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 32px */</span><br></span></code></pre></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"组件设计\">组件设计<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1\" class=\"hash-link\" aria-label=\"组件设计的直接链接\" title=\"组件设计的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"导航栏\">导航栏<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%AF%BC%E8%88%AA%E6%A0%8F\" class=\"hash-link\" aria-label=\"导航栏的直接链接\" title=\"导航栏的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">固定头部与几何logo</li>\n<li class=\"\">桌面端水平菜单</li>\n<li class=\"\">移动端汉堡菜单</li>\n<li class=\"\">使用几何形状作为激活状态指示器</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"hero区块\">Hero区块<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#hero%E5%8C%BA%E5%9D%97\" class=\"hash-link\" aria-label=\"Hero区块的直接链接\" title=\"Hero区块的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-css codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-css codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token selector class\" style=\"color:#00009f\">.hero</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">background</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">linear-gradient</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token number\" style=\"color:#36acaa\">135</span><span class=\"token unit\">deg</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">var</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token variable\" style=\"color:#36acaa\">--primary-color</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0</span><span class=\"token unit\">%</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">var</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token variable\" style=\"color:#36acaa\">--secondary-color</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">100</span><span class=\"token unit\">%</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">clip-path</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">polygon</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token number\" style=\"color:#36acaa\">0</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">100</span><span class=\"token unit\">%</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">100</span><span class=\"token unit\">%</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">85</span><span class=\"token unit\">%</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">100</span><span class=\"token unit\">%</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">min-height</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">80</span><span class=\"token unit\">vh</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"代码块\">代码块<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E4%BB%A3%E7%A0%81%E5%9D%97\" class=\"hash-link\" aria-label=\"代码块的直接链接\" title=\"代码块的直接链接\" translate=\"no\">​</a></h3>\n<ul>\n<li class=\"\">深色背景: <code>#1e1e1e</code></li>\n<li class=\"\">受几何图案启发的语法高亮</li>\n<li class=\"\">圆角: 4px</li>\n<li class=\"\">内边距: 1.5rem</li>\n</ul>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"卡片\">卡片<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%8D%A1%E7%89%87\" class=\"hash-link\" aria-label=\"卡片的直接链接\" title=\"卡片的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-css codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-css codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token selector class\" style=\"color:#00009f\">.card</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">border</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> none</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">border-radius</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">4</span><span class=\"token unit\">px</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">box-shadow</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">4</span><span class=\"token unit\">px</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">6</span><span class=\"token unit\">px</span><span class=\"token plain\"> </span><span class=\"token color function\" style=\"color:#d73a49\">rgba</span><span class=\"token color punctuation\" style=\"color:#393A34\">(</span><span class=\"token color number\" style=\"color:#36acaa\">0</span><span class=\"token color punctuation\" style=\"color:#393A34\">,</span><span class=\"token color\"> </span><span class=\"token color number\" style=\"color:#36acaa\">0</span><span class=\"token color punctuation\" style=\"color:#393A34\">,</span><span class=\"token color\"> </span><span class=\"token color number\" style=\"color:#36acaa\">0</span><span class=\"token color punctuation\" style=\"color:#393A34\">,</span><span class=\"token color\"> </span><span class=\"token color number\" style=\"color:#36acaa\">0.1</span><span class=\"token color punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">transition</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> transform </span><span class=\"token number\" style=\"color:#36acaa\">0.2</span><span class=\"token unit\">s</span><span class=\"token plain\"> ease</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token selector class\" style=\"color:#00009f\">.card</span><span class=\"token selector pseudo-class\" style=\"color:#00009f\">:hover</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token property\" style=\"color:#36acaa\">transform</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">translateY</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token number\" style=\"color:#36acaa\">-4</span><span class=\"token unit\">px</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></span></code></pre></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"实现指南\">实现指南<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%AE%9E%E7%8E%B0%E6%8C%87%E5%8D%97\" class=\"hash-link\" aria-label=\"实现指南的直接链接\" title=\"实现指南的直接链接\" translate=\"no\">​</a></h2>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"1-更新-docusaurusconfigjs\">1. 更新 docusaurus.config.js<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#1-%E6%9B%B4%E6%96%B0-docusaurusconfigjs\" class=\"hash-link\" aria-label=\"1. 更新 docusaurus.config.js的直接链接\" title=\"1. 更新 docusaurus.config.js的直接链接\" translate=\"no\">​</a></h3>\n<div class=\"language-javascript codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-javascript codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">module</span><span class=\"token punctuation\" style=\"color:#393A34\">.</span><span class=\"token property-access\">exports</span><span class=\"token plain\"> </span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token literal-property property\" style=\"color:#36acaa\">themeConfig</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token literal-property property\" style=\"color:#36acaa\">navbar</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token literal-property property\" style=\"color:#36acaa\">style</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'dark'</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token literal-property property\" style=\"color:#36acaa\">logo</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token literal-property property\" style=\"color:#36acaa\">alt</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'Site Logo'</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token literal-property property\" style=\"color:#36acaa\">src</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'img/logo.svg'</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token literal-property property\" style=\"color:#36acaa\">items</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">[</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">// 导航项</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token punctuation\" style=\"color:#393A34\">]</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token literal-property property\" style=\"color:#36acaa\">prism</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token literal-property property\" style=\"color:#36acaa\">theme</span><span class=\"token operator\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">require</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token string\" style=\"color:#e3116c\">'prism-react-renderer/themes/nightOwl'</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">,</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"2-自定义css变量\">2. 自定义CSS变量<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#2-%E8%87%AA%E5%AE%9A%E4%B9%89css%E5%8F%98%E9%87%8F\" class=\"hash-link\" aria-label=\"2. 自定义CSS变量的直接链接\" title=\"2. 自定义CSS变量的直接链接\" translate=\"no\">​</a></h3>\n<p>在 <code>src/css/custom.css</code> 中:</p>\n<div class=\"language-css codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-css codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token selector pseudo-class\" style=\"color:#00009f\">:root</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#1a237e</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary-dark</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#172069</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary-darker</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#151e63</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary-darkest</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#111851</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary-light</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#1d2893</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary-lighter</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#1f2a99</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-color-primary-lightest</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token hexcode color\">#232fab</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-code-font-size</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">0.9375</span><span class=\"token unit\">rem</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-font-size-base</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">16</span><span class=\"token unit\">px</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-line-height-base</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token number\" style=\"color:#36acaa\">1.5</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token variable\" style=\"color:#36acaa\">--ifm-spacing-horizontal</span><span class=\"token punctuation\" style=\"color:#393A34\">:</span><span class=\"token plain\"> </span><span class=\"token function\" style=\"color:#d73a49\">var</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token variable\" style=\"color:#36acaa\">--space-md</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></span></code></pre></div></div>\n<h3 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"3-首页结构\">3. 首页结构<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#3-%E9%A6%96%E9%A1%B5%E7%BB%93%E6%9E%84\" class=\"hash-link\" aria-label=\"3. 首页结构的直接链接\" title=\"3. 首页结构的直接链接\" translate=\"no\">​</a></h3>\n<p>在 <code>src/pages/index.js</code> 中:</p>\n<div class=\"language-javascript codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#393A34;--prism-background-color:#f6f8fa\"><div class=\"codeBlockContent_QJqH\"><pre tabindex=\"0\" class=\"prism-code language-javascript codeBlock_bY9V thin-scrollbar\" style=\"color:#393A34;background-color:#f6f8fa\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token keyword module\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token imports maybe-class-name\">React</span><span class=\"token plain\"> </span><span class=\"token keyword module\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'react'</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token keyword module\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token imports maybe-class-name\">Layout</span><span class=\"token plain\"> </span><span class=\"token keyword module\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'@theme/Layout'</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token keyword module\" style=\"color:#00009f\">import</span><span class=\"token plain\"> </span><span class=\"token imports maybe-class-name\">Link</span><span class=\"token plain\"> </span><span class=\"token keyword module\" style=\"color:#00009f\">from</span><span class=\"token plain\"> </span><span class=\"token string\" style=\"color:#e3116c\">'@docusaurus/Link'</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\" style=\"display:inline-block\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token keyword module\" style=\"color:#00009f\">export</span><span class=\"token plain\"> </span><span class=\"token keyword module\" style=\"color:#00009f\">default</span><span class=\"token plain\"> </span><span class=\"token keyword\" style=\"color:#00009f\">function</span><span class=\"token plain\"> </span><span class=\"token function maybe-class-name\" style=\"color:#d73a49\">Home</span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token keyword control-flow\" style=\"color:#00009f\">return</span><span class=\"token plain\"> </span><span class=\"token punctuation\" style=\"color:#393A34\">(</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token maybe-class-name\">Layout</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      title</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"AI Programming Education\"</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      description</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"Learn AI programming through collaborative examples\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">header className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"hero\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">div className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"container\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">h1 className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"hero__title\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token maybe-class-name\">Master</span><span class=\"token plain\"> </span><span class=\"token constant\" style=\"color:#36acaa\">AI</span><span class=\"token plain\"> </span><span class=\"token maybe-class-name\">Programming</span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">h1</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">p className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"hero__subtitle\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">            </span><span class=\"token maybe-class-name\">Through</span><span class=\"token plain\"> collaborative learning and practical examples</span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">p</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">div className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"buttons\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">            </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token maybe-class-name\">Link</span><span class=\"token plain\"> className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"button button--primary button--lg\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">              </span><span class=\"token maybe-class-name\">Get</span><span class=\"token plain\"> </span><span class=\"token maybe-class-name\">Started</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">            </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token maybe-class-name\">Link</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">div</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">div</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">header</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 特性部分 */</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">main</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">section className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"features\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token plain\">div className</span><span class=\"token operator\" style=\"color:#393A34\">=</span><span class=\"token string\" style=\"color:#e3116c\">\"container\"</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">            </span><span class=\"token punctuation\" style=\"color:#393A34\">{</span><span class=\"token comment\" style=\"color:#999988;font-style:italic\">/* 特性卡片 */</span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">          </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">div</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">        </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">section</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">      </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token plain\">main</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">    </span><span class=\"token operator\" style=\"color:#393A34\">&lt;</span><span class=\"token operator\" style=\"color:#393A34\">/</span><span class=\"token maybe-class-name\">Layout</span><span class=\"token operator\" style=\"color:#393A34\">&gt;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\">  </span><span class=\"token punctuation\" style=\"color:#393A34\">)</span><span class=\"token punctuation\" style=\"color:#393A34\">;</span><span class=\"token plain\"></span><br></span><span class=\"token-line\" style=\"color:#393A34\"><span class=\"token plain\"></span><span class=\"token punctuation\" style=\"color:#393A34\">}</span><br></span></code></pre></div></div>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"动画指南\">动画指南<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%8A%A8%E7%94%BB%E6%8C%87%E5%8D%97\" class=\"hash-link\" aria-label=\"动画指南的直接链接\" title=\"动画指南的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">使用细微的过渡效果 (0.2-0.3s)</li>\n<li class=\"\">倾向于使用transform而非opacity变化</li>\n<li class=\"\">实现几何展示动画</li>\n<li class=\"\">保持交互流畅且有目的性</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"响应式设计\">响应式设计<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1\" class=\"hash-link\" aria-label=\"响应式设计的直接链接\" title=\"响应式设计的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">移动优先方法</li>\n<li class=\"\">流式排版</li>\n<li class=\"\">可维护的网格系统</li>\n<li class=\"\">在断点处进行自适应布局更改</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"无障碍设计\">无障碍设计<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BE%E8%AE%A1\" class=\"hash-link\" aria-label=\"无障碍设计的直接链接\" title=\"无障碍设计的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">符合WCAG 2.1 AA标准</li>\n<li class=\"\">高对比度</li>\n<li class=\"\">清晰的焦点状态</li>\n<li class=\"\">语义化HTML结构</li>\n<li class=\"\">适配屏幕阅读器</li>\n</ul>\n<h2 class=\"anchor anchorTargetHideOnScrollNavbar_vjPI\" id=\"性能优化\">性能优化<a href=\"https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/#%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96\" class=\"hash-link\" aria-label=\"性能优化的直接链接\" title=\"性能优化的直接链接\" translate=\"no\">​</a></h2>\n<ul>\n<li class=\"\">图片优化</li>\n<li class=\"\">实现懒加载</li>\n<li class=\"\">最小化CSS/JS包</li>\n<li class=\"\">尽可能使用系统字体</li>\n<li class=\"\">缓存静态资源</li>\n</ul>",
            "url": "https://programming.chanmeng.org/zh-Hans/blog/design-system-guide/",
            "title": "设计系统：AI编程教育平台指南",
            "summary": "{/ 创意样式块 /}",
            "date_modified": "2024-11-19T00:00:00.000Z",
            "author": {
                "name": "Chan Meng",
                "url": "https://github.com/chanmeng"
            },
            "tags": [
                "设计",
                "UI/UX",
                "文档"
            ]
        }
    ]
}