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

Dashboard 2اللغات

اللغات

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

لحزمة واجهة + خلفية

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

اللغةالعنوانالاتجاهالخط
الإنجليزية، اللغة الافتراضية/enمن اليسار إلى اليمينخط النظام
العربية/arمن اليمين إلى اليسارIBM Plex Sans Arabic

كل تسمية وزر وعنوان جدول ومفتاح مخطط ورسالة نموذج وعنوان صفحة موجود باللغتين، وكذلك واجهة المساعد الذكي.

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

  • اللغة هي الجزء الأول من كل عنوان: /en/dashboard/users/all و/ar/dashboard/users/all.
  • العنوان من دون لغة، مثل /، يُحوَّل إلى صفحته بآخر لغة استُخدمت، أو بالإنجليزية في المرة الأولى، ويُحوَّل / نفسه إلى لوحة التحكم. يقوم بذلك src/proxy.ts، ويحفظ اللغة في ملف تعريف ارتباط (cookie).
  • قائمة اللغة في الرأس، وهي علم مع رمزه، تبدّل اللغة وتُبقيك في الصفحة نفسها.
  • ترسل لوحة التحكم اللغة مع كل طلب، فتعود رسائل واجهة API، مثل خطأ تسجيل الدخول، باللغة نفسها.

من اليمين إلى اليسار

على /ar، يضبط سكربت صغير في src/app/layout.tsx القيمتين lang="ar" وdir="rtl" على الصفحة قبل رسمها، فينعكس التصميم كله منذ الإطار الأول: ينتقل الشريط الجانبي إلى اليمين، وتُقرأ البطاقات والجداول والقوائم من اليمين إلى اليسار.

تستخدم المكوّنات أصناف Tailwind المنطقية التي تتبع الاتجاه، مثل ms-2 وpe-4 وstart-0 وtext-start. عندما تضيف عناصر، استخدم هذه بدلًا من ml-* أو pr-* أو left-* أو text-left، وإلا ظهرت الصفحة العربية بشكل خاطئ.

أين توجد النصوص

في مجلد لوحة التحكم، تُقسَّم النصوص حسب المنطقة تحت messages/، وفي كل مجلد ملفا en.json وar.json:

المجلدما الذي يحتويه
messages/layouts/الشريط الجانبي والرأس والتذييل وإشعار البيانات النموذجية، وتُحمَّل في كل صفحة
messages/auth/صفحة تسجيل الدخول
messages/common/الكلمات والرسائل المشتركة
messages/metadata/عنوان علامة تبويب المتصفح لكل صفحة
messages/dashboard/النصوص المشتركة للوحة التحكم، مع مجلد لكل شاشة: overview وusers وprojects وui-component، وsettings مع profile وsecurity وappsettings وadminmanagement وadminroles الخاصة به
messages/ai-assistant/المساعد الذكي ونافذة المفتاح والبطاقات التي يرسمها

رسائل واجهة API

تجيب واجهة API بلغة ترويسة Accept-Language في الطلب، الإنجليزية أو العربية، وبالإنجليزية لأي لغة أخرى. نصوصها في back-end/src/i18n/translations/en/ وar/، وملف لكل وحدة. وتحمل الدول والصلاحيات وإعدادات التطبيق اللغتين في قاعدة البيانات.

غيّر نصًا

  • غيّر القيمة في الملف الإنجليزي وما يقابلها في الملف العربي. أبقِ المفاتيح نفسها في الملفين.
  • المفتاح المفقود من أحد الملفين يظهر اسمه بدل النص في صفحة تلك اللغة.
  • الكلمات بين الأقواس المعقوفة، مثل {count}، يملؤها التطبيق. اتركها كما هي.

التسميات العربية في لوحة التحكم نفسها

عندما تكتب عن لوحة التحكم بالعربية، استخدم التسميات التي تعرضها:

الإنجليزيةالعربية
Sign Inتسجيل الدخول
Overviewنظرة عامة
AI Assistantالمساعد الذكي
Usersالمستخدمين
Projectsالمشاريع
Admin Managementإدارة المسؤولين
Admin Rolesأدوار المسؤولين
Settingsالإعدادات
UI Componentمكونات واجهة المستخدم
Logoutتسجيل الخروج

أضف لغة

  1. أضف رمزها في قوائم اللغات الثلاث

    أضف رمز اللغة إلى locales في src/config/i18n.ts وفي src/proxy.ts وفي src/app/[locale]/layout.tsx. للفرنسية:

    src/config/i18n.ts
    export const locales = ['en', 'ar', 'fr'] as const

  2. أضف ملفات رسائلها

    في كل مجلد تحت messages/ يحتوي على en.json، انسخه باسم الرمز الجديد وترجم القيم. أبقِ كل مفتاح وكل كلمة بين أقواس معقوفة.

  3. أضفها إلى قائمة اللغة

    أضفها إلى languages في src/components/LanguageSwitcher.tsx، مع رمزها وعلم من country-flag-icons، مثل { code: "fr", country: "FR" as const, Flag: FR } مع إضافة FR إلى استيراد الأعلام.

  4. اضبط اتجاهها، إن احتاجت إلى ذلك

    العربية وحدها تُعامل على أنها من اليمين إلى اليسار. للغة أخرى تُكتب من اليمين إلى اليسار، أضف رمزها إلى RTL_LOCALES في src/app/layout.tsx ووسّع عمليات الفحص locale === "ar"، بدءًا من src/hooks/locale/useDirection.ts.

أعد تشغيل yarn dev، أو ابنِ من جديد، فتستجيب اللغة الجديدة على عنوانها. وتبقى واجهة API تجيبها بالإنجليزية إلى أن تضيف ترجماتها في back-end/src/i18n/، حيث تسرد supportedLocales في i18n.service.ts اللغات التي تحمّلها.

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

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

حل المشكلات

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

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