Contact

Configuración

Creación del Proyecto

npm create astro@latest -- --template psephopaiktes/astro-i18n-starter

Configuración

1. Configurar /src/locales.ts

Primero, actualiza el archivo de configuración de idiomas.

Establece el idioma por defecto en DEFAULT_LOCALE_SETTING y la lista de idiomas deseados en LOCALES_SETTING. Esto sigue la configuración de Starlight.

// Establece el idioma por defecto de tu sitio.
export const DEFAULT_LOCALE_SETTING: string = "en";

export const LOCALES_SETTING: LocaleSetting = {
    // Agrega o elimina idiomas soportados.
	en: {
		label: "English",
		lang: "en-US", // opcional
	},
	es: {
		label: "Español",
		lang: "es-ES",
	},
	ar: {
		label: "العربية",
		dir: "rtl", // opcional
	},
};

Por favor, consulta el siguiente enlace para información sobre códigos de idioma.

lang - HTML: HyperText Markup Language | MDN

2. Configurar astro.config.mjs

Establece tu URL en site.

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';
import { DEFAULT_LOCALE_SETTING, LOCALES_SETTING } from './src/locales';

export default defineConfig({
- site: 'https://astro-i18n-starter.pages.dev',
+ site: 'https://your-site.com',
  i18n: {
    defaultLocale: DEFAULT_LOCALE_SETTING,
    locales: Object.keys(LOCALES_SETTING),
    routing: {
      prefixDefaultLocale: true,
      redirectToDefaultLocale: false,
    },
  },
...

Por favor, consulta la documentación oficial para opciones de configuración detalladas de Astro.

nota: Cambiar la configuración de prefixDefaultLocale y redirectToDefaultLocale no se recomienda. Nosso gestiona el proceso de redirección con JavaScript del lado del cliente. Si la URL no contiene un idioma, redirigirá al idioma por defecto. Por ejemplo, /setup/ será redirigido a /en/setup/.

Además, si quieres incluir un subdirectorio en tu URL, necesitarás configurar la ruta base y usar import.meta.env.BASE_URL en tus varios enlaces.

Estructura del Proyecto

Sigue la estructura del proyecto Astro.

src/
├── assets/
│   └── en/, es/ ...
├── blog/
│   └── en/, es/ ...
├── components/
│   └── i18n/
├── layouts/
├── pages/
│   ├── [lang]/
│   ├── en/, es/ ...
│   ├── 404.astro
│   └── index.astro
├── styles/
├── content.config.ts
├── consts.ts
├── i18n.ts
└── locales.ts

src/components/i18n

Directorio para componentes de UI utilizados en sitios web multilingües.

src/pages

src/consts.ts

Archivo para datos constantes que pueden ser importados y utilizados dentro del proyecto. También puede ser omitido si no es necesario.

src/i18n.ts

Archivo que contiene definiciones de funciones utilizadas en Nosso. Generalmente no hay necesidad de editar este archivo.