اللغات

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

كل نص، ووصف صورة، وتسمية زر، وعنوان الصفحة ووصفها موجودة باللغتين، في messages/en.json وmessages/ar.json.

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

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

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

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

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

تُكتب الأسعار بلغة الصفحة بواسطة src/hooks/usePriceFormatter.ts.

غيّر نصًا

غيّر القيمة في messages/en.json والقيمة المقابلة لها في messages/ar.json. أبقِ المفاتيح نفسها في الملفين، وأبقِ الكلمات بين الأقواس المعقوصة، مثل {brand}، كما هي.

• مكان كل نص

التسميات العربية الخاصة بالصفحة

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

أضف لغة

1. 01

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

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

   src/i18n/routing.tsنسخ

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

   أضف ملف رسائلها

   انسخ الملف الإنجليزي باسم الرمز الجديد وترجم كل قيمة. أبقِ كل مفتاح وكل كلمة بين الأقواس المعقوصة.

   الطرفيةفي landing-page-template-2نسخ

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

   أضف اسمها إلى مبدّل اللغة

   أضف اسم اللغة تحت LocaleSwitcher.names في كل ملف رسائل، مثل "fr": "Français". ستعرض الترويسة عندها زرًا لكل لغة غير اللغة الحالية.
4. 04

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

   اللغة التي تُكتب من اليمين إلى اليسار تُضاف إلى RTL_LOCALES في src/i18n/direction.ts. كل لغة غير العربية تستخدم Inter بالحروف اللاتينية؛ ولكتابة أخرى، أضف خطًا في src/lib/fonts.ts واختره لتلك اللغة في src/app/[locale]/layout.tsx.

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