اللغات

اللغات المضمّنة

فتح / يرسل الزائر إلى اللغة التي يفضّلها متصفحه، وإلى الإنجليزية إن لم يفضّل أيًا منهما. في شريط القائمة زر للغة الأخرى؛ وعلى الهواتف يوجد داخل القائمة.

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

يضبط التخطيط lang وdir على الصفحة حسب اللغة، فتصبح النصوص وشريط القائمة ونص المنتج والأزرار في العربية من اليمين إلى اليسار. أما العجلة ثلاثية الأبعاد والفواكه العائمة والثلج والكلمة الضخمة خلف العلب فتحافظ على اتجاهها في اللغتين.

يستخدم النص العربي خط Cairo، عبر القاعدة html[lang="ar"] body في src/app/globals.css. واللغات التي تُكتب من اليمين إلى اليسار هي القائمة RTL_LOCALES في src/i18n/routing.ts.

أضف لغة

تضيف الخطوات الفرنسية، fr. استخدم رمز اللغة المكوّن من حرفين.

1. 01

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

   في src/i18n/routing.ts، أضفه إلى locales. وإذا كانت اللغة تُكتب من اليمين إلى اليسار، فأضفه إلى RTL_LOCALES أيضًا.

   src/i18n/routing.tsنسخ

   locales: ["en", "ar", "fr"],
2. 02

   أنشئ ملف رسائلها

   انسخ الملف الإنجليزي، ثم ترجم كل قيمة. وأبقِ المفاتيح كما هي.

   الطرفيةفي juicyنسخ

   cp messages/en.json messages/fr.json
3. 03

   سمّها في مبدّل اللغة

   يعرض المبدّل كل لغة باسمها بلغتها، من localeSwitcher.names. أضف الاسم الجديد إلى كل ملفات الرسائل، بما فيها الملف الجديد.

   messages/en.jsonنسخ

   "names": {
     "en": "English",
     "ar": "العربية",
     "fr": "Français"
   }
4. 04

   أعد التشغيل وافتحها

   أوقف yarn dev وشغّله مرة أخرى، ثم افتح localhost:3030/frمحلي.

   النتيجة المتوقعة: تفتح الصفحة باللغة الجديدة، ويعرض شريط القائمة زرًا لكل من اللغتين الأخريين.

   تواجه مشكلة؟

اللغة المكتوبة بخط لا يغطيه Arial ولا Cairo تحتاج إلى خط خاص بها: حمّله في src/app/[locale]/layout.tsx كما يُحمَّل Cairo، وأضف له قاعدة في src/app/globals.css مثل قاعدة العربية.

غيّر اللغة الافتراضية أو احذف لغة

defaultLocale في src/i18n/routing.ts هي اللغة التي يحصل عليها الزائر عندما لا يفضّل متصفحه أيًا من لغاتك. لحذف لغة، أزلها من locales وRTL_LOCALES، واحذف ملف رسائلها، وأزل اسمها تحت localeSwitcher.names في الملفات الأخرى. وعندما تبقى لغة واحدة، لا يعرض مبدّل اللغة أي زر.