企业官网建设流程全解析

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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=
• 控制台（建 Key）：https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite
• API Keys 页面：https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite
• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

API 基地址统一用https://taotoken.net/api，这个地址不加 UTM 参数，直接写进配置。Key 建议放环境变量，不要硬编码进仓库：

export TAOTOKEN_API_KEY="sk-你的Key"

注意：Key 泄露等于额度被人白用。本地用.env并加进.gitignore，CI 里用平台的 Secret 管理，别提交到 Git。

如果你只是想在浏览器里先验证模型能不能通，可以用模型对话页面发一条测试消息，确认 Key 有效再往下走：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite

3. 项目初始化与 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.json

Claude 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_URL，Key 用 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 = 2

api_key_env指向环境变量名而不是 Key 本身，这样配置可以安全提交。batch_size控制每次请求合并多少条文案，太大容易超时，太小请求数多，20 条是个比较稳的起点。

4. 可复制的翻译脚本与流程编排

4.1 读取源文件

源文件用扁平 JSON，key 是文案 ID，value 是中文：

{ "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 keys

5. 端到端验证与成功结果

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']}</h1><button>${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_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite

6. 本篇常见错排查

401 / invalid api key：Key 没读到或写错。先确认echo $TAOTOKEN_API_KEY有值，再检查 settings.json 里ANTHROPIC_AUTH_TOKEN是否和 Key 一致。Key 前后有空格也会报错。

404 / not found：Base 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调到 60，retry设 2，失败批次自动重试。

Claude Code 不生效：settings.json 位置不对。它要放在项目根目录的.claude/settings.json，改完重启 Claude Code 会话才会重新读取环境变量。

排障和接入细节以官方文档为准，遇到报错先对照文档里的请求示例核对 header 和路径：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

整套流程跑下来，最花时间的其实是 prompt 调优和 key 校验，而不是接模型本身。把batch_size和重试策略调稳之后，加一门新语言只需要在 config.toml 的targets里加一个代码，重跑脚本就行。