Remplacements manuels

Remplacez les traductions générées par IA pour un texte spécifique en utilisant l'attribut data-lingo-override.

Utilisation de base

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

Le compilateur utilise vos traductions spécifiées au lieu de les générer avec l'IA.

Syntaxe

L'attribut data-lingo-override accepte un objet avec des codes de langue comme clés :

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

Les codes de langue doivent correspondre à vos targetLocales configurés. L'attribut est supprimé de la sortie HTML finale.

Cas d'usage

Noms de marque

Préservez les noms de marque dans toutes les langues :

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

Termes techniques

Assurez une terminologie technique cohérente :

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

Texte juridique

Utilisez des traductions certifiées pour le contenu juridique :

<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>

Contenu marketing

Affinez les messages marketing :

<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>

Remplacements partiels

Remplacez uniquement des langues spécifiques — les autres langues utilisent les traductions IA :

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

L'espagnol, le français et d'autres langues utilisent des traductions IA. Seul l'allemand utilise votre remplacement.

Texte enrichi et interpolations

Le compilateur gère le texte enrichi avec des éléments imbriqués :

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

Syntaxe des espaces réservés :

  • <tagname0>...</tagname0> pour la première instance d'une balise
  • <tagname1>...</tagname1> pour la deuxième instance
  • {variableName} pour les interpolations

Le compilateur mappe automatiquement <strong0> vers <strong> dans la sortie.

Éléments imbriqués multiples

<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>

Exemples complexes

Composants imbriqués

<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>

Attributs

Fonctionne également avec les attributs de type chaîne :

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

Le remplacement s'applique à l'attribut alt.

Codes de région de langue

Prend en charge les codes de région de langue (par exemple, en-US, en-GB) :

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

Utilisez des guillemets pour les codes de langue avec des traits d'union.

Support TypeScript

L'attribut est entièrement typé lors de l'utilisation de TypeScript :

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

TypeScript validera que les codes de langue correspondent à vos targetLocales configurés.

Bonnes pratiques

À utiliser avec parcimonie — Laissez l'IA gérer la plupart des traductions. Ne remplacez que lorsque c'est nécessaire :

  • Noms de marque qui ne doivent pas être traduits
  • Termes techniques nécessitant des traductions spécifiques
  • Texte juridique nécessitant une certification
  • Contenu marketing nécessitant une révision humaine

Maintenez la cohérence — Utilisez les remplacements pour les mêmes termes dans toute votre application :

// 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

Contrôle de version — Les chaînes remplacées sont dans votre code source, ce qui facilite leur révision et leur gestion de version.

Questions fréquentes

Cela fonctionne-t-il avec les composants client ? Oui. Les remplacements fonctionnent avec les composants serveur et client.

Puis-je remplacer des attributs comme aria-label ? Oui. Le remplacement s'applique au texte traduisible, qu'il s'agisse du contenu d'un élément ou d'un attribut.

Que se passe-t-il si je ne remplace qu'une seule locale ? Les autres locales utilisent les traductions IA. Les remplacements sont par locale — pas besoin de spécifier toutes les locales.

Puis-je utiliser des variables dans les remplacements ? Oui. Utilisez la syntaxe {variableName} pour les interpolations. Le compilateur préserve les espaces réservés aux variables.

Les remplacements augmentent-ils la taille du bundle ? Légèrement. Chaque remplacement ajoute quelques octets au bundle. L'impact est négligeable pour une utilisation raisonnable.

Puis-je remplacer uniquement en développement ? Non. Les remplacements font partie du code source — ils s'appliquent dans tous les environnements. Utilisez le widget de développement pour les tests temporaires.

Prochaines étapes