الانتقال إلى المحتوى الرئيسي
Twenty تطبيقًا مكتوبًا باللغة English: السلاسل في المصدر وملف manifest هي نص المصدر باللغة الإنجليزية، و en هي لغة المصدر التي تترجم منها، وأي إعداد محلي لا تتم ترجمته يعود إليها افتراضيًا. يحتوي تطبيقك على نوعين من النصوص القابلة للترجمة، وكلاهما يمر عبر نفس كتالوج locales/:
  • Manifest labels — أسماء الكائنات والحقول، وعناوين العروض، وعناصر القوائم، و السلاسل الأخرى المصرّح بها في بيانات التعريف لتطبيقك.
  • سلاسل الواجهة الأمامية (front-component) — نص واجهة المستخدم الذي تقوم مكوّنات React الأمامية لديك بعرضه.
أنت تقوم بوضع علامة على السلاسل القابلة للترجمة، واستخراجها إلى كتالوجات لكل لغة (locale)، ثم تترجم هذه الكتالوجات، ويقوم البناء (build) بتقديم اللغة الصحيحة للمستخدم الحالي — بدون أي توصيل إضافي.

وضع علامات على سلاسل الواجهة الأمامية (front-component)

قم باستيراد أدوات الترجمة من twenty-sdk/front-component:
import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';

const STATUSES = [
  { id: 'draft', label: msg('Draft') },
  { id: 'sent', label: msg('Sent') },
];

const Card = ({ count, name }: { count: number; name: string }) => {
  const { t } = useTranslate();

  return (
    <section>
      {/* Static text — reactive to the user's locale */}
      <Trans>Loading postcard…</Trans>

      {/* Disambiguate identical sources with a context */}
      <Trans context="card-title">Untitled</Trans>

      {/* Interpolation: pass values explicitly */}
      <p>{t('Hi {name}', { name })}</p>
      <p>{t('Saved {count} cards', { count })}</p>

      {/* Resolve a lazily-declared descriptor */}
      <ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
    </section>
  );
};

متى تستخدم أيًّا منها

  • <Trans>…</Trans> — نص ثابت في JSX. استخدم الخاصيتين message وvalues من أجل الاستبدال (interpolation) (<Trans message="Hi {name}" values={{ name }} />); لا يمكن استخراج الاستبدال مباشرة في العناصر الأبناء (children) بشكل ثابت.
  • useTranslate().t — سلاسل ديناميكية داخل المكوّن. يُعيد التصيير عندما يغيّر المستخدم اللغة. يفضّل استخدامه داخل التصيير (render).
  • t(...) (مستوردة مباشرة) — ترجمة فورية (eager) يمكن استخدامها في أي مكان، بما في ذلك معالجات الأحداث (event handlers)، والبرامج المساعدة (helpers)، ونطاق الوحدة (module scope) — وليس فقط داخل التصيير.
  • msg(...) — واصف كسول (lazy descriptor) للسلاسل المصرّح بها كبيانات (ثوابت، إعدادات config). قم بحلّه لاحقًا باستخدام t(descriptor).

السياق

مرِّر context لتمييز سلاسل المصدر المتطابقة التي تُترجَم بشكل مختلف:
t({ message: 'Open', context: 'door' });
t({ message: 'Open', context: 'window' });
<Trans context="card-title">Untitled</Trans>

الاستخراج والترجمة

شغِّل أمر الاستخراج من دليل تطبيقك:
twenty dev:translations-extract                  # collect strings into locales/en.json
twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale
يقوم الاستخراج بجمع كل من تسميات ملف البيان (manifest labels) وسلاسل t()/msg()/\<Trans> من شفرة الواجهة الأمامية (front-component) إلى locales/\<locale>.json، مفهرسة حسب سلسلة المصدر. املأ الترجمات:
// locales/fr-FR.json
{
  "Loading postcard…": "Chargement de la carte…",
  "Hi {name}": "Bonjour {name}",
  "Saved {count} cards": "{count} cartes enregistrées"
}
العناصر النائبة مثل {name} تُستبدَل وقت التشغيل — احتفظ بها في الترجمة. أي سلسلة تُترَك فارغة تعود إلى نص المصدر.

كيفية التشغيل

يقوم twenty dev:build بتجميع الكتالوجات وتقديم اللغة الصحيحة للمستخدم الحالي: يتم حل تسميات ملف البيان (manifest labels) على جانب الخادم، ويتم تضمين كتالوجات الواجهة الأمامية (front-component) داخل كل حزمة مكوّن. وقت التشغيل يقرأ المكوّن اللغة (locale) من سياق التنفيذ الخاص به (لغة المضيف الحالية) ويحل كل سلسلة مقابل كتالوجه، مع الرجوع إلى المصدر عندما تكون الترجمة مفقودة. تغيير اللغة في المضيف يعيد تصيير سلاسل \<Trans> و useTranslate().t مباشرة. نظرًا إلى أنّ الكتالوجات تُجمَّع في وقت البناء، فإن تحديث ترجمة ما يعني إعادة تشغيل twenty dev:build (وإعادة النشر)، تمامًا مثل أي تغيير آخر.
يتم تجميع الترجمات بواسطة twenty dev:buildtwenty apply). تشغيل المراقبة المستمرة twenty dev يعرض سلاسل المصدر، لذا اختبر المخرجات المترجمة ببناء (build) لمرة واحدة.
قد تمتد عناصر النص التابعة لـ <Trans> على عدة أسطر — يتم ضغط المسافات بنفس الطريقة التي يقوم JSX بضغطها، لذلك كل من <Trans>Welcome\n back</Trans> ومفتاح الاستخراج يصبحان Welcome back.