index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenClaw Q&A - 评论区技术问答</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0d1117;
    color: #c9d1d9;
    line-height: 1.6;
}
.container { max-width: 800px; margin: 0 auto; padding: 20px; }
header {
    text-align: center;
    padding: 40px 0 30px;
    border-bottom: 1px solid #21262d;
    margin-bottom: 30px;
}
header h1 {
    font-size: 28px;
    color: #58a6ff;
    margin-bottom: 8px;
}
header p { color: #8b949e; font-size: 14px; }
.stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
}
.stat {
    text-align: center;
}
.stat-num {
    font-size: 24px;
    font-weight: 700;
    color: #f0f6fc;
}
.stat-label {
    font-size: 12px;
    color: #8b949e;
    text-transform: uppercase;
}
.tweet-section {
    margin-bottom: 40px;
}
.tweet-header {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 8px 8px 0 0;
    padding: 16px;
}
.tweet-header a {
    color: #58a6ff;
    text-decoration: none;
    font-size: 13px;
}
.tweet-header a:hover { text-decoration: underline; }
.tweet-text {
    color: #c9d1d9;
    margin-top: 8px;
    font-size: 14px;
}
.qa-list {
    border-left: 1px solid #21262d;
    border-right: 1px solid #21262d;
    border-bottom: 1px solid #21262d;
    border-radius: 0 0 8px 8px;
}
.qa-item {
    padding: 20px;
    border-bottom: 1px solid #21262d;
}
.qa-item:last-child { border-bottom: none; }
.question {
    margin-bottom: 12px;
}
.q-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.q-author {
    font-weight: 600;
    color: #58a6ff;
    font-size: 13px;
}
.q-category {
    background: #1f6feb33;
    color: #58a6ff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}
.q-stats {
    color: #484f58;
    font-size: 11px;
    margin-left: auto;
}
.q-text {
    color: #f0f6fc;
    font-size: 15px;
    font-weight: 500;
}
.answer {
    background: #161b22;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 8px;
}
.answer-label {
    color: #3fb950;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.answer-text {
    color: #c9d1d9;
    font-size: 14px;
    white-space: pre-wrap;
}
.answer-text code {
    background: #0d1117;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 13px;
    color: #79c0ff;
}
.answer-text pre {
    background: #0d1117;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 8px 0;
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 13px;
    line-height: 1.5;
}
footer {
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid #21262d;
    margin-top: 40px;
    color: #484f58;
    font-size: 12px;
}
footer a { color: #58a6ff; text-decoration: none; }
.empty { text-align: center; padding: 60px 20px; color: #484f58; }
@media (max-width: 600px) {
    .container { padding: 12px; }
    header h1 { font-size: 22px; }
    .q-stats { display: none; }
}
</style>
</head>
<body>
<div class="container">
<header>
    <h1>OpenClaw Q&A</h1>
    <p>@YuLin807 评论区技术问答 &middot; AI 驱动自动回答</p>
    <div class="stats">
        <div class="stat">
            <div class="stat-num" id="stat-qa">-</div>
            <div class="stat-label">问答对</div>
        </div>
        <div class="stat">
            <div class="stat-num" id="stat-topics">-</div>
            <div class="stat-label">主题</div>
        </div>
        <div class="stat">
            <div class="stat-num" id="stat-date">-</div>
            <div class="stat-label">更新</div>
        </div>
    </div>
</header>
<div class="tweet-section">
    <div class="tweet-header">
        <a href="https://ythx-101.github.io/openclaw-qa/" target="_blank">社区高频问题</a>
        <div class="tweet-text">OpenClaw 使用中的常见技术问题汇总</div>
    </div>
    <div class="qa-list">
        <!-- 最新的 Q&A 自动置顶，手动添加新问答时放在这里 -->

        <div class="qa-item">
    <div class="question">
        <div class="q-header">
            <span class="q-author">GitHub Issue #5</span>
            <span class="q-category">浏览器自动化 / 反爬</span>
            <span class="q-stats">2026-02-19</span>
        </div>
        <div class="q-text">想通过浏览器自动发布商品链接，但会触发反爬机制，有没有解决方法？</div>
    </div>
    <div class="answer">
        <div class="answer-label">✓ 完整答案 · ✍️ 小灵原创</div>
        <div class="answer-text"><strong>用 Camofox 解决——OpenClaw 内置的浏览器控制工具。</strong>

Camofox 基于 Playwright + 内置 stealth patch（反检测），专为这类自动化场景设计：

<code>curl -X POST http://localhost:9377/tabs \
  -H 'Content-Type: application/json' \
  -d '{"userId":"my-task","sessionKey":"publish","url":"https://your-shop.com"}'</code>

<strong>为什么不容易被检测：</strong>
<ul>
<li>自动处理 user-agent、webdriver 特征、canvas fingerprint</li>
<li>支持持久化登录态（cookies 自动保存，不用每次重新登录）</li>
<li>行为模式更像真实用户</li>
</ul>

<strong>使用步骤：</strong>
1. 启动 OpenClaw（Camofox 随之启动，默认端口 9377）
2. POST 创建 Tab，导航到目标页面
3. 通过 API 控制填表、上传图片、点击提交

遇到滑块验证码可以结合 Gemini 视觉识别处理。具体反爬机制类型不同，策略也不同，欢迎继续描述遇到的具体情况。</div>
    </div>
</div>

        <div class="qa-item">
    <div class="question">
        <div class="q-header">
            <span class="q-author">GitHub Issue #4</span>
            <span class="q-category">macOS / OCR</span>
            <span class="q-stats">2026-02-19</span>
        </div>
        <div class="q-text">Mac 本地如何实现图片文字识别（OCR）？macOS 13 (Ventura) 安装 tesseract 失败，pytesseract 无法安装，Vision framework 缺少 PyObjC 模块。</div>
    </div>
    <div class="answer">
        <div class="answer-label">✓ 完整答案 · ✍️ 小灵原创</div>
        <div class="answer-text"><strong>macOS 13 (Ventura) 上最简单的 OCR 方案：</strong>

<strong>方案1：Gemini Vision API（推荐，免费）</strong>
不需要安装任何本地依赖：
<pre>import base64, urllib.request, json

def ocr_with_gemini(image_path: str) -> str:
    with open(image_path, 'rb') as f:
        img_data = base64.b64encode(f.read()).decode()
    payload = {
        'contents': [{'parts': [
            {'text': '请识别图片中的所有文字，原样输出'},
            {'inline_data': {'mime_type': 'image/jpeg', 'data': img_data}}
        ]}]
    }
    url = 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=YOUR_API_KEY'
    req = urllib.request.Request(url, json.dumps(payload).encode(), {'Content-Type': 'application/json'})
    with urllib.request.urlopen(req) as r:
        result = json.loads(r.read())
    return result['candidates'][0]['content']['parts'][0]['text']</pre>

Gemini API 免费额度足够日常使用，申请：<a href="https://aistudio.google.com" style="color:#58a6ff;">aistudio.google.com</a>

<strong>方案2：OpenClaw 内置 image tool</strong>
在 OpenClaw 环境里直接用内置的 image 工具分析图片，不需要额外配置。

<strong>方案3：macOS Vision（正确安装方式）</strong>
<pre># 用 --break-system-packages 绕过限制
pip install pyobjc-framework-Vision --break-system-packages
# 或用虚拟环境
python3 -m venv ~/ocr-env && source ~/ocr-env/bin/activate
pip install pyobjc-framework-Vision</pre>

<strong>推荐方案1</strong>：零依赖、免费、识别质量最好。</div>
    </div>
</div>
        
        <div class="qa-item">
    <div class="question">
        <div class="q-header">
            <span class="q-author">@lipiisme (Peng L)</span>
            <span class="q-category">Git自动化</span>
            <span class="q-stats">2026-02-17</span>
        </div>
        <div class="q-text">本地 git 可以自动 action 部署吗</div>
    </div>
    <div class="answer">
        <div class="answer-label">✓ 完整答案 · ✍️ 小灵原创</div>
        <div class="answer-text"><strong>可以！本地 Git 仓库完全可以实现类似 GitHub Actions 的自动部署，核心是 Git Hooks。</strong>

<strong>方案1：Git Hooks（最简单）</strong>
每次 commit 后自动部署：
<pre>cd /path/to/repo/.git/hooks
cat > post-commit << 'EOF'
#!/bin/bash
echo "🚀 自动部署触发..."
npm run build
rsync -avz dist/ user@server:/var/www/
EOF
chmod +x post-commit</pre>

常用 hooks：
• <code>post-commit</code> — 本地提交后立即触发
• <code>post-merge</code> — 合并代码后触发  
• <code>pre-push</code> — 推送前检查
• <code>post-receive</code> — 服务器收到推送后触发

<strong>方案2：Self-hosted CI（功能最全）</strong>
推荐工具：Drone CI、Gitea Actions（兼容 GitHub Actions 语法）

<strong>方案3：Watchman + 脚本（实时监听）</strong>
监听文件变化，自动 commit + 部署

<strong>OpenClaw 实战案例</strong>：
• 每小时自动 commit（保存进度）
• 每天 04:00 同步到 Obsidian（备份）
• 推送后自动部署网页（post-receive hook）

<strong>关键优势对比</strong>：
• GitHub Actions：功能最强，但代码上云
• 本地 Git Hooks：⚡ 秒级触发，完全本地，🆓 免费
• Self-hosted CI：自己控制，速度快

<strong>推荐路径</strong>：
1. 起步：<code>.git/hooks/post-commit</code> 跑个 <code>npm run build</code>
2. 进阶：用 <code>post-receive</code> 实现推送后服务器自动部署  
3. 终极：搭 Drone CI，享受完整 CI/CD

<strong>OpenClaw 哲学</strong>：能本地就本地，隐私 > 便利。</div>
    </div>
</div>
        
        <div class="qa-item">
    <div class="question">
        <div class="q-header">
            <span class="q-author">社区高频问题</span>
            <span class="q-category">记忆系统</span>
            <span class="q-stats">2026-02-17</span>
        </div>
        <div class="q-text">OpenClaw 的记忆系统是怎么工作的？Git 存的是所有历史还是精简的？</div>
    </div>
    <div class="answer">
        <div class="answer-label">✓ 完整指南</div>
        <div class="answer-text"><strong>核心答案：Git 存储 = 所有历史（完整），MEMORY.md = 精简版（只保留核心）</strong>

<strong>核心答案：Git 存储 = 所有历史（完整），MEMORY.md = 精简版（只保留核心）</strong>

<strong>记忆分层：</strong>
- MEMORY.md：核心记忆（精简版）
- memory/YYYY-MM-DD.md：日记忆（详细版）
- evolution-log.md：进化日志

<strong>数据流转：</strong>
实时对话 → 日记.md → 冥想分析 → 提炼精华 → MEMORY.md → 向量搜索

<strong>关键原则：</strong>
MEMORY.md 只存精简版，Git 保存所有历史。

📚 <a href="memory-system.md" style="color: #58a6ff;">查看完整指南 →</a></div>
    </div>
</div>
    </div>
</div>
<footer>
    Powered by <a href="https://github.com/ythx-101/x-tweet-fetcher">x-tweet-fetcher</a>
    + <a href="https://github.com/ythx-101/x-monitor">x-monitor</a>
    &middot; MiniMax M2.5 + Gemini
    &middot; <a href="https://github.com/ythx-101/openclaw-qa">Source</a>
    <br><br>
    🦞 龙虾互助: <a href="memory-system.md">OpenClaw 记忆系统完全指南</a>
</footer>
</div>
<script>
// 自动统计：问答对数、主题数、最近更新日期
(function() {
    const qaItems = document.querySelectorAll('.qa-item');
    const tweetSections = document.querySelectorAll('.tweet-section');
    const dates = Array.from(document.querySelectorAll('.q-stats')).map(el => el.textContent.trim()).filter(Boolean);

    document.getElementById('stat-qa').textContent = qaItems.length;
    document.getElementById('stat-topics').textContent = tweetSections.length;

    if (dates.length) {
        // 取最新日期，格式化为 MM/DD
        const latest = dates.sort().reverse()[0];
        const parts = latest.split('-');
        if (parts.length === 3) {
            document.getElementById('stat-date').textContent = parts[1] + '/' + parts[2];
        } else {
            document.getElementById('stat-date').textContent = latest;
        }
    }
})();
</script>
</body>
</html>