<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>OpenCode 学习 Blog</title>
        <link>https://szqifeng.github.io/blog</link>
        <description>OpenCode 学习 Blog</description>
        <lastBuildDate>Wed, 11 Mar 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>zh-Hans</language>
        <copyright>Copyright © 2026 LearnOpenCode</copyright>
        <item>
            <title><![CDATA[🦞 我是如何基于 opencode 完成 ESP32 智能龙虾缸监控系统开发的]]></title>
            <link>https://szqifeng.github.io/blog/esp32-opencode-development</link>
            <guid>https://szqifeng.github.io/blog/esp32-opencode-development</guid>
            <pubDate>Wed, 11 Mar 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[通过 opencode 的聊天式代码生成功能，我用不到 2 小时就完成了一个完整的 ESP32 智能龙虾缸监控系统，包括温湿度监测、水温检测、水泵控制和 Web 管理界面。]]></description>
            <content:encoded><![CDATA[<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="前言">前言<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%89%8D%E8%A8%80" class="hash-link" aria-label="前言的直接链接" title="前言的直接链接" translate="no">​</a></h2>
<p>作为一个喜欢折腾的 DIY 爱好者，我一直想给我的小龙虾缸加一套智能监控系统。最近，我用了 <strong>opencode</strong> —— 一个强大的 AI 编程助手，竟然用不到 2 小时就搞定了！</p>
<p>今天就分享我是如何通过<strong>聊天式交互</strong>完成整个开发的。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="项目背景">项目背景<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E9%A1%B9%E7%9B%AE%E8%83%8C%E6%99%AF" class="hash-link" aria-label="项目背景的直接链接" title="项目背景的直接链接" translate="no">​</a></h2>
<p>我的小龙虾缸需要：</p>
<ul>
<li class="">实时监测水温和空气温湿度</li>
<li class="">根据水温自动控制水泵（降温/循环）</li>
<li class="">能随时查看数据状态</li>
<li class="">成本要低（不想买几百块的专业设备）</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="硬件清单">硬件清单<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%A1%AC%E4%BB%B6%E6%B8%85%E5%8D%95" class="hash-link" aria-label="硬件清单的直接链接" title="硬件清单的直接链接" translate="no">​</a></h2>
<table><thead><tr><th>组件</th><th>价格</th><th>说明</th></tr></thead><tbody><tr><td>ESP32 开发板</td><td>¥30</td><td>主控板</td></tr><tr><td>DS18B20 温度传感器</td><td>¥5</td><td>水温检测</td></tr><tr><td>DHT11 温湿度传感器</td><td>¥3</td><td>空气温湿度</td></tr><tr><td>5V 水泵模块</td><td>¥15</td><td>水循环控制</td></tr><tr><td>继电器模块</td><td>¥8</td><td>控制水泵</td></tr><tr><td>OLED 屏幕 (0.96寸)</td><td>¥12</td><td>本地显示</td></tr><tr><td>杜邦线若干</td><td>¥5</td><td>连接线</td></tr></tbody></table>
<p><strong>总成本：约 ¥78</strong></p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="传统开发-vs-opencode-开发">传统开发 vs opencode 开发<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E4%BC%A0%E7%BB%9F%E5%BC%80%E5%8F%91-vs-opencode-%E5%BC%80%E5%8F%91" class="hash-link" aria-label="传统开发 vs opencode 开发的直接链接" title="传统开发 vs opencode 开发的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="如果不用-opencode我需要">如果不用 opencode，我需要：<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%A6%82%E6%9E%9C%E4%B8%8D%E7%94%A8-opencode%E6%88%91%E9%9C%80%E8%A6%81" class="hash-link" aria-label="如果不用 opencode，我需要：的直接链接" title="如果不用 opencode，我需要：的直接链接" translate="no">​</a></h3>
<ol>
<li class="">
<p><strong>查阅资料</strong>（2-3 小时）</p>
<ul>
<li class="">ESP32 引脚定义</li>
<li class="">DS18B20 和 DHT11 的库使用方法</li>
<li class="">Web 服务器搭建教程</li>
<li class="">OLED 屏幕驱动</li>
</ul>
</li>
<li class="">
<p><strong>编写代码</strong>（4-6 小时）</p>
<ul>
<li class="">初始化各种传感器</li>
<li class="">WiFi 连接和配置</li>
<li class="">HTTP 服务器和路由</li>
<li class="">Web 界面（HTML/CSS/JS）</li>
<li class="">自动控制逻辑</li>
</ul>
</li>
<li class="">
<p><strong>调试排错</strong>（1-2 小时）</p>
<ul>
<li class="">传感器读取失败</li>
<li class="">WiFi 连接不稳定</li>
<li class="">Web 界面无法访问</li>
</ul>
</li>
</ol>
<p><strong>总时间：7-11 小时</strong></p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="用-opencode我只花了-2-小时">用 opencode，我只花了 2 小时！<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%94%A8-opencode%E6%88%91%E5%8F%AA%E8%8A%B1%E4%BA%86-2-%E5%B0%8F%E6%97%B6" class="hash-link" aria-label="用 opencode，我只花了 2 小时！的直接链接" title="用 opencode，我只花了 2 小时！的直接链接" translate="no">​</a></h3>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="对话式开发全流程">对话式开发全流程<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%AF%B9%E8%AF%9D%E5%BC%8F%E5%BC%80%E5%8F%91%E5%85%A8%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="对话式开发全流程的直接链接" title="对话式开发全流程的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="第-1-次对话---项目框架">第 1 次对话 - 项目框架<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%AC%AC-1-%E6%AC%A1%E5%AF%B9%E8%AF%9D---%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6" class="hash-link" aria-label="第 1 次对话 - 项目框架的直接链接" title="第 1 次对话 - 项目框架的直接链接" translate="no">​</a></h3>
<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">我要开发一个 ESP32 智能龙虾缸监控系统，需要以下功能：</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">1. 使用 DS18B20 测量水温</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">2. 使用 DHT11 测量空气温湿度</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">3. 控制一个 5V 水泵（通过继电器）</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">4. 提供 Web 管理界面，可以查看数据和手动控制水泵</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">5. 使用 OLED 屏幕显示实时数据</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">请帮我生成完整的 PlatformIO 项目配置和代码</span><br></span></code></pre></div></div>
<p><strong>opencode：</strong>
好的，我来帮你生成完整的代码。这个项目将使用：</p>
<ul>
<li class="">OneWire 和 DallasTemperature（DS18B20）</li>
<li class="">DHT 库（DHT11）</li>
<li class="">Adafruit_SSD1306（OLED）</li>
<li class="">ESPAsyncWebServer（Web 服务器）</li>
</ul>
<p>📝 生成文件：</p>
<ul>
<li class=""><code>platformio.ini</code> - 项目配置</li>
<li class=""><code>src/main.cpp</code> - 主程序代码</li>
<li class=""><code>data/index.html</code> - Web 界面</li>
</ul>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="第-2-次对话---添加-wifi-配置">第 2 次对话 - 添加 WiFi 配置<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%AC%AC-2-%E6%AC%A1%E5%AF%B9%E8%AF%9D---%E6%B7%BB%E5%8A%A0-wifi-%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="第 2 次对话 - 添加 WiFi 配置的直接链接" title="第 2 次对话 - 添加 WiFi 配置的直接链接" translate="no">​</a></h3>
<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">上面的代码不错，但我想要一个配置模式。首次启动时创建 AP 热点 "Lobster_Config"，访问 192.168.4.1 可以配置 WiFi 信息。配置成功后保存到 SPIFFS，重启后自动连接。</span><br></span></code></pre></div></div>
<p><strong>opencode：</strong>
好的，我来添加 WiFi 配置功能。这将包括：</p>
<ul>
<li class="">WiFiManager 类实现配置逻辑</li>
<li class="">配置 Web 页面 HTML/CSS/JS</li>
<li class="">SPIFFS 文件系统初始化</li>
</ul>
<p>⚠️ <strong>注意</strong>：首次启动后连接 "Lobster_Config" 热点配置 WiFi。</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="第-3-次对话---自动控制逻辑">第 3 次对话 - 自动控制逻辑<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%AC%AC-3-%E6%AC%A1%E5%AF%B9%E8%AF%9D---%E8%87%AA%E5%8A%A8%E6%8E%A7%E5%88%B6%E9%80%BB%E8%BE%91" class="hash-link" aria-label="第 3 次对话 - 自动控制逻辑的直接链接" title="第 3 次对话 - 自动控制逻辑的直接链接" translate="no">​</a></h3>
<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">我需要根据水温自动控制水泵。规则如下：</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">- 水温 &gt; 28°C 时，水泵开启（每 10 分钟工作 5 分钟）</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">- 水温 &lt; 24°C 时，水泵关闭</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">- 其他温度，水泵每 30 分钟工作 5 分钟</span><br></span></code></pre></div></div>
<p><strong>opencode：</strong>
好的，我来添加智能温控逻辑：</p>
<ul>
<li class="">温度阈值配置</li>
<li class="">定时器实现</li>
<li class="">状态机控制水泵开关</li>
</ul>
<p>💡 <strong>智能策略</strong>：高温时增加水泵工作时间，低温时节省能源。</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="第-4-次对话---优化-web-界面">第 4 次对话 - 优化 Web 界面<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%AC%AC-4-%E6%AC%A1%E5%AF%B9%E8%AF%9D---%E4%BC%98%E5%8C%96-web-%E7%95%8C%E9%9D%A2" class="hash-link" aria-label="第 4 次对话 - 优化 Web 界面的直接链接" title="第 4 次对话 - 优化 Web 界面的直接链接" translate="no">​</a></h3>
<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">Web 界面需要更美观一些，要求：</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">1. 深色主题，现代化 UI</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">2. 实时数据更新（WebSocket 或轮询）</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">3. 显示历史数据图表（使用 Chart.js）</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">4. 移动端适配</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">5. 添加系统设置页面（修改阈值、工作时间等）</span><br></span></code></pre></div></div>
<p><strong>opencode：</strong>
好的，我来重新设计整个 Web 界面：</p>
<ul>
<li class="">响应式 HTML/CSS（深色主题）</li>
<li class="">Chart.js 图表集成</li>
<li class="">RESTful API 设计</li>
<li class="">设置表单和验证</li>
</ul>
<p>🎨 <strong>界面预览</strong>：现代化设计，支持手机和电脑访问。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="硬件接线">硬件接线<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E7%A1%AC%E4%BB%B6%E6%8E%A5%E7%BA%BF" class="hash-link" aria-label="硬件接线的直接链接" title="硬件接线的直接链接" translate="no">​</a></h2>
<p>根据生成的代码，接线非常清晰：</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">ESP32 引脚分配：</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GPIO 4  → DS18B20 数据引脚</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GPIO 5  → DHT11 数据引脚</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GPIO 16 → 继电器控制引脚</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GPIO 21 → OLED SDA</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">GPIO 22 → OLED SCL</span><br></span></code></pre></div></div>
<p><strong>关键注意事项：</strong></p>
<ul>
<li class="">✅ DS18B20 需要 4.7kΩ 上拉电阻</li>
<li class="">✅ 共地（所有 GND 连在一起）</li>
<li class="">✅ 继电器接 VIN（5V），传感器接 3V3</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="使用体验">使用体验<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E4%BD%BF%E7%94%A8%E4%BD%93%E9%AA%8C" class="hash-link" aria-label="使用体验的直接链接" title="使用体验的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="首次启动">首次启动<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E9%A6%96%E6%AC%A1%E5%90%AF%E5%8A%A8" class="hash-link" aria-label="首次启动的直接链接" title="首次启动的直接链接" translate="no">​</a></h3>
<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">=== Lobster Monitor System ===</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">WiFi Config AP: Lobster_Config</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Config URL: http://192.168.4.1</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Waiting for configuration...</span><br></span></code></pre></div></div>
<ol>
<li class="">连接 "Lobster_Config" 热点</li>
<li class="">浏览器访问 192.168.4.1</li>
<li class="">输入家庭 WiFi 密码</li>
<li class="">保存并重启</li>
</ol>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="正常运行">正常运行<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E6%AD%A3%E5%B8%B8%E8%BF%90%E8%A1%8C" class="hash-link" aria-label="正常运行的直接链接" title="正常运行的直接链接" translate="no">​</a></h3>
<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">Connecting to WiFi...</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Connected! IP: 192.168.31.45</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Starting HTTP server...</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">OLED initialized</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">Sensors ready</span><br></span></code></pre></div></div>
<p>访问 Web 界面 <code>http://192.168.31.45</code>：</p>
<ul>
<li class="">📊 实时数据图表</li>
<li class="">🎛️ 手动控制水泵</li>
<li class="">⚙️ 修改阈值设置</li>
<li class="">📱 手机完美适配</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="遇到的坑">遇到的坑<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E9%81%87%E5%88%B0%E7%9A%84%E5%9D%91" class="hash-link" aria-label="遇到的坑的直接链接" title="遇到的坑的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="坑-1ds18b20-总是返回--127c">坑 1：DS18B20 总是返回 -127°C<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%9D%91-1ds18b20-%E6%80%BB%E6%98%AF%E8%BF%94%E5%9B%9E--127c" class="hash-link" aria-label="坑 1：DS18B20 总是返回 -127°C的直接链接" title="坑 1：DS18B20 总是返回 -127°C的直接链接" translate="no">​</a></h3>
<p><strong>现象：</strong> 水温传感器读取失败</p>
<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">我：DS18B20 总是返回 -127°C，这是我的接线代码，请帮我看看</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">opencode：看到问题了。DS18B20 需要 4.7kΩ 上拉电阻连接到 3V3，</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">1. 确认 DAT 引脚连接到 GPIO 4</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">2. 确认 VCC 接 3V3（不是 5V）</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">3. 确认共地</span><br></span></code></pre></div></div>
<p><strong>结果：</strong> 加上拉电阻后立即正常。</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="坑-2web-界面刷新很慢">坑 2：Web 界面刷新很慢<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%9D%91-2web-%E7%95%8C%E9%9D%A2%E5%88%B7%E6%96%B0%E5%BE%88%E6%85%A2" class="hash-link" aria-label="坑 2：Web 界面刷新很慢的直接链接" title="坑 2：Web 界面刷新很慢的直接链接" translate="no">​</a></h3>
<p><strong>现象：</strong> 数据更新需要手动刷新页面</p>
<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">我：Web 界面数据刷新太慢，改用 WebSocket 实时推送</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">opencode：好的，我来添加 WebSocket 服务器端和客户端代码，</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">实现实时数据推送，无需手动刷新。</span><br></span></code></pre></div></div>
<p><strong>结果：</strong> 数据实时更新，体验丝滑。</p>
<hr>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="坑-3wifi-经常断线">坑 3：WiFi 经常断线<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%9D%91-3wifi-%E7%BB%8F%E5%B8%B8%E6%96%AD%E7%BA%BF" class="hash-link" aria-label="坑 3：WiFi 经常断线的直接链接" title="坑 3：WiFi 经常断线的直接链接" translate="no">​</a></h3>
<p><strong>现象：</strong> 运行一段时间后 Web 界面无法访问</p>
<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">我：WiFi 连接不稳定，请添加断线重连机制</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">opencode：好的，我来添加自动重连逻辑，定期检查连接状态，</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">断线后自动重新连接。</span><br></span></code></pre></div></div>
<p><strong>结果：</strong> 稳定运行 24 小时无断线。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="对话技巧总结">对话技巧总结<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%AF%B9%E8%AF%9D%E6%8A%80%E5%B7%A7%E6%80%BB%E7%BB%93" class="hash-link" aria-label="对话技巧总结的直接链接" title="对话技巧总结的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="-正确做法">✅ 正确做法<a href="https://szqifeng.github.io/blog/esp32-opencode-development#-%E6%AD%A3%E7%A1%AE%E5%81%9A%E6%B3%95" class="hash-link" aria-label="✅ 正确做法的直接链接" title="✅ 正确做法的直接链接" translate="no">​</a></h3>
<p><strong>1. 逐步添加功能</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">❌ 一次性描述所有需求</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">✅ 先生成基础框架，再逐步添加功能</span><br></span></code></pre></div></div>
<p><strong>2. 描述问题时提供上下文</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">❌ 代码报错了，帮我看看</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">✅ 编译时报错 "undefined reference to 'setup()'"，这是 main.cpp</span><br></span></code></pre></div></div>
<p><strong>3. 明确告知技术栈</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">✅ 使用 PlatformIO + ESP32 + Arduino 框架</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">✅ 使用 AsyncWebServer 库（更好的并发性能）</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="-避免踩坑">❌ 避免踩坑<a href="https://szqifeng.github.io/blog/esp32-opencode-development#-%E9%81%BF%E5%85%8D%E8%B8%A9%E5%9D%91" class="hash-link" aria-label="❌ 避免踩坑的直接链接" title="❌ 避免踩坑的直接链接" translate="no">​</a></h3>
<p><strong>1. 不要一次性描述所有需求</strong></p>
<ul>
<li class="">AI 可能遗漏细节</li>
<li class="">代码生成质量下降</li>
<li class="">后续修改成本高</li>
</ul>
<p><strong>2. 不要忽略错误信息</strong></p>
<ul>
<li class="">具体的错误信息能帮助 AI 快速定位</li>
<li class="">提供代码片段让 AI 上下文更清晰</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="最终成果">最终成果<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E6%9C%80%E7%BB%88%E6%88%90%E6%9E%9C" class="hash-link" aria-label="最终成果的直接链接" title="最终成果的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="功能清单">功能清单<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E5%8A%9F%E8%83%BD%E6%B8%85%E5%8D%95" class="hash-link" aria-label="功能清单的直接链接" title="功能清单的直接链接" translate="no">​</a></h3>
<ul>
<li class="">✅ OLED 屏幕显示水温、气温、湿度</li>
<li class="">✅ Web 界面实时数据更新</li>
<li class="">✅ 水温 &gt; 28°C 自动开启水泵</li>
<li class="">✅ 水温 &lt; 24°C 自动关闭水泵</li>
<li class="">✅ 手动控制水泵</li>
<li class="">✅ 历史数据图表</li>
<li class="">✅ 阈值设置页面</li>
<li class="">✅ WiFi 自动重连</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="代码质量">代码质量<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E4%BB%A3%E7%A0%81%E8%B4%A8%E9%87%8F" class="hash-link" aria-label="代码质量的直接链接" title="代码质量的直接链接" translate="no">​</a></h3>
<ul>
<li class="">✅ 错误处理完善（传感器读取失败时提示）</li>
<li class="">✅ 内存使用合理（FreeHeap &gt; 50KB）</li>
<li class="">✅ SPIFFS 文件系统正常读写</li>
<li class="">✅ 代码注释清晰，易于二次修改</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="效率对比">效率对比<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E6%95%88%E7%8E%87%E5%AF%B9%E6%AF%94" class="hash-link" aria-label="效率对比的直接链接" title="效率对比的直接链接" translate="no">​</a></h2>
<table><thead><tr><th>方面</th><th>传统开发</th><th>使用 opencode</th><th>提升</th></tr></thead><tbody><tr><td>代码编写</td><td>4-6 小时</td><td>30 分钟</td><td><strong>8-12倍</strong></td></tr><tr><td>查阅资料</td><td>2-3 小时</td><td>0 分钟</td><td><strong>无限</strong></td></tr><tr><td>调试排错</td><td>1-2 小时</td><td>30 分钟</td><td><strong>2-4倍</strong></td></tr><tr><td><strong>总时间</strong></td><td><strong>7-11 小时</strong></td><td><strong>2 小时</strong></td><td><strong>3.5-5.5倍</strong></td></tr></tbody></table>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="总结">总结<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E6%80%BB%E7%BB%93" class="hash-link" aria-label="总结的直接链接" title="总结的直接链接" translate="no">​</a></h2>
<p>通过 opencode，我体验到了<strong>对话式编程</strong>的强大之处：</p>
<ol>
<li class="">🚀 <strong>极速开发</strong>：2 小时完成传统开发 7-11 小时的工作量</li>
<li class="">💬 <strong>自然交互</strong>：用中文描述需求，无需懂复杂语法</li>
<li class="">🔄 <strong>渐进迭代</strong>：分步添加功能，边写边测试</li>
<li class="">🐛 <strong>高效调试</strong>：遇到问题直接描述，AI 立即给出解决方案</li>
<li class="">📚 <strong>学习赋能</strong>：通过生成的代码理解开发流程</li>
</ol>
<p><strong>最重要的是：我把节省下来的时间，花在更多有趣的 DIY 项目上！</strong></p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="下一步计划">下一步计划<a href="https://szqifeng.github.io/blog/esp32-opencode-development#%E4%B8%8B%E4%B8%80%E6%AD%A5%E8%AE%A1%E5%88%92" class="hash-link" aria-label="下一步计划的直接链接" title="下一步计划的直接链接" translate="no">​</a></h2>
<p>基于这次成功经验，我打算：</p>
<ul>
<li class="">📸 添加摄像头监控（用 opencode 生成图像采集代码）</li>
<li class="">📈 数据上传到云端（用 opencode 集成 MQTT）</li>
<li class="">🤖 语音控制水泵（用 opencode 集成语音识别）</li>
<li class="">📱 开发移动 App（用 opencode 生成 Flutter 代码）</li>
</ul>
<hr>
<p><strong>如果你也想试试，不妨从简单的温湿度监测开始，让 opencode 帮你快速实现！</strong> 🦞</p>]]></content:encoded>
            <category>ESP32</category>
            <category>opencode</category>
            <category>物联网</category>
            <category>智能家居</category>
            <category>代码生成</category>
            <category>AI编程</category>
        </item>
        <item>
            <title><![CDATA[用「道法术器」理解 AI / LLM / OpenClaw]]></title>
            <link>https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding</link>
            <guid>https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding</guid>
            <pubDate>Tue, 10 Mar 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[用「道法术器」四个层级理解 AI：原理（道）→ 方法（法）→ 技巧（术）→ 工具（器），循序渐进掌握 AI 编程能力。]]></description>
            <content:encoded><![CDATA[<p>可以用四个问题理解：</p>
<p><strong>为什么龙虾能帮我们做事 → 如何让龙虾做事 → 怎么让龙虾做好事情 → 有哪些好用的工具</strong></p>
<p>对应：</p>
<p><strong>道（原理） → 法（方法） → 术（技巧） → 器（工具）</strong></p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心笔记">核心笔记<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E6%A0%B8%E5%BF%83%E7%AC%94%E8%AE%B0" class="hash-link" aria-label="核心笔记的直接链接" title="核心笔记的直接链接" translate="no">​</a></h2>
<ul>
<li class=""><strong>道（原理）</strong>：AI 能思考、写代码、用工具的三种能力</li>
<li class=""><strong>法（方法）</strong>：给 AI 清晰的任务流程和规则</li>
<li class=""><strong>术（技巧）</strong>：用清晰指令和拆分任务与 AI 沟通</li>
<li class=""><strong>器（工具）</strong>：AI 工具、技术环境、工具系统</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="学完你能做什么">学完你能做什么<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E5%AD%A6%E5%AE%8C%E4%BD%A0%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88" class="hash-link" aria-label="学完你能做什么的直接链接" title="学完你能做什么的直接链接" translate="no">​</a></h2>
<ul>
<li class="">理解 AI 为什么能帮你做事</li>
<li class="">学会如何让 AI 执行复杂任务</li>
<li class="">掌握与 AI 高效沟通的技巧</li>
<li class="">选择合适的工具组合提升效率</li>
</ul>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一道原理为什么龙虾能帮我们做事">一、道（原理）：为什么龙虾能帮我们做事<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E4%B8%80%E9%81%93%E5%8E%9F%E7%90%86%E4%B8%BA%E4%BB%80%E4%B9%88%E9%BE%99%E8%99%BE%E8%83%BD%E5%B8%AE%E6%88%91%E4%BB%AC%E5%81%9A%E4%BA%8B" class="hash-link" aria-label="一、道（原理）：为什么龙虾能帮我们做事的直接链接" title="一、道（原理）：为什么龙虾能帮我们做事的直接链接" translate="no">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/ai-principle-three-abilities.png" alt="道（原理）- AI能思考、写代码、用工具的三种能力" class="img_ev3q"></p>
<p>"道"是底层原理。</p>
<p>龙虾之所以能完成任务，是因为它有三种能力：</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="1-会写代码">1. 会写代码<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#1-%E4%BC%9A%E5%86%99%E4%BB%A3%E7%A0%81" class="hash-link" aria-label="1. 会写代码的直接链接" title="1. 会写代码的直接链接" translate="no">​</a></h3>
<p>龙虾学过大量代码，可以：</p>
<ul>
<li class="">写程序</li>
<li class="">修改程序</li>
<li class="">生成脚本</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="2-会思考">2. 会思考<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#2-%E4%BC%9A%E6%80%9D%E8%80%83" class="hash-link" aria-label="2. 会思考的直接链接" title="2. 会思考的直接链接" translate="no">​</a></h3>
<p>龙虾可以：</p>
<ul>
<li class="">分析问题</li>
<li class="">规划步骤</li>
<li class="">按步骤完成任务</li>
</ul>
<p>例如：</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">读取数据 → 分析 → 生成报告</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="3-会用工具">3. 会用工具<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#3-%E4%BC%9A%E7%94%A8%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="3. 会用工具的直接链接" title="3. 会用工具的直接链接" translate="no">​</a></h3>
<p>龙虾可以调用工具：</p>
<ul>
<li class="">读写文件</li>
<li class="">上网查询</li>
<li class="">调用 API</li>
<li class="">运行代码</li>
</ul>
<p>所以龙虾不只是聊天工具，而是：</p>
<p><strong>能思考、写代码、用工具的数字助手。</strong></p>
<p>这就是 <strong>道（原理）</strong>。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="二法方法如何让龙虾做事">二、法（方法）：如何让龙虾做事<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E4%BA%8C%E6%B3%95%E6%96%B9%E6%B3%95%E5%A6%82%E4%BD%95%E8%AE%A9%E9%BE%99%E8%99%BE%E5%81%9A%E4%BA%8B" class="hash-link" aria-label="二、法（方法）：如何让龙虾做事的直接链接" title="二、法（方法）：如何让龙虾做事的直接链接" translate="no">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/ai-methods-task-flow-rules.png" alt="法（方法）- 给AI清晰的任务流程和规则" class="img_ev3q"></p>
<p>"法"是 <strong>方法和做法</strong>。</p>
<p>简单说就是：</p>
<p><strong>给龙虾设计一套做事的方法。</strong></p>
<p>例如：</p>
<p>分析 CSV：</p>
<ol>
<li class="">读取数据</li>
<li class="">统计指标</li>
<li class="">生成图表</li>
<li class="">输出总结</li>
</ol>
<p>这就是一套 <strong>完成任务的方法</strong>。</p>
<p>在 AI 里，本质就是：</p>
<p><strong>把任务拆成一个清晰的工作流程。</strong></p>
<p>这就是 <strong>法（方法）</strong>。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="三术技巧怎么让龙虾做好事情">三、术（技巧）：怎么让龙虾做好事情<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E4%B8%89%E6%9C%AF%E6%8A%80%E5%B7%A7%E6%80%8E%E4%B9%88%E8%AE%A9%E9%BE%99%E8%99%BE%E5%81%9A%E5%A5%BD%E4%BA%8B%E6%83%85" class="hash-link" aria-label="三、术（技巧）：怎么让龙虾做好事情的直接链接" title="三、术（技巧）：怎么让龙虾做好事情的直接链接" translate="no">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/ai-techniques-clear-instructions.png" alt="术（技巧）- 用清晰指令和拆分任务与AI沟通" class="img_ev3q"></p>
<p>"术"是 <strong>使用技巧</strong>。</p>
<p>例如：</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="写清晰的指令">写清晰的指令<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E5%86%99%E6%B8%85%E6%99%B0%E7%9A%84%E6%8C%87%E4%BB%A4" class="hash-link" aria-label="写清晰的指令的直接链接" title="写清晰的指令的直接链接" translate="no">​</a></h3>
<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">分析数据</span><br></span></code></pre></div></div>
<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">读取 data.csv</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><br></span><span class="token-line" style="color:#393A34"><span class="token plain">输出总结</span><br></span></code></pre></div></div>
<p>或者：</p>
<p><strong>把复杂任务拆成步骤。</strong></p>
<p>同样一只龙虾，有的人用得很好，有的人用得很乱，差别往往就在这些 <strong>使用技巧</strong>。</p>
<p>这就是 <strong>术（技巧）</strong>。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="四器工具有哪些好用的工具">四、器（工具）：有哪些好用的工具<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E5%9B%9B%E5%99%A8%E5%B7%A5%E5%85%B7%E6%9C%89%E5%93%AA%E4%BA%9B%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="四、器（工具）：有哪些好用的工具的直接链接" title="四、器（工具）：有哪些好用的工具的直接链接" translate="no">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/ai-tools-technology-environment.png" alt="器（工具）- AI工具、技术环境、工具系统" class="img_ev3q"></p>
<p>"器"就是 <strong>工具本身</strong>。</p>
<p>例如：</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="ai-工具">AI 工具<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#ai-%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="AI 工具的直接链接" title="AI 工具的直接链接" translate="no">​</a></h3>
<ul>
<li class="">ChatGPT</li>
<li class="">Claude</li>
<li class="">OpenClaw</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="技术环境">技术环境<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E6%8A%80%E6%9C%AF%E7%8E%AF%E5%A2%83" class="hash-link" aria-label="技术环境的直接链接" title="技术环境的直接链接" translate="no">​</a></h3>
<ul>
<li class="">Python</li>
<li class="">Node.js</li>
<li class="">Docker</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="工具系统">工具系统<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E5%B7%A5%E5%85%B7%E7%B3%BB%E7%BB%9F" class="hash-link" aria-label="工具系统的直接链接" title="工具系统的直接链接" translate="no">​</a></h3>
<ul>
<li class="">文件系统</li>
<li class="">API</li>
<li class="">搜索引擎</li>
<li class="">自动脚本</li>
</ul>
<p>这些工具，就是龙虾干活用的 <strong>钳子和爪子</strong>。</p>
<p>这就是 <strong>器（工具）</strong>。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一句话总结">一句话总结<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E4%B8%80%E5%8F%A5%E8%AF%9D%E6%80%BB%E7%BB%93" class="hash-link" aria-label="一句话总结的直接链接" title="一句话总结的直接链接" translate="no">​</a></h2>
<table><thead><tr><th>层级</th><th>含义</th><th>AI里的意思</th></tr></thead><tbody><tr><td>道</td><td>原理</td><td>龙虾为什么能做事</td></tr><tr><td>法</td><td>方法</td><td>如何设计龙虾做事的方法</td></tr><tr><td>术</td><td>技巧</td><td>如何更好地使用龙虾</td></tr><tr><td>器</td><td>工具</td><td>使用哪些工具</td></tr></tbody></table>
<p>整体逻辑：</p>
<p><strong>龙虾有能力（道）
→ 给龙虾方法（法）
→ 用技巧沟通（术）
→ 借助工具完成（器）</strong></p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="高手成长路径">高手成长路径<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E9%AB%98%E6%89%8B%E6%88%90%E9%95%BF%E8%B7%AF%E5%BE%84" class="hash-link" aria-label="高手成长路径的直接链接" title="高手成长路径的直接链接" translate="no">​</a></h2>
<p><strong>善器 → 熟术 → 会法 → 懂道</strong></p>
<p>先会用工具，再掌握技巧，然后理解方法，最后理解原理。</p>
<hr>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="本课小结">本课小结<a href="https://szqifeng.github.io/blog/dao-fa-shu-qi-ai-understanding#%E6%9C%AC%E8%AF%BE%E5%B0%8F%E7%BB%93" class="hash-link" aria-label="本课小结的直接链接" title="本课小结的直接链接" translate="no">​</a></h2>
<p>用「道法术器」的框架理解 AI，可以帮助你：</p>
<ol>
<li class=""><strong>道（原理）</strong>：理解 AI 为什么能帮你做事（会思考、写代码、用工具）</li>
<li class=""><strong>法（方法）</strong>：学会如何给 AI 安排任务流程</li>
<li class=""><strong>术（技巧）</strong>：掌握与 AI 高效沟通的技巧（清晰指令、拆分任务）</li>
<li class=""><strong>器（工具）</strong>：选择合适的工具组合</li>
</ol>
<p>从善器开始，逐步成长到懂道，成为 AI 编程高手！</p>]]></content:encoded>
            <category>AI</category>
            <category>LLM</category>
            <category>OpenClaw</category>
            <category>道法术器</category>
            <category>编程思维</category>
        </item>
        <item>
            <title><![CDATA[从看不起到追不上：理性看待 OpenCode 和 Agent 时代]]></title>
            <link>https://szqifeng.github.io/blog/ai-agent-future-thinking</link>
            <guid>https://szqifeng.github.io/blog/ai-agent-future-thinking</guid>
            <pubDate>Fri, 06 Mar 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[对立观点]]></description>
            <content:encoded><![CDATA[<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/421772796618_.pic_hd.jpg" alt="对立观点" class="img_ev3q"></p>
<p>最近 OpenCode、OpenCloud、低代码、大模型 Agent 这些技术在网上争议特别大。</p>
<p>我发现一个特别有意思的现象：</p>
<p>不懂技术的业务同学、非技术人员，觉得这些东西特别牛，恨不得马上上手，说不学就要被时代淘汰；</p>
<p>但很多一线程序员、技术人，反而觉得这就是伪命题，说有这功夫我直接手写代码不就行了。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一句话总结">一句话总结<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E4%B8%80%E5%8F%A5%E8%AF%9D%E6%80%BB%E7%BB%93" class="hash-link" aria-label="一句话总结的直接链接" title="一句话总结的直接链接" translate="no">​</a></h2>
<p>既不要过度神化，也不要轻易否定，保持中立，理性看待。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心笔记">核心笔记<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E6%A0%B8%E5%BF%83%E7%AC%94%E8%AE%B0" class="hash-link" aria-label="核心笔记的直接链接" title="核心笔记的直接链接" translate="no">​</a></h2>
<ul>
<li class="">所有新技术的发展，都逃不开"看不起 → 看不清 → 追不上"的规律</li>
<li class="">算法最终属于全人类，工程能力才是拉开差距的核心</li>
<li class="">Agent 不是简单的文字生成，而是复杂的系统工程</li>
<li class="">90% 的程序员依然靠 CRUD 吃饭，这是最真实的行业现状</li>
<li class="">技术发展永远比想象得更快</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="从火热到回归再到新生">从火热到回归，再到新生<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E4%BB%8E%E7%81%AB%E7%83%AD%E5%88%B0%E5%9B%9E%E5%BD%92%E5%86%8D%E5%88%B0%E6%96%B0%E7%94%9F" class="hash-link" aria-label="从火热到回归，再到新生的直接链接" title="从火热到回归，再到新生的直接链接" translate="no">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/401772796610_.pic.jpg" alt="代码工程" class="img_ev3q"></p>
<p>最开始大模型刚出来的时候，大家一阵火热，热度很快又下去了。</p>
<p>直到 OpenCode、OpenCloud 这些工具出现，才重新回到大众视野。</p>
<p>为什么？因为它真正降低了门槛，让不会写代码的普通人，也能用上大模型、用上 Agent。</p>
<p>这个世界本来就是，不会编程的人，远远多于程序员。</p>
<p>所以这波浪潮，本质上是技术下沉，服务大多数人。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="算法开源工程为王">算法开源，工程为王<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E7%AE%97%E6%B3%95%E5%BC%80%E6%BA%90%E5%B7%A5%E7%A8%8B%E4%B8%BA%E7%8E%8B" class="hash-link" aria-label="算法开源，工程为王的直接链接" title="算法开源，工程为王的直接链接" translate="no">​</a></h2>
<p>这里有一个很重要的观点：</p>
<p>算法，最终是属于全人类的。</p>
<p>未来大语言模型一定会越来越开源、越来越平民化，大家能用的模型能力差距会越来越小。</p>
<p>到最后，真正拉开差距、决定胜负的核心，就是工程能力，就是架构设计。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="agent-的复杂程度远超想象">Agent 的复杂程度，远超想象<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#agent-%E7%9A%84%E5%A4%8D%E6%9D%82%E7%A8%8B%E5%BA%A6%E8%BF%9C%E8%B6%85%E6%83%B3%E8%B1%A1" class="hash-link" aria-label="Agent 的复杂程度，远超想象的直接链接" title="Agent 的复杂程度，远超想象的直接链接" translate="no">​</a></h2>
<p><img decoding="async" loading="lazy" src="https://opencodeshare.oss-cn-shenzhen.aliyuncs.com/411772796614_.pic.jpg" alt="AI Agent 体系" class="img_ev3q"></p>
<p>很多程序员一开始也不屑一顾，觉得 Agent 不就是会聊天、词语接龙吗？</p>
<p>但我真正深入研究之后发现，比想象中难太多了。</p>
<p>它不是简单的文字生成，而是把大模型的推理能力、工具调用、记忆机制、SOP 流程、各种设计模式、回调机制全部整合在一起的复杂工程。</p>
<p>你去看现在主流的 OpenCode 源码就会发现，很多普通程序员已经看不懂了，跟我们平时写的 CRUD 完全不是一个层次。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="90-程序员的现实">90% 程序员的现实<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#90-%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E7%8E%B0%E5%AE%9E" class="hash-link" aria-label="90% 程序员的现实的直接链接" title="90% 程序员的现实的直接链接" translate="no">​</a></h2>
<p>其实大家想想，过去很多人看不起 CRUD，不也是这样吗？</p>
<p>但我们必须清醒：</p>
<p>哪怕现在技术卷成这样，行业里 90% 的程序员，依然是靠写业务代码、CRUD 吃饭。</p>
<p>这就是最真实的行业现状。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="技术发展的必然趋势">技术发展的必然趋势<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E7%9A%84%E5%BF%85%E7%84%B6%E8%B6%8B%E5%8A%BF" class="hash-link" aria-label="技术发展的必然趋势的直接链接" title="技术发展的必然趋势的直接链接" translate="no">​</a></h2>
<p>未来，随着大模型和 Agent 真正走向工程化、规模化，系统会越来越复杂，代码量会越来越庞大。</p>
<p>人的精力、脑容量、学习速度都是有限的。</p>
<p>等到全球几十亿人、成千上万的工程一起迭代的时候，你可能连系统的全貌都再也看不懂了。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="给你的建议">给你的建议<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E7%BB%99%E4%BD%A0%E7%9A%84%E5%BB%BA%E8%AE%AE" class="hash-link" aria-label="给你的建议的直接链接" title="给你的建议的直接链接" translate="no">​</a></h2>
<p>所以我给大家的建议非常实在：</p>
<p>不盲目追捧，也不傲慢抵触。</p>
<p>踏踏实实跟着 Agent、跟着新技术的方向走，保持学习，保持关注，千万别让自己真正掉队。</p>
<p>因为技术的发展，永远比我们想象得更快、更超出预期。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一句话总结-1">一句话总结<a href="https://szqifeng.github.io/blog/ai-agent-future-thinking#%E4%B8%80%E5%8F%A5%E8%AF%9D%E6%80%BB%E7%BB%93-1" class="hash-link" aria-label="一句话总结的直接链接" title="一句话总结的直接链接" translate="no">​</a></h2>
<p>保持学习，理性看待，别让自己掉队。</p>
<hr>
<p><em>本文观点仅供参考，欢迎在评论区交流讨论。</em></p>]]></content:encoded>
            <category>AI Agent</category>
            <category>技术思考</category>
            <category>行业趋势</category>
        </item>
        <item>
            <title><![CDATA[AI 编程的 10 个实用技巧]]></title>
            <link>https://szqifeng.github.io/blog/ai-programming-tips</link>
            <guid>https://szqifeng.github.io/blog/ai-programming-tips</guid>
            <pubDate>Fri, 06 Mar 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[分享 10 个实用的 AI 编程技巧，帮助你更高效地使用 AI 工具。]]></description>
            <content:encoded><![CDATA[<p>分享 10 个实用的 AI 编程技巧，帮助你更高效地使用 AI 工具。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一句话总结">一句话总结<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E4%B8%80%E5%8F%A5%E8%AF%9D%E6%80%BB%E7%BB%93" class="hash-link" aria-label="一句话总结的直接链接" title="一句话总结的直接链接" translate="no">​</a></h2>
<p>掌握这些技巧，让 AI 编程效率提升 10 倍。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心笔记">核心笔记<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%A0%B8%E5%BF%83%E7%AC%94%E8%AE%B0" class="hash-link" aria-label="核心笔记的直接链接" title="核心笔记的直接链接" translate="no">​</a></h2>
<ul>
<li class="">明确的需求描述是关键</li>
<li class="">分步骤处理复杂任务</li>
<li class="">始终验证 AI 生成的代码</li>
<li class="">建立自己的代码模板库</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="学完你能做什么">学完你能做什么<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E5%AD%A6%E5%AE%8C%E4%BD%A0%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88" class="hash-link" aria-label="学完你能做什么的直接链接" title="学完你能做什么的直接链接" translate="no">​</a></h2>
<p>应用这些技巧后，你将能够：</p>
<ul>
<li class="">更准确地描述编程需求</li>
<li class="">获得更高质量的 AI 代码</li>
<li class="">减少调试和修复的时间</li>
<li class="">建立高效的开发工作流</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="你现在的困境">你现在的困境<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E4%BD%A0%E7%8E%B0%E5%9C%A8%E7%9A%84%E5%9B%B0%E5%A2%83" class="hash-link" aria-label="你现在的困境的直接链接" title="你现在的困境的直接链接" translate="no">​</a></h2>
<ul>
<li class="">AI 给的代码经常跑不通</li>
<li class="">不太清楚如何跟 AI 描述需求</li>
<li class="">浪费时间在不断追问和修改</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="什么时候用这一招">什么时候用这一招<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8%E8%BF%99%E4%B8%80%E6%8B%9B" class="hash-link" aria-label="什么时候用这一招的直接链接" title="什么时候用这一招的直接链接" translate="no">​</a></h2>
<ul>
<li class="">使用 AI 辅助开发时</li>
<li class="">需要快速原型开发时</li>
<li class="">遇到陌生技术领域时</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心思路">核心思路<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%A0%B8%E5%BF%83%E6%80%9D%E8%B7%AF" class="hash-link" aria-label="核心思路的直接链接" title="核心思路的直接链接" translate="no">​</a></h2>
<p>AI 编程的本质是"人机协作"，你需要做的是：</p>
<ol>
<li class="">清晰地表达意图</li>
<li class="">合理地拆解任务</li>
<li class="">严格地验证结果</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="跟我做">跟我做<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E8%B7%9F%E6%88%91%E5%81%9A" class="hash-link" aria-label="跟我做的直接链接" title="跟我做的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="技巧-1用结构化方式描述需求">技巧 1：用结构化方式描述需求<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%8A%80%E5%B7%A7-1%E7%94%A8%E7%BB%93%E6%9E%84%E5%8C%96%E6%96%B9%E5%BC%8F%E6%8F%8F%E8%BF%B0%E9%9C%80%E6%B1%82" class="hash-link" aria-label="技巧 1：用结构化方式描述需求的直接链接" title="技巧 1：用结构化方式描述需求的直接链接" translate="no">​</a></h3>
<p><strong>❌ 不好的描述：</strong>
"写个登录功能"</p>
<p><strong>✅ 好的描述：</strong>
"帮我写一个登录功能，要求：</p>
<ul>
<li class="">支持邮箱和手机号两种方式</li>
<li class="">密码需要加密存储</li>
<li class="">添加表单验证</li>
<li class="">返回 JWT token"</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="技巧-2分步骤处理复杂任务">技巧 2：分步骤处理复杂任务<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%8A%80%E5%B7%A7-2%E5%88%86%E6%AD%A5%E9%AA%A4%E5%A4%84%E7%90%86%E5%A4%8D%E6%9D%82%E4%BB%BB%E5%8A%A1" class="hash-link" aria-label="技巧 2：分步骤处理复杂任务的直接链接" title="技巧 2：分步骤处理复杂任务的直接链接" translate="no">​</a></h3>
<p>一次只做一件事：</p>
<ol>
<li class="">先写接口定义</li>
<li class="">再写数据模型</li>
<li class="">然后写 API 路由</li>
<li class="">最后写前端组件</li>
</ol>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="技巧-3验证-ai-生成的代码">技巧 3：验证 AI 生成的代码<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%8A%80%E5%B7%A7-3%E9%AA%8C%E8%AF%81-ai-%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81" class="hash-link" aria-label="技巧 3：验证 AI 生成的代码的直接链接" title="技巧 3：验证 AI 生成的代码的直接链接" translate="no">​</a></h3>
<p><strong>检查清单：</strong></p>
<ul class="contains-task-list containsTaskList_mC6p">
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->语法是否正确</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->逻辑是否合理</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->是否符合项目规范</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->有无安全风险</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="技巧-4保持代码可读性">技巧 4：保持代码可读性<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%8A%80%E5%B7%A7-4%E4%BF%9D%E6%8C%81%E4%BB%A3%E7%A0%81%E5%8F%AF%E8%AF%BB%E6%80%A7" class="hash-link" aria-label="技巧 4：保持代码可读性的直接链接" title="技巧 4：保持代码可读性的直接链接" translate="no">​</a></h3>
<p><strong>要求 AI：</strong></p>
<ul>
<li class="">使用有意义的变量名</li>
<li class="">添加必要的注释</li>
<li class="">拆分过长的函数</li>
<li class="">遵循一致的代码风格</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="检查点">检查点<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%A3%80%E6%9F%A5%E7%82%B9" class="hash-link" aria-label="检查点的直接链接" title="检查点的直接链接" translate="no">​</a></h2>
<p>✔ 能清晰描述编程需求
✔ 会拆分复杂任务
✔ 知道如何验证 AI 代码
✔ 有自己的代码库</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="踩坑提醒">踩坑提醒<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E8%B8%A9%E5%9D%91%E6%8F%90%E9%86%92" class="hash-link" aria-label="踩坑提醒的直接链接" title="踩坑提醒的直接链接" translate="no">​</a></h2>
<p><strong>问题：</strong> AI 生成的代码有 bug
<strong>原因：</strong> 需求描述不够清晰
<strong>解决：</strong> 提供更多上下文和约束条件</p>
<p><strong>问题：</strong> AI 代码风格不一致
<strong>原因：</strong> 没有明确代码规范
<strong>解决：</strong> 提供代码示例和风格指南</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="本课小结">本课小结<a href="https://szqifeng.github.io/blog/ai-programming-tips#%E6%9C%AC%E8%AF%BE%E5%B0%8F%E7%BB%93" class="hash-link" aria-label="本课小结的直接链接" title="本课小结的直接链接" translate="no">​</a></h2>
<p>AI 是你的编程伙伴，不是替代者。掌握正确的协作方式，才能发挥最大价值。</p>]]></content:encoded>
            <category>AI 编程</category>
            <category>技巧</category>
            <category>效率提升</category>
        </item>
        <item>
            <title><![CDATA[2 小时从零部署个人网站到 GitHub Pages]]></title>
            <link>https://szqifeng.github.io/blog/deploy-website-2hours</link>
            <guid>https://szqifeng.github.io/blog/deploy-website-2hours</guid>
            <pubDate>Fri, 06 Mar 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[从零开始，在 2 小时内部署你的个人网站到 GitHub Pages，完全免费！]]></description>
            <content:encoded><![CDATA[<p>从零开始，在 2 小时内部署你的个人网站到 GitHub Pages，完全免费！</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一句话总结">一句话总结<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E4%B8%80%E5%8F%A5%E8%AF%9D%E6%80%BB%E7%BB%93" class="hash-link" aria-label="一句话总结的直接链接" title="一句话总结的直接链接" translate="no">​</a></h2>
<p>跟着我一步步操作，2 小时内搞定个人网站部署，适合完全小白的你。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心笔记">核心笔记<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%A0%B8%E5%BF%83%E7%AC%94%E8%AE%B0" class="hash-link" aria-label="核心笔记的直接链接" title="核心笔记的直接链接" translate="no">​</a></h2>
<ul>
<li class="">注册 GitHub 账户</li>
<li class="">创建 GitHub Pages 仓库</li>
<li class="">使用 OpenCode 创建项目</li>
<li class="">配置 glm-4.7 模型</li>
<li class="">编写和发布页面</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="学完你能做什么">学完你能做什么<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E5%AD%A6%E5%AE%8C%E4%BD%A0%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88" class="hash-link" aria-label="学完你能做什么的直接链接" title="学完你能做什么的直接链接" translate="no">​</a></h2>
<p>完成本教程后，你将能够：</p>
<ul>
<li class="">拥有属于自己的个人网站</li>
<li class="">使用 AI 辅助编程</li>
<li class="">掌握 GitHub Pages 部署流程</li>
<li class="">学会自然语言编程</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="你现在的困境">你现在的困境<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E4%BD%A0%E7%8E%B0%E5%9C%A8%E7%9A%84%E5%9B%B0%E5%A2%83" class="hash-link" aria-label="你现在的困境的直接链接" title="你现在的困境的直接链接" translate="no">​</a></h2>
<ul>
<li class="">没有编程基础，不知道如何开始</li>
<li class="">想要个人网站但不知如何部署</li>
<li class="">看到各种教程无从下手</li>
<li class="">害怕操作复杂，怕出错</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="什么时候用这一招">什么时候用这一招<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8%E8%BF%99%E4%B8%80%E6%8B%9B" class="hash-link" aria-label="什么时候用这一招的直接链接" title="什么时候用这一招的直接链接" translate="no">​</a></h2>
<ul>
<li class="">想要搭建个人博客或作品集</li>
<li class="">需要学习网站部署流程</li>
<li class="">想要实践 AI 编程</li>
<li class="">完全零基础，需要详细教程</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心思路">核心思路<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%A0%B8%E5%BF%83%E6%80%9D%E8%B7%AF" class="hash-link" aria-label="核心思路的直接链接" title="核心思路的直接链接" translate="no">​</a></h2>
<p>GitHub Pages 提供免费的静态网站托管服务，我们只需要：</p>
<ol>
<li class="">注册 GitHub 账户</li>
<li class="">创建一个仓库</li>
<li class="">使用 OpenCode 生成网站代码</li>
<li class="">推送代码到 GitHub，自动部署</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="跟我做">跟我做<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E8%B7%9F%E6%88%91%E5%81%9A" class="hash-link" aria-label="跟我做的直接链接" title="跟我做的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-1注册-github-账户5-分钟">步骤 1：注册 GitHub 账户（5 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-1%E6%B3%A8%E5%86%8C-github-%E8%B4%A6%E6%88%B75-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 1：注册 GitHub 账户（5 分钟）的直接链接" title="步骤 1：注册 GitHub 账户（5 分钟）的直接链接" translate="no">​</a></h3>
<ol>
<li class="">访问 <a href="https://github.com/" target="_blank" rel="noopener noreferrer" class="">https://github.com</a></li>
<li class="">点击右上角的"Sign up"按钮</li>
<li class="">选择注册方式：<!-- -->
<ul>
<li class="">邮箱注册</li>
<li class="">Google 账号登录</li>
</ul>
</li>
<li class="">填写用户名（这个会出现在你的网站地址中）</li>
<li class="">完成邮箱验证</li>
</ol>
<p><strong>注意：</strong> 记住你的用户名，后续会用到！</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-2安装和配置-opencode20-分钟">步骤 2：安装和配置 OpenCode（20 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-2%E5%AE%89%E8%A3%85%E5%92%8C%E9%85%8D%E7%BD%AE-opencode20-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 2：安装和配置 OpenCode（20 分钟）的直接链接" title="步骤 2：安装和配置 OpenCode（20 分钟）的直接链接" translate="no">​</a></h3>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="21-下载-opencode">2.1 下载 OpenCode<a href="https://szqifeng.github.io/blog/deploy-website-2hours#21-%E4%B8%8B%E8%BD%BD-opencode" class="hash-link" aria-label="2.1 下载 OpenCode的直接链接" title="2.1 下载 OpenCode的直接链接" translate="no">​</a></h4>
<p>访问 OpenCode 官网下载并安装最新版本。</p>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="22-配置-glm-47-模型">2.2 配置 glm-4.7 模型<a href="https://szqifeng.github.io/blog/deploy-website-2hours#22-%E9%85%8D%E7%BD%AE-glm-47-%E6%A8%A1%E5%9E%8B" class="hash-link" aria-label="2.2 配置 glm-4.7 模型的直接链接" title="2.2 配置 glm-4.7 模型的直接链接" translate="no">​</a></h4>
<ol>
<li class="">打开 OpenCode</li>
<li class="">进入设置 → 模型配置</li>
<li class="">添加 glm-4.7 模型：<!-- -->
<ul>
<li class="">模型名称：glm-4.7</li>
<li class="">API 地址：根据实际情况填写</li>
<li class="">模型版本：最新稳定版</li>
</ul>
</li>
</ol>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="23-先看-start-教程">2.3 先看 Start 教程<a href="https://szqifeng.github.io/blog/deploy-website-2hours#23-%E5%85%88%E7%9C%8B-start-%E6%95%99%E7%A8%8B" class="hash-link" aria-label="2.3 先看 Start 教程的直接链接" title="2.3 先看 Start 教程的直接链接" translate="no">​</a></h4>
<p>在 OpenCode 中查看 Start 教程，熟悉基本操作：</p>
<ul>
<li class="">如何创建新项目</li>
<li class="">如何使用自然语言编写代码</li>
<li class="">如何预览和测试代码</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-3创建个人网站项目30-分钟">步骤 3：创建个人网站项目（30 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-3%E5%88%9B%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%E9%A1%B9%E7%9B%AE30-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 3：创建个人网站项目（30 分钟）的直接链接" title="步骤 3：创建个人网站项目（30 分钟）的直接链接" translate="no">​</a></h3>
<p>打开 OpenCode，使用自然语言描述需求：</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">请帮我创建一个简洁的个人网站，包含以下内容：</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><br></span><span class="token-line" style="color:#393A34"><span class="token plain">- 技术栈：HTML + CSS + JavaScript</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">- 包含导航栏和页脚</span><br></span></code></pre></div></div>
<p>OpenCode 会自动生成代码，你可以：</p>
<ol>
<li class="">审查生成的代码</li>
<li class="">提出修改意见</li>
<li class="">要求添加更多功能</li>
</ol>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-4创建-github-pages-仓库10-分钟">步骤 4：创建 GitHub Pages 仓库（10 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-4%E5%88%9B%E5%BB%BA-github-pages-%E4%BB%93%E5%BA%9310-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 4：创建 GitHub Pages 仓库（10 分钟）的直接链接" title="步骤 4：创建 GitHub Pages 仓库（10 分钟）的直接链接" translate="no">​</a></h3>
<ol>
<li class="">登录 GitHub</li>
<li class="">点击右上角的 "+" 按钮</li>
<li class="">选择 "New repository"</li>
<li class="">仓库名称格式：<code>你的用户名.github.io</code>
<ul>
<li class="">例如：<code>zhangsan.github.io</code></li>
</ul>
</li>
<li class="">设置为 Public（公开）</li>
<li class="">点击 "Create repository"</li>
</ol>
<p><strong>重要：</strong> 仓库名称必须是 <code>用户名.github.io</code> 格式！</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-5创建网站文件15-分钟">步骤 5：创建网站文件（15 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-5%E5%88%9B%E5%BB%BA%E7%BD%91%E7%AB%99%E6%96%87%E4%BB%B615-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 5：创建网站文件（15 分钟）的直接链接" title="步骤 5：创建网站文件（15 分钟）的直接链接" translate="no">​</a></h3>
<p>在 OpenCode 中，根据之前生成的代码，创建以下文件结构：</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">你的项目文件夹/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── index.html        # 首页</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── css/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── style.css    # 样式文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── js/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── main.js      # JavaScript 文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">└── img/             # 图片资源</span><br></span></code></pre></div></div>
<p>在 OpenCode 中生成每个文件的内容。</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-6推送代码到-github15-分钟">步骤 6：推送代码到 GitHub（15 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-6%E6%8E%A8%E9%80%81%E4%BB%A3%E7%A0%81%E5%88%B0-github15-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 6：推送代码到 GitHub（15 分钟）的直接链接" title="步骤 6：推送代码到 GitHub（15 分钟）的直接链接" translate="no">​</a></h3>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="61-初始化-git">6.1 初始化 Git<a href="https://szqifeng.github.io/blog/deploy-website-2hours#61-%E5%88%9D%E5%A7%8B%E5%8C%96-git" class="hash-link" aria-label="6.1 初始化 Git的直接链接" title="6.1 初始化 Git的直接链接" translate="no">​</a></h4>
<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"># 初始化 Git 仓库</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">git init</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">git add .</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">git commit -m "初次部署个人网站"</span><br></span></code></pre></div></div>
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="62-关联-github-仓库">6.2 关联 GitHub 仓库<a href="https://szqifeng.github.io/blog/deploy-website-2hours#62-%E5%85%B3%E8%81%94-github-%E4%BB%93%E5%BA%93" class="hash-link" aria-label="6.2 关联 GitHub 仓库的直接链接" title="6.2 关联 GitHub 仓库的直接链接" translate="no">​</a></h4>
<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"># 添加远程仓库地址（替换成你的用户名）</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">git remote add origin https://github.com/你的用户名/你的用户名.github.io.git</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"># 推送代码到 GitHub</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">git push -u origin main</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">git branch -M main</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">git push -u origin main</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-7等待部署10-分钟">步骤 7：等待部署（10 分钟）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-7%E7%AD%89%E5%BE%85%E9%83%A8%E7%BD%B210-%E5%88%86%E9%92%9F" class="hash-link" aria-label="步骤 7：等待部署（10 分钟）的直接链接" title="步骤 7：等待部署（10 分钟）的直接链接" translate="no">​</a></h3>
<p>GitHub Pages 会自动检测到 <code>用户名.github.io</code> 仓库，并开始部署。</p>
<ol>
<li class="">访问 <a href="https://xn--6qqv7i14ofosyrb.github.io/" target="_blank" rel="noopener noreferrer" class="">https://你的用户名.github.io</a></li>
<li class="">等待 1-2 分钟</li>
<li class="">刷新页面，你的网站就上线了！</li>
</ol>
<p><strong>查看部署状态：</strong></p>
<ul>
<li class="">进入仓库 → Settings → Pages</li>
<li class="">查看部署状态和历史</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="步骤-8更新和迭代随时">步骤 8：更新和迭代（随时）<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%AD%A5%E9%AA%A4-8%E6%9B%B4%E6%96%B0%E5%92%8C%E8%BF%AD%E4%BB%A3%E9%9A%8F%E6%97%B6" class="hash-link" aria-label="步骤 8：更新和迭代（随时）的直接链接" title="步骤 8：更新和迭代（随时）的直接链接" translate="no">​</a></h3>
<p>网站部署后，你可以随时更新：</p>
<ol>
<li class="">在 OpenCode 中修改内容</li>
<li class="">提交更改：<code>git add . &amp;&amp; git commit -m "更新内容"</code></li>
<li class="">推送到 GitHub：<code>git push</code></li>
<li class="">等待自动部署完成</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="检查点">检查点<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%A3%80%E6%9F%A5%E7%82%B9" class="hash-link" aria-label="检查点的直接链接" title="检查点的直接链接" translate="no">​</a></h2>
<p>✔ 成功注册 GitHub 账户
✔ 下载并配置了 OpenCode
✔ 添加了 glm-4.7 模型
✔ 熟悉了 Start 教程
✔ 创建了个人网站项目
✔ 创建了 GitHub Pages 仓库
✔ 成功推送代码到 GitHub
✔ 访问你的网站正常显示</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="踩坑提醒">踩坑提醒<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E8%B8%A9%E5%9D%91%E6%8F%90%E9%86%92" class="hash-link" aria-label="踩坑提醒的直接链接" title="踩坑提醒的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="问题-1仓库名称错误">问题 1：仓库名称错误<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E9%97%AE%E9%A2%98-1%E4%BB%93%E5%BA%93%E5%90%8D%E7%A7%B0%E9%94%99%E8%AF%AF" class="hash-link" aria-label="问题 1：仓库名称错误的直接链接" title="问题 1：仓库名称错误的直接链接" translate="no">​</a></h3>
<p><strong>问题：</strong> 网站无法访问，显示 404 错误</p>
<p><strong>原因：</strong> 仓库名称不是 <code>用户名.github.io</code> 格式</p>
<p><strong>解决：</strong> 检查仓库名称，确保格式正确</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="问题-2推送代码失败">问题 2：推送代码失败<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E9%97%AE%E9%A2%98-2%E6%8E%A8%E9%80%81%E4%BB%A3%E7%A0%81%E5%A4%B1%E8%B4%A5" class="hash-link" aria-label="问题 2：推送代码失败的直接链接" title="问题 2：推送代码失败的直接链接" translate="no">​</a></h3>
<p><strong>问题：</strong> 执行 <code>git push</code> 时报错</p>
<p><strong>原因：</strong> 网络问题或权限问题</p>
<p><strong>解决：</strong></p>
<ul>
<li class="">检查网络连接</li>
<li class="">确认 GitHub 账户和权限</li>
<li class="">尝试使用 SSH 而不是 HTTPS</li>
</ul>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="问题-3网站部署慢">问题 3：网站部署慢<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E9%97%AE%E9%A2%98-3%E7%BD%91%E7%AB%99%E9%83%A8%E7%BD%B2%E6%85%A2" class="hash-link" aria-label="问题 3：网站部署慢的直接链接" title="问题 3：网站部署慢的直接链接" translate="no">​</a></h3>
<p><strong>问题：</strong> 推送代码后网站很久才更新</p>
<p><strong>原因：</strong> GitHub Pages 部署需要时间</p>
<p><strong>解决：</strong> 耐心等待 1-2 分钟，或查看 Pages 设置中的部署状态</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="问题-4opencode-生成的代码有问题">问题 4：OpenCode 生成的代码有问题<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E9%97%AE%E9%A2%98-4opencode-%E7%94%9F%E6%88%90%E7%9A%84%E4%BB%A3%E7%A0%81%E6%9C%89%E9%97%AE%E9%A2%98" class="hash-link" aria-label="问题 4：OpenCode 生成的代码有问题的直接链接" title="问题 4：OpenCode 生成的代码有问题的直接链接" translate="no">​</a></h3>
<p><strong>问题：</strong> 生成的代码不能正常运行</p>
<p><strong>原因：</strong> 需求描述不够详细</p>
<p><strong>解决：</strong> 更详细地描述需求，提供更多上下文信息</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="本课小结">本课小结<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E6%9C%AC%E8%AF%BE%E5%B0%8F%E7%BB%93" class="hash-link" aria-label="本课小结的直接链接" title="本课小结的直接链接" translate="no">​</a></h2>
<p>恭喜你！🎉</p>
<p>你现在拥有了：</p>
<ul>
<li class="">一个完全免费的个人网站</li>
<li class="">掌握了 GitHub Pages 部署技能</li>
<li class="">学会了使用 OpenCode + glm-4.7 编程</li>
<li class="">可以随时更新和改进你的网站</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="下一课预告">下一课预告<a href="https://szqifeng.github.io/blog/deploy-website-2hours#%E4%B8%8B%E4%B8%80%E8%AF%BE%E9%A2%84%E5%91%8A" class="hash-link" aria-label="下一课预告的直接链接" title="下一课预告的直接链接" translate="no">​</a></h2>
<p>下一篇文章将介绍如何使用 OpenCode 实现更多高级功能，比如添加博客系统、评论功能等，敬请期待！</p>]]></content:encoded>
            <category>部署</category>
            <category>GitHub Pages</category>
            <category>OpenCode</category>
            <category>教程</category>
        </item>
        <item>
            <title><![CDATA[Docusaurus 静态网站最佳实践]]></title>
            <link>https://szqifeng.github.io/blog/docusaurus-best-practices</link>
            <guid>https://szqifeng.github.io/blog/docusaurus-best-practices</guid>
            <pubDate>Fri, 06 Mar 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[Docusaurus 是一个优秀的静态网站生成器，本文分享一些最佳实践。]]></description>
            <content:encoded><![CDATA[<p>Docusaurus 是一个优秀的静态网站生成器，本文分享一些最佳实践。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="一句话总结">一句话总结<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E4%B8%80%E5%8F%A5%E8%AF%9D%E6%80%BB%E7%BB%93" class="hash-link" aria-label="一句话总结的直接链接" title="一句话总结的直接链接" translate="no">​</a></h2>
<p>用好 Docusaurus，让静态网站更快速、更专业。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心笔记">核心笔记<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E6%A0%B8%E5%BF%83%E7%AC%94%E8%AE%B0" class="hash-link" aria-label="核心笔记的直接链接" title="核心笔记的直接链接" translate="no">​</a></h2>
<ul>
<li class="">合理组织文档结构</li>
<li class="">使用 MDX 增强文档功能</li>
<li class="">优化搜索和 SEO</li>
<li class="">利用主题定制打造独特风格</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="学完你能做什么">学完你能做什么<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E5%AD%A6%E5%AE%8C%E4%BD%A0%E8%83%BD%E5%81%9A%E4%BB%80%E4%B9%88" class="hash-link" aria-label="学完你能做什么的直接链接" title="学完你能做什么的直接链接" translate="no">​</a></h2>
<p>完成本教程后，你将能够：</p>
<ul>
<li class="">快速搭建专业的文档站</li>
<li class="">优化网站性能和 SEO</li>
<li class="">自定义主题和样式</li>
<li class="">集成常用功能</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="你现在的困境">你现在的困境<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E4%BD%A0%E7%8E%B0%E5%9C%A8%E7%9A%84%E5%9B%B0%E5%A2%83" class="hash-link" aria-label="你现在的困境的直接链接" title="你现在的困境的直接链接" translate="no">​</a></h2>
<ul>
<li class="">不知道如何组织文档结构</li>
<li class="">不熟悉 Docusaurus 的高级功能</li>
<li class="">网站加载速度慢</li>
<li class="">搜索功能不好用</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="什么时候用这一招">什么时候用这一招<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8%E8%BF%99%E4%B8%80%E6%8B%9B" class="hash-link" aria-label="什么时候用这一招的直接链接" title="什么时候用这一招的直接链接" translate="no">​</a></h2>
<ul>
<li class="">搭建技术文档站时</li>
<li class="">创建项目主页时</li>
<li class="">需要快速迭代内容时</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="核心思路">核心思路<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E6%A0%B8%E5%BF%83%E6%80%9D%E8%B7%AF" class="hash-link" aria-label="核心思路的直接链接" title="核心思路的直接链接" translate="no">​</a></h2>
<p>Docusaurus 提供了丰富的配置和插件，合理使用这些功能可以大大提升网站质量。</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="跟我做">跟我做<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E8%B7%9F%E6%88%91%E5%81%9A" class="hash-link" aria-label="跟我做的直接链接" title="跟我做的直接链接" translate="no">​</a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="实践-1优化文档结构">实践 1：优化文档结构<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E5%AE%9E%E8%B7%B5-1%E4%BC%98%E5%8C%96%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84" class="hash-link" aria-label="实践 1：优化文档结构的直接链接" title="实践 1：优化文档结构的直接链接" translate="no">​</a></h3>
<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">docs/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── getting-started/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── installation.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── configuration.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── quick-start.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">├── guides/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   ├── basic-usage.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">│   └── advanced-features.md</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">└── api/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    └── reference.md</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="实践-2使用-mdx-示例">实践 2：使用 MDX 示例<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E5%AE%9E%E8%B7%B5-2%E4%BD%BF%E7%94%A8-mdx-%E7%A4%BA%E4%BE%8B" class="hash-link" aria-label="实践 2：使用 MDX 示例的直接链接" title="实践 2：使用 MDX 示例的直接链接" translate="no">​</a></h3>
<p>Docusaurus 支持 MDX，可以在 Markdown 中使用 React 组件。比如 Tabs 组件：</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'JavaScript'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'TypeScript'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="实践-3优化-seo">实践 3：优化 SEO<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E5%AE%9E%E8%B7%B5-3%E4%BC%98%E5%8C%96-seo" class="hash-link" aria-label="实践 3：优化 SEO的直接链接" title="实践 3：优化 SEO的直接链接" translate="no">​</a></h3>
<p>在 <code>docusaurus.config.ts</code> 中添加元数据优化 SEO：</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts 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">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">  metadata</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 punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'description'</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">      content</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'你的网站描述'</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>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="实践-4自定义主题">实践 4：自定义主题<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E5%AE%9E%E8%B7%B5-4%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98" class="hash-link" aria-label="实践 4：自定义主题的直接链接" title="实践 4：自定义主题的直接链接" translate="no">​</a></h3>
<div class="language-jsx codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-jsx codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// swizzle Footer 组件</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">npm run swizzle @docusaurus</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">theme</span><span class="token operator" style="color:#393A34">-</span><span class="token plain">classic </span><span class="token maybe-class-name">Footer</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="检查点">检查点<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E6%A3%80%E6%9F%A5%E7%82%B9" class="hash-link" aria-label="检查点的直接链接" title="检查点的直接链接" translate="no">​</a></h2>
<p>✔ 文档结构清晰合理
✔ 熟悉 MDX 基本语法
✔ 掌握 SEO 优化技巧
✔ 能自定义主题组件</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="踩坑提醒">踩坑提醒<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E8%B8%A9%E5%9D%91%E6%8F%90%E9%86%92" class="hash-link" aria-label="踩坑提醒的直接链接" title="踩坑提醒的直接链接" translate="no">​</a></h2>
<p><strong>问题：</strong> 页面加载慢
<strong>原因：</strong> 图片未优化
<strong>解决：</strong> 使用 next/image 或优化图片格式</p>
<p><strong>问题：</strong> 搜索功能不好用
<strong>原因：</strong> 没有配置 algolia
<strong>解决：</strong> 集成 Algolia DocSearch</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="本课小结">本课小结<a href="https://szqifeng.github.io/blog/docusaurus-best-practices#%E6%9C%AC%E8%AF%BE%E5%B0%8F%E7%BB%93" class="hash-link" aria-label="本课小结的直接链接" title="本课小结的直接链接" translate="no">​</a></h2>
<p>Docusaurus 功能强大，合理使用可以事半功倍。</p>]]></content:encoded>
            <category>Docusaurus</category>
            <category>静态网站</category>
            <category>最佳实践</category>
        </item>
    </channel>
</rss>