Alpha
Lingo.dev Compiler 目前仍处于 alpha 阶段。它尚不稳定,不建议用于生产环境,且 API 可能会在版本迭代之间发生变化。
data-lingo-override 属性可让你精确控制特定内容的翻译。当你需要为品牌名称、法律文本或营销标题指定准确译法时,只需将该属性添加到任意 JSX 元素上,编译器就会优先使用你提供的译文,而不是通过 AI 生成。
基本用法#
传入一个将 locale 代码映射到译文的对象:
tsx
<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen", fr: "Bienvenue" }}>
Welcome
</h1>对于每个已指定的 locale,编译器都会使用覆盖值;未在覆盖对象中列出的 locale,则照常由编译器生成翻译。
覆盖的工作方式#
1
Compiler 遇到带有 data-lingo-override 的 JSX 元素
在 AST 分析阶段,编译器会识别出元素上的 data-lingo-override 属性。
2
提取覆盖值
编译器会从属性值中读取 locale 到译文的映射关系。
3
覆盖优先生效
对于覆盖对象中存在的每个 locale,编译器都会使用你提供的译文,并跳过这些 locale 的 AI 翻译;不在覆盖对象中的 locale 则照常翻译。
适用场景#
| 场景 | 为什么要覆盖 | 示例 |
|---|---|---|
| 品牌名称 | AI 可能会本地化本应跨语言保持一致的名称 | data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }} |
| 营销文案 | 需要保留由文案精心打磨的特定表达 | data-lingo-override={{ es: "Tu motor de localizacion" }} |
| 法律文本 | 合规要求往往需要一字不差的表述 | data-lingo-override={{ de: "Datenschutzerklarung" }} |
| 习语与双关 | 这类文字游戏更依赖人工创意 | data-lingo-override={{ fr: "C'est la vie" }} |
| 有严格字符限制的 UI | AI 翻译可能会超出可用空间 | data-lingo-override={{ ja: "OK" }} |
示例#
段落文本#
tsx
<p data-lingo-override={{ es: "Crea un motor de localizacion en Lingo.dev" }}>
Create a localization engine on Lingo.dev
</p>属性#
覆盖仅作用于元素的文本内容。对于 placeholder、alt 或 aria-label 这类可翻译属性,编译器会通过标准的属性翻译流程单独处理。
部分覆盖#
你不需要为每个目标 locale 都提供覆盖值,只需为需要手动控制的 locale 提供即可:
tsx
<h2 data-lingo-override={{ ja: "はじめに" }}>
Getting Started
</h2>在这个示例中,日语会使用覆盖值,而其他所有目标 locale 仍会收到 AI 生成的翻译。
何时使用覆盖,何时使用其他方式#
| 方式 | 适用时机 |
|---|---|
data-lingo-override | 适用于你明确知道准确译法的特定元素。 |
| Glossary (Lingo.dev Engine) | 适用于需要在整个应用中保持翻译一致的术语。 |
| Brand Voice (Lingo.dev Engine) | 适用于希望统一应用到所有翻译中的语气与风格偏好。 |
| 自定义提示词 | 适用于面向所有内容的通用翻译指令。 |
覆盖是最细粒度的选项——只针对单个元素生效。若你希望在整个项目中保持一致性,建议改用 Lingo.dev 本地化引擎中的 glossary 或 brand voice。
