\n```\n\n> Jeśli chcesz użyć swojej treści w atrybucie `string`, takim jak `alt`, `title`, `href`, `aria-label` itp., możesz użyć wartości funkcji, np.:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Uwaga na temat konfiguracji routingu:**\n> Używana przez Ciebie struktura katalogów zależy od ustawienia `middleware.routing` w `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (domyślnie):** Zachowuje domyślny język w katalogu głównym (bez prefiksu) i dodaje prefiksy do pozostałych. Użyj `[...locale]`, aby obsłużyć wszystkie przypadki.\n> - **`prefix-all`:** Wszystkie adresy URL otrzymują prefiks języka. Możesz użyć standardowego `[locale]`, jeśli nie musisz traktować katalogu głównego oddzielnie.\n> - **`search-param` lub `no-prefix`:** Katalogi językowe nie są wymagane. Język jest zarządzany za pomocą parametrów zapytania lub plików cookie.\n\n### Krok 6: Utworzenie elementu niestandardowego Lit (Custom Element)\n\nUtwórz element niestandardowy Lit. Wywołaj `installIntlayer` w `connectedCallback`, używając atrybutu `locale` opartego na serwerze, aby zainicjować singleton tłumaczeń po stronie klienta.\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 // Zainicjuj językiem wykrytym przez serwer\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> Atrybut `locale` jest przekazywany ze strony Astro (wykrywanie po stronie serwera) i używany do zainicjowania `installIntlayer` w `connectedCallback`, ustawiając początkowy język dla wszystkich hooków `ReactiveController` wewnątrz elementu.\n\n> `useIntlayer` jest zarejestrowany jako `ReactiveController`. Automatycznie instruuje on komponent o konieczności ponownego renderowania (re-render) przy zmianie języka, więc nie jest wymagana żadna dodatkowa logika subskrypcji.\n\n### Krok 7: Dodanie przełącznika języków\n\nFunkcjonalność przełączania języków jest zintegrowana bezpośrednio z metodą `render()` elementu niestandardowego Lit (patrz krok 6 powyżej). Wykorzystuje ona `useLocale` z `lit-intlayer` i przechodzi do zlokalizowanego adresu URL, gdy użytkownik wybierze nowy język:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Wewnątrz klasy LitElement, po konfiguracji useLocale z kroku 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Przekieruj do zlokalizowanego adresu URL przy zmianie języka\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> **Uwaga na temat reaktywności Lit:**\n> `useLocale` zwraca `ReactiveController`. Gdy wywoływane jest `setLocale`, kontroler automatycznie żąda ponownego renderowania, aktualizując stan przycisków bez potrzeby ręcznej manipulacji DOM.\n\n> **Uwaga na temat trwałości:**\n> Użycie `onLocaleChange` do przekierowania przez `window.location.href` zapewnia, że nowy adres URL z prefiksem językowym zostanie odwiedzony. Pozwala to oprogramowaniu pośredniczącemu Intlayer ustawić plik cookie języka i zapamiętać preferencje użytkownika przy przyszłych wizytach.\n\n### Krok 8: Sitemap i Robots.txt\n\nIntlayer oferuje narzędzia do dynamicznego generowania zlokalizowanej mapy witryny oraz pliku robots.txt.\n\n#### Sitemap\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nUtwórz plik `src/pages/sitemap.xml.ts`, aby wygenerować mapę witryny obejmującą wszystkie Twoje zlokalizowane trasy.\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\nUtwórz plik `src/pages/robots.txt.ts`, aby kontrolować indeksowanie przez wyszukiwarki.\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### Konfiguracja TypeScript\n\nIntlayer wykorzystuje rozszerzenie modułów (module augmentation), aby skorzystać z TypeScript, czyniąc bazę kodu bardziej solidną. Jeśli używasz składni dekoratorów, upewnij się, że w opcjach kompilatora włączono `experimentalDecorators`.\n\n\n\n\n\nUpewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane typy.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Wymagane dla obsługi dekoratorów w Lit\n },\n \"include\": [\n // ... Twoja istniejąca konfiguracja TypeScript\n \".intlayer/**/*.ts\", // Uwzględnij automatycznie generowane typy\n ],\n}\n```\n\n### Konfiguracja Git\n\nZaleca się ignorowanie plików generowanych przez Intlayer. Zapobiega to ich przesyłaniu do repozytorium Git.\n\nAby to zrobić, dodaj następujące instrukcje do pliku `.gitignore`:\n\n```bash\n# Ignoruj pliki generowane przez Intlayer\n.intlayer\n```\n\n### Rozszerzenie VS Code\n\nAby poprawić wrażenia z programowania z Intlayer, możesz zainstalować **oficjalne rozszerzenie Intlayer dla VS Code**.\n\n[Instalacja z VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nTo rozszerzenie zapewnia:\n\n- **Autouzupełnianie** kluczy tłumaczeń.\n- **Wykrywanie błędów w czasie rzeczywistym** dla brakujących tłumaczeń.\n- **Podgląd inline** przetłumaczonej treści.\n- **Szybkie akcje** do łatwego tworzenia i aktualizowania tłumaczeń.\n\nWięcej informacji na temat korzystania z rozszerzenia znajdziesz w [dokumentacji rozszerzenia VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Opcjonalnie) Krok 17 : Wyodrębnij zawartość swoich komponentów\n\nJeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.\n\nAby ułatwić ten proces, Intlayer proponuje [kompilator](/pl/doc/compiler) / [ekstraktor](/pl/doc/concept/cli/extract), aby przetransformować komponenty i wyodrębnić zawartość.\n\nAby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Reszta Twojej konfiguracji\n compiler: {\n /**\n * Wskazuje, czy kompilator powinien być włączony.\n */\n enabled: true,\n\n /**\n * Definiuje ścieżkę plików wyjściowych\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.\n */\n saveComponents: false,\n\n /**\n * Prefiks klucza słownika\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nUruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość\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\nZaktualizuj `vite.config.ts`, aby dołączyć wtyczkę `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(), // Dodaje wtyczkę kompilatora\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Lub npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### Pogłębiaj swoją wiedzę\n\nJeśli chcesz dowiedzieć się więcej, możesz również wdrożyć [Edytor Wizualny](/pl/doc/concept/editor) lub użyć [CMS](/pl/doc/concept/cms), aby wyeksternalizować swoją treść.\n","about":"Dowiedz się, jak dodać międzynarodowość (i18n) do swojej witryny Astro + Lit za pomocą Intlayer. Postępuj zgodnie z tym przewodnikiem, aby uczynić swoją witrynę wielojęzyczną.","url":"https://intlayer.org/pl/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"międzynarodowość, dokumentacja, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Programiści, Menedżerowie treści"}}

Data utworzenia:2026-04-24Ostatnia aktualizacja:2026-05-06