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

أسئلة وإجابات شائعة حول مُجمِّع 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": "mistral-saba-24b",
    "en:it": "meta-llama/llama-4-maverick-17b-128e-instruct",
    "*:*": "mistral-saba-24b",
  },
};

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

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

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