Manuelle Overrides

Überschreiben Sie KI-generierte Übersetzungen für bestimmte Texte mithilfe des data-lingo-override-Attributs.

Grundlegende Verwendung

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

Der Compiler verwendet Ihre angegebenen Übersetzungen anstelle von KI-generierten Übersetzungen.

Syntax

Das data-lingo-override-Attribut akzeptiert ein Objekt mit Locale-Codes als Schlüssel:

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

Locale-Codes müssen mit Ihren konfigurierten targetLocales übereinstimmen. Das Attribut wird aus der finalen HTML-Ausgabe entfernt.

Anwendungsfälle

Markennamen

Bewahren Sie Markennamen über alle Locales hinweg:

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

Technische Begriffe

Stellen Sie konsistente technische Terminologie sicher:

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

Rechtstexte

Verwenden Sie zertifizierte Übersetzungen für rechtliche Inhalte:

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

Marketing-Texte

Optimieren Sie Marketing-Botschaften:

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

Partielle Overrides

Überschreiben Sie nur bestimmte Locales – andere Locales verwenden KI-Übersetzungen:

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

Spanisch, Französisch und andere Sprachen verwenden KI-Übersetzungen. Nur Deutsch verwendet Ihre Überschreibung.

Rich Text und Interpolationen

Der Compiler verarbeitet Rich Text mit verschachtelten Elementen:

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

Platzhalter-Syntax:

  • <tagname0>...</tagname0> für die erste Instanz eines Tags
  • <tagname1>...</tagname1> für die zweite Instanz
  • {variableName} für Interpolationen

Der Compiler ordnet <strong0> automatisch wieder <strong> in der Ausgabe zu.

Mehrere verschachtelte Elemente

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

Komplexe Beispiele

Verschachtelte Komponenten

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

Attribute

Funktioniert auch mit String-Attributen:

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

Die Überschreibung gilt für das alt-Attribut.

Locale-Regionscodes

Unterstützt Locale-Regionscodes (z. B. en-US, en-GB):

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

Verwenden Sie Anführungszeichen für Locale-Codes mit Bindestrichen.

TypeScript-Unterstützung

Das Attribut ist bei Verwendung von TypeScript vollständig typisiert:

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

TypeScript validiert, dass die Locale-Codes mit Ihren konfigurierten targetLocales übereinstimmen.

Best Practices

Sparsam verwenden – Lassen Sie die KI die meisten Übersetzungen übernehmen. Überschreiben Sie nur bei Bedarf:

  • Markennamen, die nicht übersetzt werden sollten
  • Fachbegriffe, die spezifische Übersetzungen erfordern
  • Rechtstexte, die eine Zertifizierung erfordern
  • Marketingtexte, die eine menschliche Überprüfung benötigen

Konsistenz wahren – Verwenden Sie Overrides für dieselben Begriffe in Ihrer gesamten App:

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

Versionskontrolle – Override-Strings befinden sich in Ihrem Quellcode und lassen sich dadurch einfach überprüfen und versionieren.

Häufig gestellte Fragen

Funktioniert das mit Client Components? Ja. Overrides funktionieren sowohl mit Server- als auch mit Client Components.

Kann ich Attribute wie aria-label überschreiben? Ja. Der Override gilt für den übersetzbaren Text, unabhängig davon, ob es sich um Element-Content oder ein Attribut handelt.

Was passiert, wenn ich nur ein Locale überschreibe? Andere Locales verwenden KI-Übersetzungen. Overrides gelten pro Locale – Sie müssen nicht alle Locales angeben.

Kann ich Variablen in Overrides verwenden? Ja. Verwenden Sie die {variableName}-Syntax für Interpolationen. Der Compiler behält Variablen-Platzhalter bei.

Erhöhen Overrides die Bundle-Größe? Geringfügig. Jeder Override fügt dem Bundle einige Bytes hinzu. Der Einfluss ist bei vernünftiger Nutzung vernachlässigbar.

Kann ich Overrides nur in der Entwicklung verwenden? Nein. Overrides sind Quellcode – sie gelten in allen Umgebungen. Verwenden Sie das Development-Widget für temporäre Tests.

Nächste Schritte