التجاوزات اليدوية

تجاوز الترجمات التي تم إنشاؤها بواسطة الذكاء الاصطناعي لنص معين باستخدام سمة 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>

الإسبانية والفرنسية واللغات الأخرى تستخدم الترجمة الآلية. الألمانية فقط تستخدم التجاوز الخاص بك.

النص المنسق والاستيفاءات

يتعامل المترجم مع النص المنسق مع العناصر المتداخلة:

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

يتم تطبيق التجاوز على سمة 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 المكوّن لديك.

أفضل الممارسات

استخدم بحذر—دع الذكاء الاصطناعي يتعامل مع معظم الترجمات. تجاوز فقط عند الضرورة:

  • أسماء العلامات التجارية التي لا ينبغي ترجمتها
  • المصطلحات التقنية التي تتطلب ترجمات محددة
  • النصوص القانونية التي تتطلب اعتماداً
  • النصوص التسويقية التي تحتاج إلى مراجعة بشرية

الحفاظ على الاتساق—استخدم التجاوزات لنفس المصطلحات عبر تطبيقك:

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

التحكم في الإصدارات—سلاسل التجاوز موجودة في الكود المصدري الخاص بك، مما يجعل من السهل مراجعتها والتحكم في إصداراتها.

الأسئلة الشائعة

هل يعمل هذا مع مكونات العميل؟ نعم. تعمل التجاوزات مع كل من مكونات الخادم والعميل.

هل يمكنني تجاوز السمات مثل aria-label؟ نعم. ينطبق التجاوز على النص القابل للترجمة سواء كان محتوى عنصر أو سمة.

ماذا لو قمت بتجاوز لغة واحدة فقط؟ تستخدم اللغات الأخرى الترجمات بالذكاء الاصطناعي. التجاوزات خاصة بكل لغة—لا حاجة لتحديد جميع اللغات.

هل يمكنني استخدام المتغيرات في التجاوزات؟ نعم. استخدم صيغة {variableName} للاستيفاءات. يحافظ المترجم على عناصر المتغيرات النائبة.

هل تزيد التجاوزات من حجم الحزمة؟ قليلاً. كل تجاوز يضيف بضعة بايتات إلى الحزمة. التأثير ضئيل للاستخدام المعقول.

هل يمكنني التجاوز في بيئة التطوير فقط؟ لا. التجاوزات هي كود مصدري—تنطبق في جميع البيئات. استخدم أداة التطوير للاختبار المؤقت.

الخطوات التالية