en هي لغة المصدر التي تترجم منها، وأي
إعداد محلي لا تتم ترجمته يعود إليها افتراضيًا.
يحتوي تطبيقك على نوعين من النصوص القابلة للترجمة، وكلاهما يمر عبر نفس
كتالوج locales/:
- Manifest labels — أسماء الكائنات والحقول، وعناوين العروض، وعناصر القوائم، و السلاسل الأخرى المصرّح بها في بيانات التعريف لتطبيقك.
- سلاسل الواجهة الأمامية (front-component) — نص واجهة المستخدم الذي تقوم مكوّنات React الأمامية لديك بعرضه.
وضع علامات على سلاسل الواجهة الأمامية (front-component)
قم باستيراد أدوات الترجمة منtwenty-sdk/front-component:
متى تستخدم أيًّا منها
<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()/msg()/\<Trans>
من شفرة الواجهة الأمامية (front-component) إلى locales/\<locale>.json، مفهرسة حسب
سلسلة المصدر. املأ الترجمات:
{name} تُستبدَل وقت التشغيل — احتفظ بها في
الترجمة. أي سلسلة تُترَك فارغة تعود إلى نص المصدر.
كيفية التشغيل
يقومtwenty dev:build بتجميع الكتالوجات وتقديم اللغة الصحيحة للمستخدم
الحالي: يتم حل تسميات ملف البيان (manifest labels) على جانب الخادم، ويتم تضمين كتالوجات الواجهة الأمامية (front-component)
داخل كل حزمة مكوّن. وقت التشغيل يقرأ المكوّن
اللغة (locale) من سياق التنفيذ الخاص به (لغة المضيف الحالية) ويحل كل سلسلة مقابل كتالوجه، مع الرجوع إلى المصدر عندما تكون الترجمة مفقودة. تغيير اللغة في المضيف يعيد تصيير سلاسل \<Trans> و
useTranslate().t مباشرة.
نظرًا إلى أنّ الكتالوجات تُجمَّع في وقت البناء، فإن تحديث ترجمة ما يعني
إعادة تشغيل twenty dev:build (وإعادة النشر)، تمامًا مثل أي تغيير آخر.
يتم تجميع الترجمات بواسطة
twenty dev:build (وtwenty apply). تشغيل المراقبة المستمرة twenty dev
يعرض سلاسل المصدر، لذا اختبر المخرجات المترجمة ببناء (build) لمرة واحدة.<Trans> على عدة أسطر — يتم ضغط المسافات
بنفس الطريقة التي يقوم JSX بضغطها، لذلك كل من <Trans>Welcome\n back</Trans>
ومفتاح الاستخراج يصبحان Welcome back.