\n```\n\n> Si desea utilizar su contenido en un atributo de `cadena`, como `alt`, `title`, `href`, `aria-label`, etc., puede utilizar el valor de la función, como:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Nota sobre la configuración de rutas:**\n> La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (por defecto):** mantiene el idioma por defecto en la raíz (sin prefijo) y añade prefijos a los demás. Usa `[...locale]` para capturar todos los casos.\n> - **`prefix-all`:** todos los URLs tienen prefijo de idioma. Puedes usar el estándar `[locale]` si no necesitas manejar la raíz por separado.\n> - **`search-param` o `no-prefix`:** no se necesitan directorios de idioma. El idioma se maneja a través de parámetros de consulta o cookies.\n\n### Paso 6: Crear un elemento personalizado de Lit\n\nCrea un elemento personalizado de Lit. Llama a `installIntlayer` en el `connectedCallback` utilizando el atributo `locale` del servidor para inicializar el singleton de traducciones en el cliente.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // Inicializar con el idioma detectado por el servidor\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> El atributo `locale` se pasa desde la página de Astro (detección en el servidor) y se usa para inicializar `installIntlayer` en el `connectedCallback`, lo que determina el idioma inicial para todos los hooks de `ReactiveController` dentro del elemento.\n\n> `useIntlayer` se registra como un `ReactiveController`. Automáticamente solicita un repintado del elemento cuando el idioma cambia, por lo que no hace falta lógica de suscripción adicional.\n\n### Paso 7: Añadir un selector de idioma\n\nLa funcionalidad del cambio de idioma se integra directamente en el método `render()` del elemento personalizado de Lit (véase el Paso 6 anterior). Utiliza `useLocale` de `lit-intlayer` y navega a la URL localizada cuando el usuario selecciona un nuevo idioma:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Dentro de la clase LitElement, después de configurar useLocale en el Paso 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Navegar a la URL localizada al cambiar el idioma\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Nota sobre la reactividad de Lit:**\n> `useLocale` devuelve un `ReactiveController`. Cuando se llama a `setLocale`, el controlador solicita automáticamente un repintado, lo que actualiza el estado del botón activo sin manipular el DOM manualmente.\n\n> **Nota sobre la persistencia:**\n> Usar `onLocaleChange` para redirigir mediante `window.location.href` asegura que se visite la nueva URL del idioma, lo que permite al middleware de Intlayer establecer la cookie de idioma e informar la preferencia del usuario en futuras visitas.\n\n### Paso 8: Sitemap y Robots.txt\n\nIntlayer ofrece utilidades para crear dinámicamente tu sitemap localizado y tus archivos robots.txt.\n\n#### Sitemap\n\nIntlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.\n\n> El sitemap generado por Intlayer admite el espacio de nombres `xhtml:link` (Hreflang XML Extensions). A diferencia de los generadores de sitemap predeterminados que solo enumeran URL sin procesar, Intlayer crea automáticamente los enlaces bidireccionales necesarios entre todas las versiones de idioma de una página (por ejemplo, `/about`, `/about?lang=fr` y `/about?lang=es`). Esto garantiza que los motores de búsqueda indexen y sirvan correctamente la versión de idioma adecuada a la audiencia adecuada.\n\nCrea `src/pages/sitemap.xml.ts` para generar un sitemap que incluya todas tus rutas localizadas.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nCrea `src/pages/robots.txt.ts` para controlar el rastreo de los motores de búsqueda.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### Configuración de TypeScript\n\nIntlayer utiliza el aumento de módulos (module augmentation) para aprovechar TypeScript, haciendo que tu código sea más robusto. Si usas la sintaxis de decoradores, asegúrate de activar `experimentalDecorators` en tus opciones de compilación.\n\n\n\n\n\nAsegúrate de que tu configuración de TypeScript incluya los tipos autogenerados.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Obligatorio para el soporte de decoradores en Lit\n },\n include: [\n // ... tu configuración de TypeScript existente\n \".intlayer/**/*.ts\", // Incluir tipos autogenerados\n ],\n}\n```\n\n### Configuración de Git\n\nSe recomienda ignorar los archivos generados por Intlayer. Esto evita incluirlos en tu repositorio de Git.\n\nPara hacerlo, añade las siguientes instrucciones a tu archivo `.gitignore`:\n\n```bash\n# Ignorar archivos generados por Intlayer\n.intlayer\n```\n\n### Extensión de VS Code\n\nPara mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la **extensión oficial de Intlayer para VS Code**.\n\n[Instalar desde el VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nEsta extensión proporciona:\n\n- **Autocompletado** para las claves de traducción.\n- **Detección de errores en tiempo real** para traducciones faltantes.\n- **Previsualización en línea** del contenido traducido.\n- **Acciones rápidas** para crear y actualizar traducciones fácilmente.\n\nPara más información sobre el uso de la extensión, consulta la [documentación de la extensión para VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Opcional) Paso 15 : Extraer el contenido de tus componentes\n\nSi tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.\n\nPara facilitar este proceso, Intlayer propone un [compilador](/es/doc/compiler) / [extractor](/es/doc/concept/cli/extract) para transformar tus componentes y extraer el contenido.\n\nPara configurarlo, puedes agregar una sección `compiler` en tu archivo `intlayer.config.ts` :\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Resto de tu configuración\n compiler: {\n /**\n * Indica si el compilador debe estar habilitado.\n */\n enabled: true,\n\n /**\n * Define la ruta de los archivos de salida\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.\n */\n saveComponents: false,\n\n /**\n * Prefijo de clave de diccionario\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nEjecuta el extractor para transformar tus componentes y extraer el contenido\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nActualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Agrega el plugin del compilador\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # O npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # O pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # O yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### Profundiza más\n\nSi quieres saber más, también puedes implementar el [Editor Visual](/es/doc/concept/editor) o usar el [CMS](/es/doc/concept/cms) para externalizar tus contenidos.\n","about":"Aprende a añadir internacionalización (i18n) a tu sitio Astro + Lit con Intlayer. Sigue esta guía para que tu sitio sea multilingüe.","url":"https://intlayer.org/es/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internacionalización, documentación, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desarrolladores, Gestores de Contenido"}}

Creación:2026-04-24Última actualización:2026-05-06