انتقل إلى المقال
Aniq-UI

Northstackاللغات

اللغات

كيف يعمل الموقع ولوحة التحكم بالإنجليزية والعربية، وكيف تغيّر أي نص، وما الذي تترجمه واجهة API، وما الذي تغيّره لإضافة لغة.

لحزمة الحزمة الكاملة

اللغات المتوفرة

الإنجليزية والعربية، في التطبيقات الثلاثة. تضع العربية الواجهة كلها من اليمين إلى اليسار، بخطوطها الخاصة، ويبقى اسم المنتج Northstack بالأحرف اللاتينية في اللغتين. تُكتب الأسعار في الموقع بالطريقة نفسها في اللغتين، وعلامة الدولار أولًا بالأرقام اللاتينية.

التطبيقالإنجليزيةالعربية
الموقع/en/…/ar/…
لوحة التحكم/en/…/ar/…
APIAccept-Language: enAccept-Language: ar

الإنجليزية هي الافتراضية. الفرنسية والإسبانية ولغات أخرى غير مضمَّنة؛ وتوضح الأقسام أدناه ما تحتاجه إضافة لغة.

كيف تُختار اللغة

  • اللغة هي الجزء الأول من العنوان. تبدّلها قائمة اللغة وتُبقي الصفحة.
  • الموقع: المسار بلا لغة يرسله next-intl إلى اختيار الزائر السابق أو إلى لغة متصفحه إذا كانت الإنجليزية أو العربية، وإلى /en في غير ذلك. تسرد خريطة الموقع كل صفحة باللغتين، ولكل منها بديلها.
  • لوحة التحكم: المسار بلا لغة يُفتح باللغة التي قدّمت بها لوحة التحكم آخر مرة في ذلك المتصفح (كوكي NEXT_LOCALE)، وبالإنجليزية في غير ذلك، والعنوان المجرد يفتح /<language>/dashboard. يرسل كل طلب تقدّمه لغة الصفحة إلى واجهة API في Accept-Language.
  • يفتح رابط إعادة ضبط بيانات الدخول لوحة التحكم باللغة التي طُلبت بها إعادة الضبط، وتفتح صفحات العودة من الدفع بالترخيص باللغة التي دفع بها المشتري.

غيّر نصًا

كل كلمة ظاهرة موجودة في messages/<namespace>/en.json وar.json، في مجلد كل واجهة أمامية. غيّر القيمة، وأبقِ المفتاح، وغيّرها في الملفين.

التطبيقمساحات الأسماء
الموقعlayout وhome وpricing وcheckout وdocs وblog وchangelog وcontact وlegal وsampleData. نصوص التوثيق والمدونة وسجل التغييرات في src/content/docs/ وsrc/content/journal/ وsrc/content/changelog/، في كل منها ملف en.json وملف ar.json.
لوحة التحكمai-assistant وauth وcommon وdashboard (مع مجلد لكل منطقة: activity وbilling وoverview وplatform وprojects وroles وsettings مع adminmanagement وadminroles وappsettings وprofile وsecurity، وteam وui-component وusers) وinvitation وlayouts وmetadata (عناوين التبويبات) وonboarding
  • المفتاح الناقص في ar.json يظهر كرسالة ناقصة في الجهة العربية، لذلك أبقِ الملفين متطابقين.
  • النص داخل الأقواس {curly} يملؤه التطبيق، مثل {count} أو {license}. أبقِ هذه الكلمات كما هي في اللغتين، وأبقِ الوسوم داخل الرسالة، مثل <code> أو <card>، حول نصها.

النص الذي تخزّنه مساحة العمل باللغتين

  • يُحفظ اسم المشروع ووصفه، وعنوان المهمة ووصفها، لكل لغة، بصيغة translations: { en, ar }. الاسم أو العنوان الإنجليزي مطلوب؛ والعربي اختياري، وتعرض لوحة التحكم العربية النص الإنجليزي أينما كان العربي فارغًا. تملأ عملية الملء الأولى اللغتين لكل مشروع ومهمة تجريبيين.
  • تحمل صلاحيات المنصة وإعداداتها تسمياتها وأوصافها باللغتين أيضًا.
  • لغة مساحة العمل في الإعدادات هي لغة رسائلها البريدية لكل من لم يختر لغة خاصة به. أما لغة الشاشات فهي دائمًا اللغة الموجودة في العنوان.
  • يجيب المساعد الذكي بلغة الصفحة التي سُئل منها، ما لم يكتب الشخص بلغة أخرى.

ما تترجمه واجهة API

  • تأتي رسائل الخطأ بلغة الترويسة Accept-Language، وكذلك message عند نجاح تسجيل الدخول أو تغيير الملف الشخصي أو الموظفين أو الأدوار أو الإعدادات. أما الردود الأخرى فتحمل رمزًا ثابتًا (مثل checkout_started) تصيغه الواجهة الأمامية بكلماتها. تُعدّ ar-SA عربية، وأي لغة لا تعرفها واجهة API تعود إلى الإنجليزية.
  • نصوصها الخاصة ملفات JSON في back-end/src/i18n/translations/en/ وar/، ملف لكل مجال: admin وauth وcommon وmail وproject وroles وsettings وtasks وusers.
  • تعود المشاريع والمهام باللغتين معًا، بصيغة { "en": {…}, "ar": {…} }، وتختار لوحة التحكم إحداهما.
  • تُكتب رسائل البريد الخاصة بمساحة العمل (الدعوات والملخص الأسبوعي ورسائل الفوترة) من mail.json بلغة المستلم: لغته التي اختارها، وإلا لغة مساحة العمل، وإلا الإنجليزية (back-end/src/modules/mail/recipient-locale.ts). أما رسالة إعادة تعيين كلمة المرور (back-end/src/modules/auth/account.service.ts) وإيصال الترخيص (back-end/src/modules/licenses/services/license-checkout.service.ts) فتُكتبان بالإنجليزية، وروابطهما بلغة القارئ. ترجمهما هناك إذا كان عملاؤك يحتاجون إلى نسخ عربية.

أضف لغة إلى الموقع

اللغتان مكتوبتان في عدة ملفات، لذلك تمسّ إضافة لغة ثالثة كل واحد منها. المسارات داخل website/.

  1. أضف الرمز إلى locales في src/i18n/routing.ts. تحدد هذه القائمة العناوين الموجودة، وما تدرجه خريطة الموقع، واللغة التي يذهب إليها مسار بلا لغة.
  2. انسخ كل ملف messages/<namespace>/en.json إلى ملف باسم الرمز الجديد، وترجم القيم. يحمّل src/i18n/request.ts ملفًا واحدًا لكل مساحة أسماء ولكل لغة، فلا يجوز أن ينقص أي ملف.
  3. افعل الشيء نفسه مع src/content/docs/ وsrc/content/journal/ وsrc/content/changelog/، وأضف الملف الجديد إلى جدول byLocale في ملف index.ts بكل مجلد.
  4. إذا كانت اللغة تُكتب من اليمين إلى اليسار، فوسّع سطر dir في src/app/[locale]/layout.tsx الذي لا يعرف إلا ar، وأعطها خطًا في src/styles/fonts.css.
  5. يرسل الدفع en أو ar إلى واجهة API (src/features/checkout/hooks/useCheckoutForm.ts)، ولا تقبل واجهة API غيرهما. ابحث في src/ عن "ar" وعالج الرمز الجديد هناك أيضًا.

أضف لغة إلى لوحة التحكم

  1. أضف الرمز إلى locales في src/config/i18n.ts وفي src/proxy.ts، وإذا كانت اللغة تُكتب من اليمين إلى اليسار فأضفه إلى RTL_LOCALES في src/app/layout.tsx وإلى الفحص في src/hooks/locale/useDirection.ts.
  2. انسخ كل ملف messages/**/en.json إلى ملف باسم الرمز الجديد، وترجم القيم.
  3. ابحث في src/ عن "ar": التواريخ والمخططات وأدوات المساعد وبعض الإعدادات تختار بين اللغتين مباشرة، وتختار pickLocale في src/lib/api/shared.ts نصًا مخزنًا بالإنجليزية أو بالعربية.
  4. يطلب نموذجا المشروع والمهمة النصين الإنجليزي والعربي. وإضافة لغة ثالثة إلى النصوص المخزنة تتطلب أيضًا أن تقبلها واجهة API.

أضف لغة إلى واجهة API

تعرف واجهة API القيمتين en وar في supportedLocales داخل back-end/src/i18n/i18n.service.ts. أضف الرمز الجديد هناك، وانسخ src/i18n/translations/en/ إلى مجلد باسمه، وترجم الملفات. النصوص المخزنة زوج { en, ar } تتحقق منه فئات الترجمات في src/modules/projects/dto/project.dto.ts وsrc/modules/tasks/dto/task.dto.ts، لذلك فإن إضافة لغة ثالثة في البيانات تغيّر تلك الفئات والكيانات وأدوات المساعد الذكي والبيانات الأولية. ويقبل دفع الترخيص en أو ar في src/modules/licenses/dto/start-license-checkout.dto.ts.

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.