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

أسئلة وأجوبة شائعة حول مُترجم Lingo.dev.

هل يمكنني ترجمة النصوص الحرفية؟

يتبع مُترجم Lingo.dev اتفاقية أن كل شيء في JSX قابل للترجمة. النصوص الحرفية خارج مكونات JSX لا تتم ترجمتها بشكل مقصود.

السلوك الحالي:

// هذا لن تتم ترجمته
const message = "Hello world";
const errorText = "Something went wrong";

// هذا سيتم ترجمته
function Component() {
  return <h1>Hello world</h1>;
}

جعل النصوص الحرفية قابلة للترجمة:

يمكنك جعل النصوص الحرفية قابلة للترجمة عن طريق تغليفها في أجزاء JSX:

// قبل: غير قابل للترجمة
const message = "Hello world";

// بعد: قابل للترجمة باستخدام الأجزاء
const message = <>Hello world</>;

// الاستخدام في المكون الخاص بك
function Component() {
  return <div>{message}</div>;
}

نهج بديل:

// للرسائل الديناميكية
function getLocalizedMessage() {
  return <>Something went wrong</>;
}

// للنص الشرطي
const statusText = isError ? <>Error occurred</> : <>Success</>;

تضمن هذه الاتفاقية سلوك ترجمة متسق مع الحفاظ على حدود واضحة بين المحتوى القابل للترجمة وغير القابل للترجمة.

نحن نستكشف طرقًا لتوسيع هذا السلوك لدعم المزيد من حالات الاستخدام في المستقبل. انضم إلى Discord الخاص بنا لمناقشة الأنماط المحددة التي ترغب في رؤية دعمها.

لماذا لا تتم ترجمة المكونات المعتمدة على المجموعات؟

يواجه المُترجم حاليًا قيودًا مع المكونات المعتمدة على Adobe React-Aria/React-Stately التي تتوقع مجموعات كعناصر فرعية. المحتوى النصي المباشر في عناصر المجموعة لا تتم ترجمته تلقائيًا.

هذا يؤثر على مكونات مثل Select وListbox وMenu ومكونات مماثلة معتمدة على المجموعات من مكتبات مثل HeroUI وNextUI وتطبيقات React-Aria الأخرى.

السلوك الحالي:

import { Select, SelectItem } from "@heroui/react";

export default function SelectExample() {
  return (
    <Select label="Select an animal">
      {/* هذا النص لن تتم ترجمته */}
      <SelectItem key="cat" textValue="Cat">
        Cat
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        Dog
      </SelectItem>
    </Select>
  );
}

الحل البديل:

قم بتغليف المحتوى النصي في أجزاء JSX لجعله قابلاً للترجمة:

import { Select, SelectItem } from "@heroui/react";

export default function SelectWithWorkaround() {
  return (
    <Select label="Select an animal">
      {/* هذا النص سيتم ترجمته */}
      <SelectItem key="cat" textValue="Cat">
        <>Cat</>
      </SelectItem>
      <SelectItem key="dog" textValue="Dog">
        <>Dog</>
      </SelectItem>
    </Select>
  );
}

هذا القيد يؤثر على أي مكون يستخدم نمط المجموعة من React-Aria حيث يتم تمرير المحتوى النصي مباشرة كعناصر فرعية لعناصر المجموعة. نحن نعمل على تحسين دعم المُترجم لهذه الحالات.

ما هي أطر العمل المدعومة؟

مترجم Lingo.dev يدعم حالياً أطر عمل React التالية:

  • Next.js (موجه التطبيق فقط)
  • React Router الإصدار 6+
  • Remix (أحدث إصدار)
  • Vite + React

نرحب بالمساهمين المهتمين بتنفيذ دعم المترجم لمنصات أخرى. انضم إلى Discord الخاص بنا لمناقشة استراتيجيات التنفيذ.

هل يمكنني إضافة المزيد من اللغات؟

نعم! يمكنك توسيع دعم اللغات من خلال تكوين نماذج مخصصة مباشرة في تكوين المترجم الخاص بك:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "pt", "it"],
  models: {
    "*:pt": "qwen/qwen3-32b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "qwen/qwen3-32b",
  },
};

lingoCompiler.next(compilerConfig)(nextConfig);

راجع التكوين المتقدم للحصول على التفاصيل.

هل يمكنني استخدام موجهات مخصصة؟

نعم! يمكنك تخصيص موجهات الترجمة مباشرة في تكوين المترجم الخاص بك:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator specializing in technical documentation. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE} while maintaining technical accuracy.",
};

للمسارد المخصصة، قم بتضمين تعريفات المصطلحات في الموجه الخاص بك. راجع الموجه الافتراضي لأفضل الممارسات.

هل يمكنني استخدام المزيد من مزودي نماذج اللغة الكبيرة (LLM)؟

حالياً، يتكامل مترجم Lingo.dev مع محرك Lingo.dev والعديد من مزودي نماذج اللغة الكبيرة الأخرى.

نود دعم المزيد من مزودي نماذج اللغة الكبيرة قريباً - تحدث معنا أو أرسل لنا طلب سحب!

هل أحتاج إلى مفتاح واجهة برمجة تطبيقات GROQ في CI/CD؟

عادة لا. إذا قمت ببناء تطبيقك محلياً، سيتم تخزين جميع الترجمات في دليل lingo/. لن يحتاج بناء CI/CD الخاص بك إلى استدعاء نموذج اللغة الكبيرة لترجمة أي نصوص.

بدلاً من ذلك، يمكنك إضافة متغير GROQ_API_KEY إلى CI/CD الخاص بك وإجراء جميع الترجمات هناك أثناء البناء، لكننا لا نوصي بهذا النهج للحفاظ على مزيد من التحكم في الترجمات النهائية.

هل يمكنني تعديل الترجمات؟

نعم! يمكنك تعديل ملف lingo/dictionary.js يدويًا. يقوم بتصدير كائن يحتوي على ترجمات لجميع الملفات والإدخالات. يمكنك تعديل النص لكل لغة في خاصية content. سيتم الاحتفاظ بتعديلاتك حتى يتم تحديث النص المصدر في مكونات React.

لست من محبي تعديل كائنات JavaScript؟ نحن بصدد إطلاق محرر لتحسين تجربة التعديل قريبًا. أخبرنا إذا كنت مهتمًا!

كيف يمكنني إعادة ترجمة تطبيقي بالكامل أو ملف معين أو لغة معينة؟

لإعادة ترجمة تطبيقك بالكامل، قم بحذف ملف dictionary.js من دليل lingo/.

لإعادة ترجمة ملفات محددة فقط، يمكنك حذف مفتاحها (اسم الملف) من dictionary.js.

إذا كنت ترغب في إعادة ترجمة لغة محددة، فأنت بحاجة إلى حذف جميع السجلات الخاصة بتلك اللغة.

لماذا أحتاج إلى بناء التطبيق محليًا؟

عمليات البناء المحلية تقوم بتطبيع ملفات الترجمة lingo/ الخاصة بك عن طريق:

  • إزالة مفاتيح الترجمة غير المستخدمة
  • تحديث بصمات المحتوى
  • ضمان تنسيق ملف متسق
  • التحسين للنشر في بيئة الإنتاج

قم دائمًا بتشغيل npm run build قبل الالتزام بالتغييرات للحفاظ على ملفات ترجمة نظيفة.

هناك ترجمات مفقودة!

إذا كانت هناك ترجمات مفقودة:

  1. قم بالبناء محليًا لتطبيع ملفات lingo/ الخاصة بك:

    npm run build

  2. تحقق من مفتاح API الخاص بك تم تعيينه بشكل صحيح:

    # تحقق من أن ملف .env يحتوي على
GROQ_API_KEY=gsk_...

  3. التزم بالملفات المحدثة:

    git add lingo/
git commit -m "Update translations"

  4. أعد تشغيل خادم التطوير بعد التغييرات.

هل يمكنني إعداد مسرد مصطلحات مخصص؟

نعم! استخدم الموجهات المخصصة لتحديد المصطلحات والمسارد مباشرة في تكوين المُجمّع الخاص بك:

const compilerConfig = {
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  prompt:
    "You are a professional translator. Use these terms consistently: 'Dashboard' should be 'Tableau de bord' in French, 'Settings' should be 'Configuración' in Spanish. Translate from {SOURCE_LOCALE} to {TARGET_LOCALE}.",
};

كيف يتعامل المُترجم البرمجي مع صيغ الجمع؟

يتعامل المُترجم البرمجي تلقائيًا مع أنماط الجمع الأساسية، ولكن بالنسبة لقواعد الجمع المعقدة، قد تحتاج إلى هيكلة JSX الخاص بك وفقًا لذلك:

// سيتعامل المُترجم مع هذا بشكل مناسب
<p>{count === 1 ? <>1 item</> : <>{count} items</>}</p>

ماذا عن الأداء في بيئة الإنتاج؟

تم تحسين مُترجم Lingo.dev للإنتاج:

  • تكلفة وقت تشغيل صفرية - يتم ترجمة الترجمات مسبقًا
  • تقسيم الحزمة - يتم تحميل اللغة النشطة فقط
  • تقليم الشجرة - تتم إزالة الترجمات غير المستخدمة
  • متوافق مع CDN - ملفات الترجمة الثابتة تخزن مؤقتًا بكفاءة

هل يمكنني استخدام هذا مع TypeScript؟

نعم! يعمل المُترجم البرمجي بسلاسة مع مشاريع TypeScript. جميع مكونات React المقدمة مكتوبة بشكل كامل:

import { LocaleSwitcher } from "lingo.dev/react/client";

// دعم كامل لـ TypeScript
const locales: string[] = ["en", "es", "fr"];
<LocaleSwitcher locales={locales} />;

كيف يمكنني الإبلاغ عن الأخطاء أو طلب ميزات؟

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