Idiomas

Los idiomas incluidos

Cada texto, etiqueta de botón, descripción de imagen, mensaje de formulario y título de página existe en los dos idiomas.

Cómo se elige el idioma

• Las páginas en inglés no llevan idioma en la dirección; las páginas en árabe empiezan por /ar.
• Un visitante que abre / con un navegador que prefiere el árabe es enviado a /ar. Lo hace src/proxy.ts.
• El menú de idioma del encabezado, y del menú en el teléfono, cambia de idioma y mantiene al visitante en la misma página. El sitio recuerda la elección para la próxima visita.
• Cada idioma tiene su propio título, descripción y dirección canonical, y cada página indica a los buscadores dónde está el otro idioma.

De derecha a izquierda

En las páginas en árabe, src/app/[locale]/layout.tsx pone lang="ar" y dir="rtl" en la página, así que todo el diseño se refleja: el encabezado, las tarjetas, la maqueta del panel y su inclinación 3D, y los formularios se leen de derecha a izquierda.

Los componentes usan clases lógicas de Tailwind que siguen la dirección, como ms-2, pe-4, start-0 y text-start. Cuando añadas código, usa estas en lugar de ml-*, pr-*, left-* o text-left, o la página en árabe se verá mal.

Algunas piezas se mantienen de izquierda a derecha en los dos idiomas a propósito: la terminal y el árbol de archivos de las tarjetas de características, los gráficos y los teléfonos de la página de contacto.

Dónde están los textos

Los textos están divididos en cuatro carpetas dentro de messages/, cada una con un en.json y un ar.json:

Cambia un texto

• Cambia el valor en el archivo en inglés y el correspondiente en el archivo en árabe. Mantén las mismas claves en ambos.
• Si falta una clave en un archivo, la página de ese idioma muestra su nombre en lugar del texto.
• Las palabras entre llaves, como {year}, {count} y {name}, las rellena el sitio. Déjalas tal como están.

Las etiquetas propias del sitio en árabe

Cuando escribas sobre el sitio en árabe, usa las etiquetas que muestra:

Añade un idioma

1. 01

   Añade su código al enrutamiento

   Añade el código del idioma a locales en src/i18n/routing.ts. Por ejemplo, francés:

   src/i18n/routing.tsCopiar

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

   Añade sus archivos de mensajes

   En cada una de las cuatro carpetas de messages/, copia en.json con el nuevo código como nombre y traduce los valores. Conserva todas las claves y todas las palabras entre llaves, y define metadata.ogLocale en messages/common/fr.json, como fr_FR. Para la carpeta home:

   Terminalen Publino-templateCopiar

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

   Añádelo a los menús de idioma

   Dale una bandera y un código en src/components/LanguageSwitcher/index.tsx (flagComponents y localeIsoCodes), y una bandera y un nombre en src/layouts/Navbar/components/MobileLanguageSwitcher.tsx (flagComponents y localeNames). Las banderas vienen de country-flag-icons, como FR.
4. 04

   Define su dirección, si la necesita

   Solo el árabe se trata como de derecha a izquierda. Para otro idioma de derecha a izquierda, amplía las comprobaciones locale === "ar" en src/app/[locale]/layout.tsx, src/features/home/DashboardMockup/components/index.tsx y src/features/home/WhyChooseUs/index.tsx.

Reinicia yarn dev, o construye de nuevo, y el idioma nuevo responde en su propia dirección, aquí /fr. Los enlaces canónicos, los enlaces de idioma y el sitemap lo incorporan solos.