1. 项目概述从对话到存档一键生成可分享的静态页面如果你和我一样经常使用 AI 助手进行深度对话无论是讨论技术方案、头脑风暴创意还是解决一个棘手的编程问题你一定会遇到一个痛点这些充满价值的对话最终都静静地躺在聊天历史里难以整理、分享和复用。截图太零碎复制粘贴又丢失了上下文和思考过程。Clawpage 就是为了解决这个问题而生的。简单来说Clawpage 是一个专为 OpenClaw 设计的技能Skill。它的核心功能是让你在任何 OpenClaw 对话中只需输入一个简单的命令/clawpage就能将当前或任意历史对话转换成一个结构清晰、设计精美的静态网页。这个网页可以被部署到 GitHub Pages、Vercel、Netlify 或 Cloudflare Pages 等主流静态托管服务上生成一个属于你自己的、永久的对话存档链接。想象一下你和 AI 助手花了一个小时一步步推导出一个复杂的系统架构。过去这个成果可能只存在于你的记忆和聊天记录里。现在你可以一键将它变成一个可分享的“博客文章”或“项目笔记”不仅保留了完整的问答过程连 AI 的“思考痕迹”tool calls和推理步骤都能原样呈现。这对于知识沉淀、团队协作分享、甚至是创建独特的个人知识库都是一个游戏规则的改变者。2. 核心设计思路与工作流拆解Clawpage 的设计哲学非常清晰无感化、自动化、安全可控。它不是另一个需要你手动导出、编辑、上传的复杂工具而是深度集成到你的工作流中像一个贴心的助手。2.1 基于技能的无缝触发整个流程的起点是 OpenClaw 的技能系统。你不需要离开对话界面也不需要打开任何额外的应用。当对话进行到你觉得有价值、值得保存的节点时直接在聊天框输入/clawpage并发送。这个命令会触发 Clawpage 技能AI 助手会接管后续的所有操作。这种设计的好处是上下文感知。技能运行时它天然地知道当前对话的所有信息包括参与者、消息历史、使用的模型等这为自动化提取元数据打下了完美的基础。你不需要再手动填写“对话标题”、“参与者”这些信息AI 会根据对话内容智能生成建议。2.2 分支驱动的审阅发布流程这是 Clawpage 设计中我认为最精妙的一环它完美平衡了自动化与安全性。当技能执行时它并不会直接将生成的页面文件推送到你网站的主分支通常是main或master。相反它会在存放你聊天数据的私有 Git 仓库中创建一个新的特性分支命名规则通常是chat/{日期}-{标题简写}。将包含完整对话的 YAML 文件提交到这个新分支。引导你或自动在 GitHub 等平台上基于这个新分支创建一个 Pull Request。为什么这个设计至关重要它强制引入了一个“审阅”环节。在合并 PR 之前你有充分的机会在 Git 的差异对比界面中仔细检查即将公开的内容。你可以修改标题、描述最重要的是检查并手动替换任何可能被 AI 漏掉的敏感信息如 API 密钥、内部链接、个人信息。只有在你确认无误并合并 PR 后静态站点的构建流程才会被触发页面才会真正对外发布。这个“分支-PR-合并”的工作流借鉴了成熟的软件开发实践确保了内容发布的严谨性避免了因自动化而可能导致的误公开风险。2.3 数据与模板分离的架构Clawpage 的代码仓库是一个公共模板包含了网站生成器、CLI 工具和技能定义。而你真正的对话数据则存放在另一个独立的、**私有的“工作仓库”**中。这种架构带来了几个明显优势安全性你的私人对话数据永远不会进入公共仓库从源头上隔离了风险。可维护性Clawpage 的模板可以持续更新、添加新功能你可以通过拉取模板更新的方式升级你的站点而不会影响你已有的聊天数据。灵活性你可以基于同一个模板创建多个不同的私有数据仓库用于不同目的如个人笔记、团队知识库、客户对话存档。3. 从零开始详细配置与部署指南了解了核心思路我们来一步步实现它。整个过程可以被 AI 助手极大地简化但理解背后的每一步能让你在遇到问题时从容应对。3.1 初始设置让 AI 为你搭建一切最快捷的启动方式是直接复制以下指令粘贴到你的 OpenClaw 对话中Read https://clawhub.ai/imyelo/clawpage and install the clawpage skill, then run first-time setup for me.这条指令会让 AI 助手执行一个完整的初始化流程。根据我的经验它会依次完成以下任务创建私有仓库在你的 GitHub 账户下创建一个新的私有仓库例如your-username/clawpage-data并将 Clawpage 模板代码克隆进去。生成配置文件在仓库根目录创建clawpage.toml文件并根据你的情况预填配置。最关键的是site和base这两个参数。配置 Git 远程与推送将初始化好的仓库推送到 GitHub。启用 GitHub Pages在仓库设置中将 GitHub Actions 配置为 Pages 的构建和发布源。注册技能在 OpenClaw 中完成 Clawpage 技能的最终配置使其指向你新创建的私有数据仓库。在这个过程中AI 可能会向你询问几个关键信息比如你希望部署到的域名如果你使用 GitHub Pages通常是https://你的用户名.github.io/你的仓库名你需要根据提示进行确认或输入。注意首次设置涉及 GitHub 权限授予创建仓库、设置 Pages 等。请确保你的 OpenClaw 助手已获得必要的 GitHub API 令牌如 Fine-grained Personal Access Token并拥有足够的权限至少需要 repo 的读写权限。3.2 核心配置文件详解clawpage.toml初始化完成后你的仓库根目录会有一个clawpage.toml文件。这是整个站点的控制中心。理解每个配置项的作用能让你后续进行个性化定制。# 站点基础配置 site https://your-username.github.io # 你站点最终访问的完整URL base /your-repo-name # 如果站点不在域名根目录则需设置此路径 # 模板选项 [template.options] title 我的对话档案馆 # 网站首页的标题 subtitle // 思考与对话的痕迹 # 首页副标题 description 通过Clawpage自动生成的对话存档 # 网站的meta描述利于SEO # 页脚信息支持Markdown footer 由 [Clawpage](https://github.com/imyelo/clawpage) 驱动 # 推广区块可选用于支持项目 [template.options.promo] enabled false # 设置为 true 会在首页显示一个感谢使用Clawpage的推广区块关键配置解析site和base这是最容易出错的地方。场景一GitHub Pages 用户站点username.github.io仓库如果你的仓库名就是username.github.io那么site https://username.github.io并且base /或者直接不写base。场景二GitHub Pages 项目站点其他仓库名这是更常见的情况。例如仓库名为my-chats那么访问地址是https://username.github.io/my-chats。此时site https://username.github.iobase /my-chats。场景三Vercel/Netlify/Cloudflare Pages 或自定义域名如果你绑定了自己的域名如chat.example.com那么site https://chat.example.com并且不要设置base参数。public_dir和out_dir通常保持默认即可。public_dir用于存放 favicon、自定义 CSS/JS 等静态资源out_dir是构建后静态文件的输出目录。chats_dir默认聊天 YAML 文件存放在项目根目录的chats/文件夹下。如果你希望存放在其他位置比如上级目录可以通过此配置修改。3.3 选择与配置部署平台Clawpage 模板贴心地为四大主流静态托管平台准备好了配置文件GitHub Pages(.github/workflows/deploy.yml): 最适合初学者完全免费与 GitHub 仓库无缝集成。配置好clawpage.toml中的site和base后每次推送到main分支的更新都会自动触发构建和部署。Vercel(vercel.json): 部署速度极快全球 CDN对前端框架优化好。通过导入 GitHub 仓库可以自动配置。需要在 Vercel 项目设置中正确设置Output Directory为dist。Netlify(netlify.toml): 功能强大提供表单处理、服务器函数等。同样支持 Git 集成自动部署。构建命令为npm run build发布目录为dist。Cloudflare Pages(兼容): 虽然没有专用配置文件但其构建配置非常简单。在 Pages 控制台设置构建命令为npm run build输出目录为dist即可。部署平台选择建议追求极简和免费选GitHub Pages。它是完全内嵌在流程中的无需额外账号。追求部署速度和全球化选Vercel。它的预览部署和增量更新体验非常棒。项目已有相关生态如果你已经在用 Netlify 或 Cloudflare直接选用配置更统一。实操心得无论选择哪个平台在第一次部署后建议手动访问一下你的站点地址检查 CSS、JS 等资源是否加载正常。常见问题是base路径配置错误导致所有资源请求 404。如果遇到此问题请回头仔细核对clawpage.toml中的site和base配置。4. 核心使用流程分享一个对话的完整生命周期假设你现在有一段想要存档的对话让我们走一遍完整的/clawpage流程。4.1 在对话中触发技能在 OpenClaw 的聊天界面中直接输入/clawpage发送后AI 助手会开始执行 Clawpage 技能。它会首先向你确认几个问题选择会话“请问要存档当前会话还是历史会话” 默认是当前会话。你也可以提供历史会话的 ID 或关键词让 AI 去查找。确认元数据AI 会根据对话内容智能生成一个标题和描述。例如如果你们在讨论“如何用 Rust 实现一个简单的 HTTP 服务器”标题可能会被建议为Implementing a Basic HTTP Server in Rust。你需要确认或修改这些信息。设置可见性“设置为公开出现在首页列表还是私有仅通过链接访问” 默认是private。对于包含敏感或未完成内容的对话选择私有是更安全的做法。4.2 AI 的自动化处理与你的审阅在你确认后AI 会在后台执行一系列操作提取与格式化从 OpenClaw 的会话日志中提取完整的消息历史、参与者、时间戳、使用的模型等信息。敏感信息打码调用 AI 能力尝试识别并替换消息中的敏感信息如密码、密钥、邮箱、手机号为[REDACTED]。这是一个辅助功能并非百分百可靠。生成 YAML将格式化后的数据按照规定的数据格式生成一个 YAML 文件。提交到新分支在你的私有数据仓库中创建一个形如chat/20250415-implementing-http-server-in-rust的新分支并将 YAML 文件提交到chats/目录下。创建 Pull Request最后AI 会生成一个 PR 链接提示你去 GitHub 上审查这次更改。此时你必须进行最关键的一步人工审查。点击 AI 提供的 PR 链接进入 GitHub 的 Files changed 标签页。仔细查看生成的 YAML 文件内容特别是对话正文部分。检查是否有敏感信息被遗漏。如果发现直接在 GitHub 的编辑界面将其修改为[REDACTED]。4.3 合并与发布审查无误后在 GitHub 上合并这个 Pull Request。一旦合并到main分支你所配置的部署平台如 GitHub Actions就会自动被触发。构建流程会拉取最新的main分支代码。运行npm run build内部调用clawpage-web build。读取chats/目录下所有的 YAML 文件。使用 Astro 静态站点生成器为每个 YAML 文件生成一个对应的 HTML 页面。更新首页的对话列表仅包含visibility: public的对话。将生成的整个dist目录部署到线上。几分钟后你的对话存档页面就可以通过https://你的域名/chats/20250415-implementing-http-server-in-rust这个链接访问了。页面会清晰展示对话的参与者、时间线并且可以展开查看 AI 的思考过程和工具调用详情。5. 数据格式深度解析与自定义Clawpage 的强大之处在于它完整保留了对话的“元信息”和“过程信息”。理解其数据格式有助于你进行高级定制或批量处理。5.1 YAML 文件结构详解每个聊天存档对应一个 YAML 文件。以下是一个增强版的示例包含了更多字段# 元数据区 title: “在AWS Lambda上部署Python异步函数的实践与排坑” date: 2026-02-15 sessionId: cf1f8dbe-2a12-47cf-8221-9fcbf0c47466 channel: openclaw-desktop # 来源渠道可自定义 model: claude-3-5-sonnet-20241022 # 使用的主要模型 totalMessages: 24 totalTokens: 18932 tags: [aws, lambda, python, async, troubleshooting] # 标签用于分类筛选 visibility: public # 或 private description: 记录了在AWS Lambda上部署异步Python函数时遇到的冷启动问题、层依赖打包的解决方案以及CloudWatch日志的调试技巧。 defaultShowProcess: true # 默认展开显示AI的思考过程 participants: 开发者小王: role: human Claude: role: agent 知识库: role: system # 可以扩展角色类型 # 时间线 - 对话的核心内容 timeline: - type: message role: human speaker: 开发者小王 timestamp: 2026-02-15T10:30:00.000Z content: | 我遇到了一个Lambda冷启动时异步上下文丢失的问题。我的函数使用了asyncio.run()但在并发调用时偶尔会报错。 - type: message role: agent speaker: Claude timestamp: 2026-02-15T10:30:30.000Z model: claude-3-5-sonnet-20241022 content: | 这个问题很典型。Lambda 的执行环境在每次冷启动时是一个全新的进程... # 思考过程被完整保留 thinking: | 用户描述的是 AWS Lambda 上 Python 异步编程的经典问题。我需要从几个方面分析 1. Lambda 执行环境生命周期 2. asyncio 事件循环在并发下的状态 3. 最佳实践是使用 asyncio.get_event_loop() 吗不那有缺陷。 我的回答应该聚焦于推荐 aioboto3 或 asyncio.create_task 的模式并解释为什么。 # 工具调用也被记录 tool_calls: - id: call_xyz name: search_web input: query: AWS Lambda python async best practices 2026 - type: message role: tool tool_call_id: call_xyz timestamp: 2026-02-15T10:30:35.000Z content: | [Search results about async context management in Lambda...] - type: message role: agent speaker: Claude timestamp: 2026-02-15T10:31:00.000Z content: | 根据最新的实践我推荐以下方案...5.2 关键字段的用途与技巧tags: 这是一个非常有用的字段。你可以在后续通过修改模板为站点添加按标签筛选的功能。建议建立一套自己的标签体系如#tech,#idea,#debug,#planning。defaultShowProcess: 如果你的对话中包含了大量 AI 的思考链thinking和工具调用tool_calls为了页面简洁可以将其设置为false。读者可以通过点击“展开思考过程”按钮来查看详情。对于教程类、思维展示类的对话设置为true更能体现价值。participants: 你可以自定义参与者的名字和角色。除了human和agent你甚至可以添加system或expert等角色并在前端模板中为不同角色定义不同的显示样式。timeline中的thinking和tool_calls: 这是 Clawpage 区别于简单截图或文本导出的核心。它保留了 AI 的“黑盒”过程对于技术复盘、学习 AI 推理逻辑具有巨大价值。5.3 手动管理与批量处理虽然/clawpage技能是主要入口但 Clawpage 也提供了 CLI 工具用于高级场景手动解析会话文件如果你有 OpenClaw 导出的原始session.jsonl文件可以使用 CLI 手动生成 YAML。# 在存放clawpage CLI的项目中 npx clawpage parse ./path/to/session.jsonl -o ./chats/my-chat.yaml批量导出历史会话你可以写一个简单的 Shell 或 Node.js 脚本遍历你本地的 OpenClaw 会话目录批量调用 CLI 工具将历史对话一次性全部转换为 YAML 存档。直接编辑 YAML你可以直接修改已生成的 YAML 文件来修正错误、补充标签、调整描述然后提交 Git。这为你提供了最大的灵活性。6. 高级定制与问题排查6.1 自定义网站样式与功能Clawpage 的网站部分基于 Astro 构建这意味着你有很大的定制空间。你的私有工作仓库中包含了完整的网站源代码。修改样式主要的样式文件在packages/web/src/styles/目录下。你可以修改global.css或特定组件的样式来改变字体、颜色、布局等。修改布局页面布局文件位于packages/web/src/layouts/。如果你想在每页聊天页面上添加一个统一的侧边栏或页眉可以修改ChatLayout.astro。添加新页面你可以在packages/web/src/pages/目录下创建新的.astro或.md文件比如创建一个about.md来介绍这个存档站点的用途。添加组件在packages/web/src/components/下创建新的 Astro 或框架组件可以实现更复杂的功能如标签云、搜索框需要接入静态搜索服务如 Pagefind、暗色模式切换等。注意对模板进行自定义后如果上游的imyelo/clawpage模板仓库有更新你在合并更新时可能会遇到冲突。建议将你的自定义修改记录清楚或者考虑 fork 后在自己的版本上进行深度定制。6.2 常见问题与解决方案在实际使用中你可能会遇到以下问题问题一执行/clawpage后AI 提示“找不到技能”或“配置错误”。排查首先确认技能是否已正确安装。在 OpenClaw 的技能管理界面检查 Clawpage 技能的状态。最常见的问题是技能配置中的 Git 仓库地址或个人访问令牌PAT不正确。解决让 AI 重新运行一次首次设置流程或在技能配置中手动核对仓库 URL 和令牌权限需要repo的读写权限。问题二页面部署后样式丢失显示为纯文本。排查这几乎总是clawpage.toml中site和base路径配置错误导致的。浏览器控制台会显示 CSS/JS 文件 404 的错误。解决根据你的部署平台严格按照前文所述的规则修正site和base配置。对于 GitHub Pages 项目站点base必须是以/开头的仓库名路径。问题三合并 PR 后网站没有更新。排查检查 GitHub Actions或 Vercel/Netlify 的部署日志是否有构建失败。常见原因是依赖安装失败或构建脚本错误。确认 PR 是否确实合并到了main分支或你配置的默认分支。检查仓库设置中GitHub Pages 的源是否设置为GitHub Actions。解决查看部署日志的具体错误信息。如果是依赖问题尝试在本地运行npm install和npm run build看是否能成功。问题四敏感信息泄露风险。风险AI 的自动打码功能不是万无一失的。它可能遗漏某些特定格式的密钥、内部 IP 或业务术语。最佳实践永远不要跳过 PR 审阅环节。这是最后、最重要的人工防线。在对话中对于极度敏感的信息可以在触发/clawpage之前手动用[REDACTED]替换掉消息内容。建立习惯在 PR 中全局搜索可能的关键词如key,secret,password,token,192.168,10.等。对于涉及核心机密的对话始终使用visibility: private。问题五生成的 YAML 文件内容混乱或格式错误。排查可能是原始 OpenClaw 会话日志格式异常或者在消息中包含了一些特殊字符破坏了 YAML 结构。解决可以尝试使用 CLI 工具手动解析看是否有更详细的错误输出。也可以临时用一个简单的会话来测试技能是否正常工作。对于复杂内容YAML 对缩进和特殊字符如冒号后接空格非常敏感AI 在生成时偶尔会出错这时需要在 PR 中手动修正 YAML 格式。Clawpage 本质上是一个将流动的、私密的对话固化为可链接、可传播的静态知识的桥梁。它节省了我大量整理和排版的时间让我更专注于对话本身。最大的体会是它改变了我使用 AI 的方式——我不再担心精彩的讨论转瞬即逝因为我知道任何有价值的对话都可以在几秒钟内变成一个永久的、可分享的资产。如果你也在寻找一种优雅的方式来管理你的 AI 对话产出不妨现在就输入/clawpage试试看。