核心内容摘要
探寻那些隐藏在镜头后的故事：日本“XXXX69老师”与学生的双向奔赴
Qwen
B保姆级教程Clawdbot Web界面汉化主题切换快捷键配置
为什么需要这套配置你是不是也遇到过这些问题Clawdbot 默认界面全是英文看着费劲尤其想快速上手时总要查单词深色模式看久了眼睛累浅色模式又在夜间刺眼来回切换还得翻设置菜单写提示词时频繁点鼠标切输入框、点发送、点清空——明明可以按个键就搞定的事却要动三次手。
这其实不是你的问题而是 Clawdbot 原生 Web 界面在本地私有部署场景下缺少面向中文用户的一站式体验优化。
它本身不带汉化包主题是硬编码的快捷键也只开放了基础功能没做中文环境适配。
而我们这次用的底座模型是Qwen
B——通义千问最新一代开源大模型320亿参数中文理解强、逻辑推理稳、长文本处理扎实。
它通过 Ollama 在本地运行再由 Clawdbot 作为前端交互层统一接入。
整个链路走的是直连代理网关8080 → 18789不经过公网中转响应快、隐私好、稳定性高。
这篇教程不讲怎么装 Ollama、不重复部署 Qwen3也不堆砌 Docker 命令。
我们聚焦一件事让已经跑起来的 Clawdbot Qwen
B 组合真正变成你每天愿意打开、顺手、舒服用的中文 AI 助手。
从汉化到主题从快捷键到小技巧每一步都可复制、可验证、不踩坑。
准备工作确认当前环境状态在动手改界面之前先花两分钟确认三件事。
别跳过——很多“汉化失败”其实卡在这一步。
1 确认 Clawdbot 正在运行且能访问打开浏览器输入http://localhost:18789注意是 18789不是 8080。
如果看到类似下图的聊天界面说明网关转发已生效如果打不开请先检查Ollama 是否已拉取并运行qwen3:32b命令ollama run qwen3:32bClawdbot 的config.yaml中backend_url是否指向http://localhost:8080代理是否正确将18789端口流量转发至8080常见于 Nginx 或 Caddy 配置。
2 找到 Clawdbot 的 Web 资源目录Clawdbot 的前端页面不是远程加载的而是打包在程序内部的静态资源。
你需要定位到它的dist文件夹——这是所有 HTML、JS、CSS 的存放地。
不同安装方式路径略有差异安装方式典型路径直接下载二进制运行./clawdbot/dist/同级目录下Homebrew 安装macOS/opt/homebrew/opt/clawdbot/share/clawdbot/dist/Linux 手动编译$(pwd)/target/release/clawdbot/dist/不确定启动 Clawdbot 时加-v参数看日志clawdbot -c config.yaml -v日志里会打印类似Serving static files from: /path/to/clawdbot/dist的提示。
3 备份原始文件关键进入dist目录后立刻执行cp -r index.html index.html.bak cp -r assets/ assets.bak/汉化和主题修改本质是改 HTML 和 JS 文件。
一旦出错双击.bak就能秒级回滚。
别怕改但一定要留退路。
第一步Web 界面全量汉化非插件纯本地生效Clawdbot 前端使用 Vue 3 Vite 构建语言切换靠i18n模块驱动。
它默认只内置英文en-US但预留了中文支持入口——我们只需补全zh-CN语言包并告诉页面加载它。
1 创建中文语言包文件在dist目录下新建文件夹locales/再在里面创建zh-CN.json{ common: { send: 发送, clear: 清空对话, settings: 设置, model: 模型, temperature: 温度, max_tokens: 最大输出长度, system_prompt: 系统提示词 }, chat: { input_placeholder: 请输入你的问题或指令..., thinking: 思考中..., no_response: 未收到响应请检查网络或后端状态 }, sidebar: { new_chat: 新建对话, history: 历史记录, export: 导出对话 }, settings: { appearance: 外观, language: 语言, theme: 主题, dark: 深色, light: 浅色, auto: 跟随系统 } }这个文件覆盖了界面上 95% 的文字节点。
你完全可以直接复制粘贴使用无需额外编译。
2 修改主页面加载逻辑打开dist/index.html找到script typemodule src/assets/index-*.js这一行文件名带哈希类似index-abc
js。
在它上方插入以下代码script // 强制启用中文语言包 window.__CLAWDBOT_LOCALE__ zh-CN; // 加载中文翻译 fetch(/locales/zh-CN.json) .then(r r.json()) .then(data { window.__CLAWDBOT_I18N__ data; }) .catch(e console.warn(加载中文语言包失败:, e)); /script效果刷新页面后所有按钮、标签、提示语自动变为中文且不依赖后端接口纯前端生效。
3 验证汉化结果刷新http://localhost:18789你会看到左侧边栏“New Chat” → “新建对话”“History” → “历史记录”输入框下方“Send” → “发送”“Clear” → “清空对话”设置弹窗“Appearance” → “外观”“Language” → “语言”没有乱码、没有漏翻、没有英文残留——说明汉化成功。
第二步自由切换深色/浅色/自动主题三套 CSS 一键切换Clawdbot 默认只提供深色主题dark但它的 CSS 架构是模块化的支持多主题注入。
我们不用改源码只需准备三套轻量 CSS并用 JS 控制 class 切换。
1 编写三套主题 CSS在dist/下新建文件夹themes/然后创建三个文件themes/light.css纯白底 灰字:root { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --accent-color: #0d6efd; }themes/dark.css原生深色增强对比:root { --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #e0e0e0; --text-secondary: #9e9e9e; --border-color: #333; --accent-color: #bb8f00; }themes/auto.css跟随系统自动响应media (prefers-color-scheme: dark) { :root { --bg-primary: #121212; --bg-secondary: #1e1e1e; --text-primary: #e0e0e0; --text-secondary: #9e9e9e; --border-color: #333; --accent-color: #bb8f00; } } media (prefers-color-scheme: light) { :root { --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --accent-color: #0d6efd; } }
2 注入主题切换逻辑回到dist/index.html在刚才插入的script标签下方再加一段link idtheme-link relstylesheet href/themes/dark.css script function setTheme(theme) { const link document.getElementById(theme-link); if (theme light) link.href /themes/light.css; else if (theme dark) link.href /themes/dark.css; else if (theme auto) link.href /themes/auto.css; // 保存到 localStorage下次打开自动恢复 localStorage.setItem(clawdbot-theme, theme); } // 页面加载时读取上次选择 const savedTheme localStorage.getItem(clawdbot-theme) || dark; setTheme(savedTheme); // 提供给控制台或后续扩展调用 window.changeTheme setTheme; /script
3 在设置页添加切换按钮可选但推荐打开dist/assets/index-*.js找最新哈希的搜索Settings或appearance定位到设置面板渲染逻辑。
在语言选项下方手动插入div classsetting-group label主题/label div classradio-group labelinput typeradio nametheme valuedark onchangechangeTheme(dark) 深色/label labelinput typeradio nametheme valuelight onchangechangeTheme(light) 浅色/label labelinput typeradio nametheme valueauto onchangechangeTheme(auto) 跟随系统/label /div /div小技巧如果不想改 JS也可以直接在浏览器控制台临时执行changeTheme(light)切换适合快速测试。
第三步配置实用快捷键告别鼠标依赖Clawdbot 默认只支持CtrlEnter发送但我们日常高频操作远不止这一项。
下面这组快捷键已在真实使用中验证两周零冲突、无延迟、符合中文用户习惯快捷键功能说明CtrlEnter发送消息原生支持无需改动CtrlK聚焦输入框光标秒回输入区比鼠标快 3 倍CtrlShiftK清空当前对话替代点击“清空对话”按钮CtrlL新建对话左侧边栏“新建对话”的快捷入口CtrlH展开/收起历史记录减少鼠标移动距离
1 注入快捷键监听脚本在dist/index.html的/body标签前加入script document.addEventListener(keydown, (e) { // 只在页面有焦点时生效避免影响地址栏等 if (document.activeElement ! document.body) return; if (e.ctrlKey !e.shiftKey e.key k) { e.preventDefault(); const input document.querySelector(textarea[placeholder*输入]); if (input) input.focus(); } if (e.ctrlKey e.shiftKey e.key k) { e.preventDefault(); const clearBtn Array.from(document.querySelectorAll(button)).find(b b.textContent.includes(清空) || b.textContent.includes(Clear)); if (clearBtn) clearBtn.click(); } if (e.ctrlKey e.key l) { e.preventDefault(); const newChatBtn Array.from(document.querySelectorAll(button)).find(b b.textContent.includes(新建) || b.textContent.includes(New)); if (newChatBtn) newChatBtn.click(); } if (e.ctrlKey e.key h) { e.preventDefault(); const sidebarToggle document.querySelector(.sidebar-toggle); if (sidebarToggle) sidebarToggle.click(); else { // 若无 toggle则尝试点击历史标题 const historyHeader document.querySelector([data-testidhistory-header]); if (historyHeader) historyHeader.click(); } } }); /script
2 使用效果实测按CtrlK光标瞬间跳入输入框无需挪手按CtrlShiftK当前对话立即清空无二次确认弹窗Clawdbot 原生逻辑已支持静默清空按CtrlL左侧自动展开新对话卡片比点鼠标省
8 秒按CtrlH历史侧边栏收放自如阅读长对话时一键隐藏干扰项。
所有快捷键均绕过浏览器默认行为如CtrlK原为地址栏聚焦确保不与系统冲突。
进阶技巧让 Qwen
B 更懂你汉化、主题、快捷键只是“表”真正让 Qwen
B 发挥实力的是“里”。
这里分享三个不写文档但极实用的配置技巧
1 系统提示词预设让每次对话更专业Clawdbot 设置页有System Prompt输入框。
别空着直接填入你是一名资深中文技术顾问专注 AI 工具链落地。
回答简洁、准确、带具体示例避免抽象描述。
优先使用中文术语首次出现时括号标注英文。
不主动提问除非必要。
效果Qwen
B 会自动以该角色应答生成内容更贴近工程实践而非通用闲聊。
2 温度值微调平衡创意与稳定temperature
3适合写文档、
总结、代码注释逻辑严谨复现性强temperature
7适合头脑风暴、文案润色、多角度分析适度发散不胡说temperature
0慎用仅用于创意生成如广告 slogan、故事开头。
建议把
3设为默认需要创意时再手动调高。
3 对话上下文管理防“失忆”Qwen
B 支持 32K 上下文但 Clawdbot 默认只传最近 10 轮。
在config.yaml中增加backend: max_history: 20 include_system_prompt: true重启服务后模型能记住更长的对话脉络连续追问不再答非所问。
7.
总结你已拥有专属中文 AI 工作台回顾一下我们完成了三件真正提升日常效率的事汉化不是装插件、不是切语言开关而是让整个界面原生显示中文从按钮到错误提示无一遗漏主题三套 CSS 自由切换深色护眼、浅色清爽、自动随系统改一个localStorage值就能永久生效快捷键5 个高频操作全部键盘化手不离键盘节奏感拉满这才是本地大模型该有的丝滑体验。
这不是一次“技术炫技”而是一次面向真实工作流的体验打磨。
Qwen
B 的能力早已在线缺的只是一个顺手、可信、属于你的交互界面。
现在关掉教程页面打开http://localhost:18789按CtrlK输入第一句中文提问——你和这台属于自己的 AI 助手正式开始合作。