Langues

Les langues livrées

Chaque texte, chaque description d'image, chaque libellé de bouton, ainsi que le titre et la description de la page, existent dans les deux langues, dans messages/en.json et messages/ar.json.

Comment la langue est choisie

• La langue est la première partie de l'adresse, /en ou /ar.
• Un visiteur qui ouvre / est envoyé vers /ar quand le navigateur préfère l'arabe, et vers /en sinon. C'est src/middleware.ts qui s'en charge.
• Le bouton de langue de l'en-tête passe à l'autre langue et garde le visiteur sur la même page. Ses libellés sont LocaleSwitcher.names dans les fichiers de messages.
• 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 /ar, src/app/[locale]/layout.tsx définit lang="ar" et dir="rtl" sur la page : toute la mise en page s'inverse, et le menu, les cartes, les flèches et le tableau 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 balisage, utilisez-les au lieu de ml-*, pr-*, left-* ou text-left, sinon la page arabe s'affiche mal. Une flèche qui doit pointer dans l'autre sens en arabe prend rtl:rotate-180.

Les prix sont écrits dans la langue de la page par src/hooks/usePriceFormatter.ts.

Modifier un texte

Modifiez la valeur dans messages/en.json et la valeur correspondante dans messages/ar.json. Gardez les mêmes clés dans les deux fichiers, et gardez tels quels les mots entre accolades, comme {brand}.

• Où se trouve chaque texte

Les libellés arabes de la page

Quand vous écrivez sur la page en arabe, utilisez les libellés qu'elle affiche :

Ajouter une langue

1. 01

   Ajoutez son code au routage

   Ajoutez le code de langue à locales dans src/i18n/routing.ts, par exemple pour le français :

   src/i18n/routing.tsCopier

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

   Ajoutez son fichier de messages

   Copiez le fichier anglais sous le nouveau code et traduisez chaque valeur. Gardez chaque clé et chaque mot entre accolades.

   Terminaldans landing-page-template-2Copier

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

   Nommez-la dans le sélecteur de langue

   Ajoutez le nom de la langue sous LocaleSwitcher.names dans chaque fichier de messages, comme "fr": "Français". L'en-tête affiche alors un bouton pour chaque langue autre que la langue actuelle.
4. 04

   Définissez son sens d'écriture et sa police, si besoin

   Une langue de droite à gauche va dans RTL_LOCALES dans src/i18n/direction.ts. Toutes les langues autres que l'arabe utilisent Inter avec des caractères latins ; pour une autre écriture, ajoutez une police dans src/lib/fonts.ts et choisissez-la pour cette langue dans src/app/[locale]/layout.tsx.

Redémarrez yarn dev, ou reconstruisez, et la nouvelle langue répond à sa propre adresse, ici /fr.