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

Financial Dashboardاللغات

اللغات

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

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

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

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

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

  • اللغة هي الجزء الأول من كل عنوان: /en/dashboard/analytics و/ar/dashboard/analytics.
  • الزائر الذي يفتح / يُوجَّه إلى /ar عندما يفضّل متصفحه العربية، وإلى /en في غير ذلك. يقوم بذلك src/proxy.ts.
  • قائمة اللغة في الترويسة، وهي علم مع رمزه، تبدّل اللغة وتُبقي المستخدم في الصفحة نفسها. وعلى الهاتف تكون في قائمة المستخدم. واللغة ضمن الإعدادات ثم التفضيلات تفعل الشيء نفسه.

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

في /ar، يضبط src/app/[locale]/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/common/الترويسة، والشريط الجانبي، ومنتقي التاريخ، والتذييل، ومبدّل الألوان، وعنوان كل صفحة ووصفها
messages/auth/صفحة تسجيل الدخول وصفحة الهبوط على /en
messages/dashboard/overview/النظرة العامة وودجاتها، والتحويل السريع، والإشعارات
messages/dashboard/analytics/صفحة التحليلات
messages/dashboard/transactions/صفحة المعاملات
messages/dashboard/cards/صفحة البطاقات
messages/dashboard/settings/صفحة الإعدادات
messages/dashboard/ui-component/صفحة مكوّنات الواجهة

غيّر نصًا

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

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

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

الإنجليزيةالعربية
Sign Inتسجيل الدخول
Overviewنظرة عامة
Your Cardsبطاقاتك
Analyticsالتحليلات
Transactionsالمعاملات
UI Componentsمكونات واجهة المستخدم
Settingsالإعدادات
Exportتصدير
Add Transactionإضافة معاملة
Logoutتسجيل الخروج

أضف لغة

  1. أضف رمزها إلى التوجيه

    أضف رمز اللغة إلى locales في src/i18n/routing.ts. مثلًا الفرنسية:

    src/i18n/routing.ts
    locales: ['en', 'ar', 'fr'],

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

    في كل مجلد من المجلدات الثمانية تحت messages/، انسخ en.json برمز اللغة الجديدة وترجم القيم. أبقِ كل مفتاح وكل كلمة بين أقواس معقوفة. يحمّلها src/i18n/request.ts برمز اللغة، فيحتاج كل مجلد إلى الملف. للمجلد المشترك:

    الطرفيةفي dashboard-template-1
    cp messages/common/en.json messages/common/fr.json

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

    أضفها إلى languageOptions في src/components/LanguageSelector.tsx، باسمها وتسمية قصيرة وعلم من country-flag-icons، مثل { id: "fr", label: "Français", shortLabel: "FR", Flag: FR } مع إضافة FR إلى استيراد الأعلام.

  4. اضبط اتجاهها وخطها، إذا احتاجت إليهما

    العربية وحدها تُعامل على أنها من اليمين إلى اليسار. للغة أخرى بهذا الاتجاه، وسّع فحوص locale === "ar" في src/app/[locale]/layout.tsx وsrc/components/calendar.tsx وsrc/components/themeToggle.tsx وsrc/features/dashboard/overview/components/CardSection/CardStack/index.tsx وQuickTransferSheet/index.tsx في التحويل السريع. ولخط لا يغطيه Inter، أضف خطًا بـ next/font في layout.tsx.

أعد تشغيل yarn dev، أو ابنِ من جديد، فتستجيب اللغة الجديدة على عنوانها الخاص، هنا /fr/login.

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

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

حل المشكلات

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

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