\n```\n\n> Se desideri utilizzare il tuo contenuto in un attributo `stringa`, come `alt`, `title`, `href`, `aria-label`, ecc., puoi utilizzare il valore della funzione, come:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Nota sulla configurazione del routing:**\n> La struttura delle directory che utilizzi dipende dall'impostazione `middleware.routing` in `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (predefinito):** mantiene la lingua predefinita alla radice (senza prefisso) e aggiunge prefissi alle altre. Usa `[...locale]` per catturare tutti i casi.\n> - **`prefix-all`:** tutti gli URL hanno il prefisso della lingua. Puoi usare lo standard `[locale]` se non hai bisogno di gestire la radice separatamente.\n> - **`search-param` o `no-prefix`:** non sono necessarie directory per la lingua. La lingua viene gestita tramite parametri di query o cookie.\n\n### Passaggio 6: Crea un componente Lit Custom Element\n\nCrea un Lit custom element. Richiama `installIntlayer` nel `connectedCallback` utilizzando l'attributo `locale` basato sul server per inizializzare il singleton di traduzione lato client.\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 // Inizializza con la lingua rilevata dal server\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> L'attributo `locale` viene passato dalla pagina Astro (rilevamento lato server) e utilizzato per inizializzare `installIntlayer` nel `connectedCallback`, che imposta la lingua iniziale per tutti gli hook `ReactiveController` all'interno dell'elemento.\n\n> `useIntlayer` viene registrato come `ReactiveController`. Richiede automaticamente il re-rendering dell'elemento quando la lingua cambia, quindi non è necessaria alcuna logica di sottoscrizione aggiuntiva.\n\n### Passaggio 7: Aggiungi un selettore di lingua\n\nLa funzionalità di cambio lingua è integrata direttamente all'interno del metodo `render()` del Lit custom element (vedi passaggio 6 sopra). Utilizza `useLocale` di `lit-intlayer` e naviga verso l'URL localizzato quando un utente seleziona una nuova lingua:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// All'interno della classe LitElement, dopo la configurazione di useLocale nel passaggio 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Naviga verso l'URL localizzato al cambio di lingua\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 sulla reattività di Lit:**\n> `useLocale` restituisce un `ReactiveController`. Quando viene chiamato `setLocale`, il controller richiede automaticamente un re-rendering, aggiornando lo stato del pulsante attivo senza manipolazione manuale del DOM.\n\n> **Nota sulla persistenza:**\n> L'uso di `onLocaleChange` per reindirizzare tramite `window.location.href` assicura che il nuovo URL linguistico venga visitato, consentendo al middleware Intlayer di impostare il cookie della lingua e di ricordare la preferenza dell'utente nelle visite future.\n\n### Passaggio 8: Sitemap e Robots.txt\n\nIntlayer offre utilità per creare dinamicamente la tua sitemap localizzata e i file robots.txt.\n\n#### Sitemap\n\nIntlayer include un generatore di sitemap integrato per aiutarti a creare facilmente una sitemap per la tua applicazione. Gestisce i percorsi localizzati e aggiunge i metadati necessari per i motori di ricerca.\n\n> La sitemap generata da Intlayer supporta lo spazio dei nomi `xhtml:link` (Hreflang XML Extensions). A differenza dei generatori di sitemap predefiniti che elencano solo URL grezzi, Intlayer crea automaticamente i collegamenti bidirezionali richiesti tra tutte le versioni linguistiche di una pagina (ad esempio, `/about`, `/about?lang=fr` e `/about?lang=es`). Ciò garantisce che i motori di ricerca indicizzino e servano correttamente la versione linguistica corretta al pubblico giusto.\n\nCrea `src/pages/sitemap.xml.ts` per generare una sitemap che includa tutti i tuoi percorsi localizzati.\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` per controllare la scansione dei motori di ricerca.\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### Configurazione TypeScript\n\nIntlayer utilizza l'aumento dei moduli (module augmentation) per sfruttare TypeScript, rendendo la tua base di codice più robusta. Se utilizzi la sintassi dei decoratori, assicura di abilitare `experimentalDecorators` nelle opzioni del compilatore.\n\n\n\n\n\nAssicurati che la tua configurazione TypeScript includa i tipi autogenerati.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Richiesto per il supporto dei decoratori in Lit\n },\n include: [\n // ... la tua configurazione TypeScript esistente\n \".intlayer/**/*.ts\", // Includi i tipi autogenerati\n ],\n}\n```\n\n### Configurazione Git\n\nSi consiglia di ignorare i file generati da Intlayer. Ciò evita di salvarli nel tuo repository Git.\n\nPer farlo, aggiungi le seguenti istruzioni al tuo file `.gitignore`:\n\n```bash\n# Ignora i file generati da Intlayer\n.intlayer\n```\n\n### Estensione VS Code\n\nPer migliorare la tua esperienza di sviluppo con Intlayer, puoi installare l'**estensione ufficiale Intlayer per VS Code**.\n\n[Installa dal VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nQuesta estensione fornisce:\n\n- **Autocompletamento** per le chiavi di traduzione.\n- **Rilevamento degli errori in tempo reale** per le traduzioni mancanti.\n- **Anteprima inline** del contenuto tradotto.\n- **Azioni rapide** per creare e aggiornare facilmente le traduzioni.\n\nPer maggiori informazioni sull'utilizzo dell'estensione, consulta la [documentazione dell'estensione VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Opzionale) Passaggio 15: Estrarre il contenuto dei tuoi componenti\n\nSe hai una base di codice esistente, trasformare migliaia di file può richiedere molto tempo.\n\nPer facilitare questo processo, Intlayer propone un [compilatore](/it/doc/compiler) / [estrattore](/it/doc/concept/cli/extract) per trasformare i tuoi componenti ed estrarre il contenuto.\n\nPer configurarlo, puoi aggiungere una sezione `compiler` nel tuo file `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 della tua configurazione\n compiler: {\n /**\n * Indica se il compilatore deve essere abilitato.\n */\n enabled: true,\n\n /**\n * Definisce il percorso dei file di output\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica se i componenti devono essere salvati dopo essere stati trasformati. In questo modo, il compilatore può essere eseguito solo una volta per trasformare l'app e poi rimosso.\n */\n saveComponents: false,\n\n /**\n * Prefisso chiave dizionario\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nEsegui l'estrattore per trasformare i tuoi componenti ed estrarre il contenuto\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\nAggiorna il tuo `vite.config.ts` per includere il 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(), // Aggiunge il plugin del compilatore\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Oppure 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### Approfondisci\n\nSe vuoi saperne di più, puoi anche implementare il [Visual Editor](/it/doc/concept/editor) o utilizzare il [CMS](/it/doc/concept/cms) per esternalizzare i tuoi contenuti.\n","about":"Scopri come aggiungere l'internazionalizzazione (i18n) al tuo sito Astro + Lit con Intlayer. Segui questa guida per rendere il tuo sito multilingue.","url":"https://intlayer.org/it/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"internazionalizzazione, documentazione, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}

Creazione:2026-04-24Ultimo aggiornamento:2026-05-06