Ручные переопределения

Переопределяйте переводы, созданные ИИ, для конкретного текста с помощью атрибута data-lingo-override.

Базовое использование

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>
  Lingo.dev
</h1>

Компилятор использует ваши переводы вместо генерации их с помощью ИИ.

Синтаксис

Атрибут data-lingo-override принимает объект, где ключами являются коды локалей:

data-lingo-override={{
  [locale]: "translation",
  ...
}}

Коды локалей должны совпадать с вашими настроенными targetLocales. Атрибут удаляется из итогового HTML.

Примеры использования

Названия брендов

Сохраняйте названия брендов во всех локалях:

<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev", fr: "Lingo.dev" }}>
  Lingo.dev
</h1>

Технические термины

Обеспечьте единообразие технических терминов:

<p data-lingo-override={{ es: "API REST", de: "REST-API", ja: "REST API" }}>
  REST API
</p>

Юридические тексты

Используйте заверенные переводы для юридического контента:

<p data-lingo-override={{
  es: "Todos los derechos reservados. Consulte nuestros términos legales.",
  de: "Alle Rechte vorbehalten. Siehe unsere rechtlichen Bedingungen."
}}>
  All rights reserved. See our legal terms.
</p>

Маркетинговые тексты

Точно настраивайте маркетинговые сообщения:

<h2 data-lingo-override={{
  es: "Traduce tu app en minutos",
  de: "Übersetze deine App in Minuten",
  fr: "Traduisez votre app en quelques minutes"
}}>
  Translate your app in minutes
</h2>

Частичные переопределения

Переопределяйте только отдельные локали — в остальных используются переводы ИИ:

<p data-lingo-override={{ de: "Professionelle Übersetzung" }}>
  Professional translation
</p>

Испанский, французский и другие локали используют AI-переводы. Только для немецкого применяется ваш override.

Rich Text и интерполяции

Компилятор обрабатывает rich text с вложенными элементами:

<p data-lingo-override={{
  es: "Bienvenido <strong0>{name}</strong0>",
  de: "Willkommen <strong0>{name}</strong0>"
}}>
  Welcome <strong>{name}</strong>
</p>

Синтаксис плейсхолдеров:

  • <tagname0>...</tagname0> для первого вхождения тега
  • <tagname1>...</tagname1> для второго вхождения
  • {variableName} для интерполяций

Компилятор автоматически сопоставляет <strong0> обратно с <strong> в выходных данных.

Несколько вложенных элементов

<div data-lingo-override={{
  es: "Tu pedido: <span0>{count}</span0> artículos por <em0>${price}</em0>",
  de: "Deine Bestellung: <span0>{count}</span0> Artikel für <em0>${price}</em0>"
}}>
  Your order: <span>{count}</span> items for <em>${price}</em>
</div>

Сложные примеры

Вложенные компоненты

<section>
  <h1 data-lingo-override={{ es: "Características", de: "Funktionen" }}>
    Features
  </h1>
  <p data-lingo-override={{
    es: "Traduce automáticamente tus componentes React sin cambios de código",
    de: "Übersetze deine React-Komponenten automatisch ohne Code-Änderungen"
  }}>
    Automatically translate your React components without code changes
  </p>
</section>

Атрибуты

Работает и со строковыми атрибутами:

<img
  src="/logo.png"
  alt="Company Logo"
  data-lingo-override={{
    es: "Logo de la Empresa",
    de: "Firmenlogo"
  }}
/>

Override применяется к атрибуту alt.

Коды регионов локалей

Поддерживаются коды регионов локалей (например, en-US, en-GB):

<p data-lingo-override={{
  "en-US": "color",
  "en-GB": "colour",
  "es-ES": "color",
  "es-MX": "color"
}}>
  color
</p>

Используйте кавычки для кодов локалей с дефисами.

Поддержка TypeScript

Атрибут полностью типизирован при использовании TypeScript:

interface OverrideProps {
  "data-lingo-override"?: Record<string, string>;
}

TypeScript проверит, что коды локалей соответствуют вашей настройке targetLocales.

Лучшие практики

Используйте по минимуму — пусть AI переводит всё, кроме особых случаев:

  • Названия брендов, которые не нужно переводить
  • Технические термины, требующие конкретного перевода
  • Юридические тексты, требующие заверения
  • Маркетинговые тексты, которые должен проверить человек

Сохраняйте единообразие — используйте переопределения для одних и тех же терминов по всему приложению:

// Good - consistent brand name
<h1 data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to <span data-lingo-override={{ es: "Lingo.dev", de: "Lingo.dev" }}>Lingo.dev</span></p>

// Bad - inconsistent
<h1 data-lingo-override={{ es: "Lingo.dev" }}>Lingo.dev</h1>
<p>Welcome to Lingo.dev</p> // Missing override

Контроль версий — строки-переопределения находятся в исходном коде, их легко просматривать и контролировать версии.

Часто задаваемые вопросы

Работает ли это с Client Components? Да, переопределения работают и с Server, и с Client Components.

Можно ли переопределять атрибуты, например aria-label? Да, переопределение применяется к переводимому тексту, будь то содержимое элемента или атрибут.

Что если я переопределю только одну локаль? В остальных локалях используются AI-переводы. Переопределения задаются для каждой локали отдельно — не нужно указывать все локали.

Можно ли использовать переменные в переопределениях? Да, используйте синтаксис {variableName} для интерполяций. Компилятор сохраняет плейсхолдеры переменных.

Увеличивают ли переопределения размер бандла? Немного. Каждое переопределение добавляет несколько байт. Для разумного использования это несущественно.

Можно ли переопределять только в режиме разработки? Нет, переопределения — это часть исходного кода, они применяются во всех окружениях. Для временного тестирования используйте dev-виджет.

Дальше