ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

用 Claude Code 搭建多语言网站翻译工具:出海应用开发全流程实战教程(TaoToken 配置版)

用 Claude Code 搭建多语言网站翻译工具:出海应用开发全流程实战教程(TaoToken 配置版) 1. 出海翻译工具的真实开发场景做多语言网站最烦的不是写页面而是内容翻译的工程化。一个出海应用从 0 到 1通常要处理 landing page 文案、产品描述、帮助中心、邮件模板、甚至 App 内的动态字符串。手工复制到翻译平台再贴回来改一次文案就要重来一遍版本一多直接失控。我这次要搭的是一个「内容源文件进、多语言产物出」的翻译工具读取项目里的 JSON / Markdown / CSV 文案按目标语言批量调用模型翻译写回对应 locale 目录最后跑一次端到端验证确认页面能正常渲染。主力开发环境用 Claude Code模型通道统一走 TaoToken这样 Key 和 API 地址只维护一份切换模型不用改业务代码。适合谁跟做有 Node.js 基础、正在做或准备做出海站点的前端/全栈同学已经用过 Claude Code 但还没把它接进真实翻译流水线的人以及想把手动翻译流程自动化、又不想自己维护多套模型 SDK 的团队。整篇按「项目初始化 → TaoToken 接入 → 配置骨架 → 翻译脚本 → 端到端验证 → 排错」推进命令和配置都能直接复制。技术部分占大头拿 Key 只是其中一步。2. TaoToken 前置统一 Key 与 API 通道Claude Code 默认走 Anthropic 官方通道但实际项目里我们往往要对比不同模型、控制成本、或者让翻译脚本和 Claude Code 共用一套凭证。TaoToken 在这里的角色是统一入口一个 Key、一个 API 地址同时服务 Claude Code 和你的翻译脚本。先拿到凭证。打开官网注册后进入控制台在 API Keys 页面创建一个 Key复制保存。注意 Key 只在创建时完整显示一次丢了就重建。官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content控制台建 Keyhttps://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewriteAPI Keys 页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewriteAPI 基地址统一用https://taotoken.net/api这个地址不加 UTM 参数直接写进配置。Key 建议放环境变量不要硬编码进仓库export TAOTOKEN_API_KEYsk-你的Key注意Key 泄露等于额度被人白用。本地用.env并加进.gitignoreCI 里用平台的 Secret 管理别提交到 Git。如果你只是想在浏览器里先验证模型能不能通可以用模型对话页面发一条测试消息确认 Key 有效再往下走https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite3. 项目初始化与 Claude Code 配置骨架3.1 初始化项目建一个 Node.js 项目翻译脚本和前端 demo 放一起方便端到端验证mkdir i18n-translator cd i18n-translator npm init -y npm install dotenv glob mkdir -p locales/zh locales/en locales/fr scripts src目录约定locales/zh放中文源文件locales/en、locales/fr放翻译产物scripts放翻译脚本src放一个最小页面用来验证渲染。3.2 Claude Code 的 settings.jsonClaude Code 通过环境变量读取 API 地址和 Key。在项目根目录建.claude/settings.json把通道指向 TaoToken{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的Key, ANTHROPIC_MODEL: claude-sonnet-4-5 } }如果你不想把 Key 写进文件可以只保留ANTHROPIC_BASE_URLKey 用 shell 环境变量注入。实测下来把 Base URL 和 Key 都放 settings.json 最省事但记得这个文件不要进公开仓库。3.3 翻译脚本的 config.toml翻译脚本用 TOML 管理语言和模型配置和 Claude Code 的 settings.json 解耦[api] base_url https://taotoken.net/api api_key_env TAOTOKEN_API_KEY model claude-sonnet-4-5 timeout_seconds 60 [languages] source zh targets [en, fr] [paths] source_dir locales/zh output_dir locales file_pattern *.json [translate] batch_size 20 retry 2api_key_env指向环境变量名而不是 Key 本身这样配置可以安全提交。batch_size控制每次请求合并多少条文案太大容易超时太小请求数多20 条是个比较稳的起点。4. 可复制的翻译脚本与流程编排4.1 读取源文件源文件用扁平 JSONkey 是文案 IDvalue 是中文{ home.title: 让出海更简单, home.cta: 免费开始使用, pricing.monthly: 按月付费 }读取逻辑用 glob 扫目录合并成一个待翻译对象// scripts/load.js import { glob } from glob; import { readFile } from node:fs/promises; export async function loadSource(dir, pattern) { const files await glob(${dir}/${pattern}); const merged {}; for (const file of files) { const raw await readFile(file, utf-8); Object.assign(merged, JSON.parse(raw)); } return merged; }4.2 调用 TaoToken 翻译核心是把一批文案拼成结构化 prompt让模型返回严格 JSON避免解析失败// scripts/translate.js export async function translateBatch(entries, targetLang, cfg) { const payload Object.fromEntries(entries); const prompt 你是专业本地化译者。把下面的 JSON 值翻译成 ${targetLang} 保持 key 不变只翻译 value返回严格 JSON不要额外解释。 ${JSON.stringify(payload, null, 2)}; const res await fetch(${cfg.api.base_url}/v1/messages, { method: POST, headers: { content-type: application/json, x-api-key: process.env[cfg.api.api_key_env], anthropic-version: 2023-06-01 }, body: JSON.stringify({ model: cfg.api.model, max_tokens: 4096, messages: [{ role: user, content: prompt }] }) }); if (!res.ok) throw new Error(API ${res.status}: ${await res.text()}); const data await res.json(); const text data.content.map((c) c.text || ).join(); return JSON.parse(text.replace(/json|/g, ).trim()); }这里有个坑模型有时会把 JSON 包在代码块里所以返回后要剥掉 json 标记再 parse。加一层 try/catch 和重试单批失败不影响整体。4.3 编排与写回把加载、分批、翻译、写回串起来// scripts/index.js import { readFile } from node:fs/promises; import { parse } from smol-toml; import { loadSource } from ./load.js; import { translateBatch } from ./translate.js; import { writeFile, mkdir } from node:fs/promises; const cfg parse(await readFile(config.toml, utf-8)); const source await loadSource(cfg.paths.source_dir, cfg.paths.file_pattern); const entries Object.entries(source); for (const lang of cfg.languages.targets) { const out {}; for (let i 0; i entries.length; i cfg.translate.batch_size) { const batch entries.slice(i, i cfg.translate.batch_size); const translated await translateBatch(batch, lang, cfg); Object.assign(out, translated); } await mkdir(${cfg.paths.output_dir}/${lang}, { recursive: true }); await writeFile( ${cfg.paths.output_dir}/${lang}/common.json, JSON.stringify(out, null, 2) ); console.log([done] ${lang}: ${Object.keys(out).length} keys); }跑起来node scripts/index.js预期输出类似[done] en: 3 keys [done] fr: 3 keys5. 端到端验证与成功结果5.1 验证翻译产物先看产物文件是否正确cat locales/en/common.json应该看到 key 不变、value 变成英文{ home.title: Make going global easier, home.cta: Start for free, pricing.monthly: Pay monthly }5.2 最小页面渲染验证写一个最小页面按语言加载对应 JSON 并渲染确认整条链路通// src/render.js import { readFile } from node:fs/promises; export async function render(lang) { const dict JSON.parse( await readFile(locales/${lang}/common.json, utf-8) ); return h1${dict[home.title]}/h1button${dict[home.cta]}/button; } console.log(await render(en)); console.log(await render(fr));运行后能看到英文和法文两套标题按钮说明「源文件 → 模型翻译 → 产物 → 渲染」全流程跑通。这一步过了再往项目里接框架、加语言、接 CI 都是重复劳动。5.3 用 Claude Code 继续迭代到这一步你可以直接在 Claude Code 里让它帮你扩展加 CSV 解析、加术语表约束、加翻译缓存避免重复请求。长期做编码和 Agent 任务的话Coding Plan 比按量更划算适合把 Claude Code 当日常开发环境用https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite6. 本篇常见错排查401 / invalid api keyKey 没读到或写错。先确认echo $TAOTOKEN_API_KEY有值再检查 settings.json 里ANTHROPIC_AUTH_TOKEN是否和 Key 一致。Key 前后有空格也会报错。404 / not foundBase URL 写错。Claude Code 用https://taotoken.net/api脚本里拼的是/v1/messages别重复拼成/api/v1/v1/messages。JSON 解析失败模型返回带了说明文字或代码块。在 prompt 里强调「只返回 JSON」并在代码里剥掉 json 标记仍失败就调小batch_size单批文案越少越稳。翻译结果 key 丢失模型偶尔会漏 key。写回前做一次校验对比源 key 和目标 key 数量缺的单独重试const missing Object.keys(source).filter((k) !(k in out)); if (missing.length) console.warn(missing keys:, missing);请求超时batch_size太大或网络抖动。把timeout_seconds调到 60retry设 2失败批次自动重试。Claude Code 不生效settings.json 位置不对。它要放在项目根目录的.claude/settings.json改完重启 Claude Code 会话才会重新读取环境变量。排障和接入细节以官方文档为准遇到报错先对照文档里的请求示例核对 header 和路径https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite整套流程跑下来最花时间的其实是 prompt 调优和 key 校验而不是接模型本身。把batch_size和重试策略调稳之后加一门新语言只需要在 config.toml 的targets里加一个代码重跑脚本就行。
返回列表