Langues

Les langues livrées

Chaque texte, libellé de bouton, description d'image, message de formulaire et titre de page existe dans les deux langues.

Comment la langue est choisie

• Les pages anglaises n'ont pas de langue dans l'adresse ; les pages arabes commencent par /ar.
• Un visiteur qui ouvre / avec un navigateur qui préfère l'arabe est envoyé vers /ar. C'est src/proxy.ts qui s'en charge.
• Le menu de langue de l'en-tête, et celui du menu sur téléphone, change la langue et garde le visiteur sur la même page. Le site retient le choix pour la visite suivante.
• Chaque langue a son propre titre, sa propre description et sa propre adresse canonical, et chaque page indique aux moteurs de recherche où se trouve l'autre langue.

De droite à gauche

Sur les pages arabes, src/app/[locale]/layout.tsx définit lang="ar" et dir="rtl" sur la page, donc toute la mise en page est inversée : l'en-tête, les cartes, la maquette de tableau de bord et son inclinaison 3D, ainsi que les formulaires se lisent de droite à gauche.

Les composants utilisent des classes Tailwind logiques qui suivent le sens d'écriture, comme ms-2, pe-4, start-0 et text-start. Quand vous ajoutez du code, utilisez-les à la place de ml-*, pr-*, left-* ou text-left, sinon la page arabe s'affiche mal.

Quelques éléments restent volontairement de gauche à droite dans les deux langues : le terminal et l'arborescence de fichiers dans les cartes de fonctionnalités, les graphiques, et les numéros de téléphone de la page de contact.

Où se trouvent les textes

Les textes sont répartis dans quatre dossiers sous messages/, chacun avec un en.json et un ar.json :

Modifier un texte

• Changez la valeur dans le fichier anglais et celle qui lui correspond dans le fichier arabe. Gardez les mêmes clés dans les deux.
• Une clé absente d'un fichier affiche son nom à la place du texte sur la page de cette langue.
• Les mots entre accolades, comme {year}, {count} et {name}, sont remplis par le site. Conservez-les tels quels.

Les libellés arabes du site

Quand vous écrivez sur le site en arabe, utilisez les libellés qu'il affiche :

Ajouter une langue

1. 01

   Ajoutez son code au routage

   Ajoutez le code de la langue à locales dans src/i18n/routing.ts. Par exemple le français :

   src/i18n/routing.tsCopier

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

   Ajoutez ses fichiers de messages

   Dans chacun des quatre dossiers sous messages/, copiez en.json sous le nouveau code et traduisez les valeurs. Conservez chaque clé et chaque mot entre accolades, et définissez metadata.ogLocale dans messages/common/fr.json, par exemple fr_FR. Pour le dossier home :

   Terminaldans Publino-templateCopier

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

   Ajoutez-la aux menus de langue

   Donnez-lui un drapeau et un code dans src/components/LanguageSwitcher/index.tsx (flagComponents et localeIsoCodes), et un drapeau et un nom dans src/layouts/Navbar/components/MobileLanguageSwitcher.tsx (flagComponents et localeNames). Les drapeaux viennent de country-flag-icons, comme FR.
4. 04

   Définissez son sens d'écriture, si nécessaire

   Seul l'arabe est traité de droite à gauche. Pour une autre langue de droite à gauche, étendez les vérifications locale === "ar" dans src/app/[locale]/layout.tsx, src/features/home/DashboardMockup/components/index.tsx et src/features/home/WhyChooseUs/index.tsx.

Redémarrez yarn dev, ou reconstruisez, et la nouvelle langue répond à sa propre adresse, ici /fr. Les liens canoniques, les liens de langue et le sitemap la prennent en compte d'eux-mêmes.