Smartcat 网站翻译器：功能与工作原理

Smartcat网站翻译器 是一款基于脚本的本地化工具，可在不更改CMS、后台或代码库的情况下翻译您的网站。

与创建具有多个URL的独立语言版本网站不同，它直接在浏览器中的渲染页面上进行处理。您只需在网站中添加一小段JavaScript代码，选择目标语言，页面就会自动被翻译并呈现给国际访客。

翻译后的内容存储在CDN上，并在访客加载网站时动态呈现。

由于翻译是在渲染后的网站上进行的，而非在后端进行，因此通常无需工程团队的大力参与即可部署。简而言之，借助 Smartcat，内容和营销团队即可自行处理翻译工作。

Smartcat 的翻译功能归根结底就是——翻译用户在浏览器上看到的页面内容。

当有人访问您的网站时，其浏览器会根据 HTML、CSS 和 JavaScript 渲染页面，这些元素共同构成了最终的视觉效果。

此渲染页面以一种称为DOM（文档对象模型），翻译工具正是基于此进行操作的。

网站中添加了一个简短的 JavaScript 代码片段，该代码会在页面加载时运行。它会检测访问者的语言设置，从 Smartcat 的 CDN 获取相应的翻译内容，并替换页面上的可见文本。用户可以手动切换语言，且在浏览网站时，其语言偏好设置将保持不变。

由于整个翻译系统在浏览器层运行，因此网站后端架构在此并不重要。无论网站是使用 WordPress、Shopify、Webflow、React 前端，还是更早期的旧系统构建的，只要网站能在浏览器中渲染，翻译工具就能正常工作。

此外，脚本在初始页面加载完成后也不会停止运行。现代网站不会在加载时一次性加载所有内容。点击后可能会弹出模态窗口，下拉菜单可能通过 API 获取数据，以及/或表单提交后可能会显示验证信息。

因此，脚本不会只扫描页面一次就停止，而是会持续监听DOM中出现的新文本节点，并在它们渲染时进行翻译。

Smartcat 的设置过程比你想象的要快。

输入网站网址并选择目标语言后，项目即刻启动。随后，Smartcat 会通过代理渲染后的页面并进行翻译，在其界面内生成网站的预览版本。

接下来，内容团队可以 审阅已翻译的页面，进行修改并批准最终版本。

翻译内容一经批准，Smartcat 就会将其作为轻量级的 JSON 资源发布到其 CDN 上。然后，您只需将 一段 JavaScript 代码片段添加到网站页面的页眉中，即可在正式网站上启用该翻译功能。

此后，每当用户访问该网站时，系统就会从CDN获取翻译后的内容，并以用户首选的语言呈现给用户。

您可以查看 分步设置指南。

与传统的翻译方法相比，Smartcat 的架构具有多项关键优势。其中包括：

传统网站翻译工具最令人沮丧的问题之一就是其覆盖范围。主页内容虽然能被翻译，但交互式元素往往无法被翻译。

表单仍保留原语言，状态动词保持原样，下拉菜单和验证信息也未被翻译。对访问者而言，该网站看起来只是部分翻译了。

由于 Smartcat 的翻译器直接在渲染后的 DOM 上进行处理，因此它能够捕获页面初始加载后出现的内容。这包括动态渲染的 UI 元素，例如模态框、弹出窗口、通知、下拉菜单，以及页面进入交互状态后由 JavaScript 框架渲染的任何组件。

因此，该脚本不再翻译页面的静态快照，而是持续监听界面中出现的新文本，并在渲染时实时进行翻译。

Smartcat 通过内容分发网络（CDN）提供已发布的翻译内容，而非直接从其服务器提供。

因此，翻译资源体积小巧、经过缓存，并从靠近访问者的边缘节点进行分发，这使得即使在大型多语言网站上，内容也能快速呈现。

这也意味着系统具备韧性。一旦翻译发布，即使Smartcat出现故障且暂时无法访问，翻译仍会继续生效。

该系统也不要求每页都必须提前翻译。

当访客访问未翻译的内容时，该脚本可按需生成翻译、将其缓存，并在后续访问中重复使用。因此，此后每位访客都能立即获得缓存版本。Smartcat 将此机制称为 “众包”

唯一的取舍在于，首次访问新内容或更新内容时，会产生微小的延迟成本，即翻译延迟。

Smartcat 支持 多家翻译服务提供商，包括 Google、DeepL、Gemini、ChatGPT、Claude、Apple、Amazon 和 Microsoft，并运用其智能算法为每种语言对选择最合适的翻译服务提供商。

网站通常会使用特定的术语、品牌专有名词和行业行话，这些内容需要保持一致性。但在翻译过程中，这些术语往往容易丢失。

Smartcat 支持翻译记忆库，并允许您 在不同语言间一致地复用特定术语。您还可以通过为大型语言模型引擎设置自定义提示词，对翻译的语气和风格进行微调。

网站中存在一些在各页面中重复出现的区域，例如页眉、页脚、导航菜单和横幅。

st-shared-section 属性允许团队定义共享区域，从而使重复出现的元素只需翻译一次，即可在所有地方一致地重复使用。

除了可见的正文内容外，Smartcat 还提供 翻译影响 SEO 的元素的选项。

网站的元数据，例如页面标题、描述、图片替代文本、占位符文本、ARIA 标签和 hreflang 标签，也会被翻译。

某些网站可能包含不应进行翻译处理的个人或敏感信息。

为解决这一问题，Smartcat 允许网站所有者明确将页面中的某些部分排除在翻译范围之外。

标记了 st-ignore 属性的元素及其内部内容将被翻译系统完全跳过。 这为团队提供了一种方法，可将账户数据、支付详情、内部工具或其他敏感界面区域从翻译工作流中隔离出来。

希望对数据处理进行更严格控制的网站，也可以完全禁用按需翻译功能，仅依赖预先发布的翻译资源。

每种翻译模型都存在取舍。Smartcat 的基于脚本的方法虽然具有我们上面讨论过的若干优势，但也存在一些限制，这些限制主要源于其运行的浏览器环境。

最大的障碍之一是跨域 iframe。

如果网站嵌入了第三方预订工具、支付表单、嵌入式日程安排工具或外部小工具，浏览器安全规则会阻止脚本访问中的内容。

这一限制适用于任何基于浏览器的翻译系统。唯一的解决方法是在 iframe 中单独安装一个翻译脚本，但这仅在您同时控制嵌入源的情况下才可行。

版面布局是另一个常见的特殊情况，对于阿拉伯语或希伯来语等从右向左书写的语言而言尤为如此。Smartcat 可以利用浏览器原生的 RTL 支持来切换页面方向，但无法重写网站的 CSS。

基于固定宽度容器、硬编码定位或左右对齐假设构建的布局，在面对较长的翻译文本或镜像界面时，往往会出现显示异常。

在德语或法语等语言中，文本扩展也会出现同样的问题。上下文编辑器有助于在审阅过程中发现这些问题，但修复底层布局超出了Smartcat的能力范围。网站所有者或工程团队需要解决布局问题。

当访客访问尚未翻译的内容时，系统会在提供该内容之前生成并缓存其翻译版本。

后续访问者会立即收到缓存版本，但首次访问可能会出现短暂延迟。

像 Cloudflare 这样的机器人防护系统有时会在设置过程中阻止 Smartcat 的预览加载，因为这些请求来自 AWS IP 地址，看起来像是自动化流量。解决方法是将 Smartcat 的静态 IP 地址加入白名单。

如果翻译后的 HTML 结构未被正确保留，使用 React 等框架构建的单页应用程序有时会遇到渲染冲突。

那些向DOM注入内容的浏览器扩展程序也会产生干扰，而翻译层会尝试处理这些干扰。Smartcat提供了针对已知扩展程序的过滤器以及源语言检测功能，以减轻这种影响。

Smartcat 网站翻译工具并非适用于所有网站。

它最适合需要支持多种语言却无需重建现有基础设施的团队。

这些可能包括面向国际用户的SaaS产品、内容密集型网站，以及希望拓展新市场但又不希望本地化工作受制于工程发布周期的企业。

对于只有寥寥数页或仅支持一两种目标语言的小型网站，通常使用一个简单的CMS插件或手动工作流程就足够了。

随着内容量、语言数量和更新频率的增加，像Smartcat这样的浏览器层翻译系统的优势便显而易见。

因此，如果您正在为网站寻找翻译工具，又不想费心修改代码或管理重复的URL， 不妨试试 Smartcat 网站翻译器 。