\n```\n\n> Якщо ви хочете використовувати свій контент в атрибуті `рядка`, такому як `alt`, `title`, `href`, `aria-label` тощо, ви можете використовувати значення функції, наприклад:\n\n> ```html\n> \n> \n> \n> ```\n\n> **Примітка щодо налаштування маршрутизації:**\n> Структура каталогів, яку ви використовуєте, залежить від параметра `middleware.routing` у `intlayer.config.ts`:\n>\n> - **`prefix-no-default` (за замовчуванням):** Зберігає мову за замовчуванням у корені (без префікса) та додає префікси до інших. Використовуйте `[...locale]`, щоб охопити всі випадки.\n> - **`prefix-all`:** Усі URL-адреси отримують префікс мови. Ви можете використовувати стандартний `[locale]`, якщо вам не потрібно окремо обробляти корінь.\n> - **`search-param` або `no-prefix`:** Каталоги мов не потрібні. Мова керується за допомогою параметрів запиту або cookie.\n\n### Крок 6: Створення Lit Custom Element\n\nСтворіть Lit custom element. Викличте `installIntlayer` у `connectedCallback`, використовуючи атрибут `locale`, отриманий від сервера, щоб ініціалізувати синглтон керування перекладами на стороні клієнта.\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 // Ініціалізація з мовою, визначеною сервером\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> Атрибут `locale` передається зі сторінки Astro (визначення на стороні сервера) і використовуватися в `connectedCallback` для запуску `installIntlayer`, встановлюючи початкову мову для всіх хуків `ReactiveController` всередині компонента.\n\n> `useIntlayer` зареєстровано як `ReactiveController`. Він автоматично надсилатиме запит на ререндер компонента при зміні мови, тому не потрібно додавати логіку підписки.\n\n### Крок 7: Додавання перемикача мов\n\nФункціональність перемикання мов інтегрована безпосередньо в метод `render()` Lit custom element (див. крок 6 вище). Він використовує `useLocale` з `lit-intlayer` і переходить за локалізованою URL-адресою, коли користувач обирає нову мову:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Всередині класу LitElement, після встановлення useLocale з кроку 6:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Перейти за локалізованою URL-адресою при зміні мови\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> **Примітка щодо реактивності в Lit:**\n> `useLocale` повертає `ReactiveController`. Коли викликається `setLocale`, контролер автоматично запитує оновлення рендерингу, оновлюючи стан кнопок без потреби в ручних маніпуляціях з DOM.\n\n> **Примітка щодо стійкості:**\n> Використання `onLocaleChange` para redicuicamiento через `window.location.href` garantiza відвідування нової URL-адреси з мовним префіксом. Це дозволяє middleware Intlayer встановити cookie мови та запам'ятати вибір користувача для майбутніх візитів.\n\n### Крок 8: Sitemap та Robots.txt\n\nIntlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу 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\nСтворіть `src/pages/sitemap.xml.ts` для генерації карти сайту, що охоплює всі ваші локалізовані маршрути.\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\nСтворіть `src/pages/robots.txt.ts` для керування скануванням пошуковими системами.\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### Конфігурація TypeScript\n\nIntlayer використовує розширення модулів (module augmentation), щоб отримати переваги від TypeScript, роблячи вашу кодову базу надійнішою. Якщо ви використовуєте синтаксис декораторів, переконайтеся, що ви ввімкнули `experimentalDecorators` в опціях компилятора.\n\n\n\n\n\nПереконайтеся, що ваша конфігурація TypeScript включає автоматично згенеровані типи.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Необхідно для підтримки декораторів у Lit\n },\n \"include\": [\n // ... ваша існуюча конфігурація TypeScript\n \".intlayer/**/*.ts\", // Включити автоматично згенеровані типи\n ],\n}\n```\n\n### Конфігурація Git\n\nМи рекомендуємо ігнорувати файли, згенеровані Intlayer. Це запобігає їх потраплянню до вашого Git-репозиторію.\n\nДля цього додайте наступні інструкції до вашого файлу `.gitignore`:\n\n```bash\n# Ігнорувати файли, згенеровані Intlayer\n.intlayer\n```\n\n### Розширення для VS Code\n\nЩоб покращити ваш досвід розробки з Intlayer, ви можете встановити **офіційне розширення Intlayer для VS Code**.\n\n[Встановити з VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nЦе розширення забезпечує:\n\n- **Автозаповнення** ключів перекладу.\n- **Виявлення помилок у реальному часі** для відсутніх перекладів.\n- **Попередній перегляд** перекладеного вмісту.\n- **Швидкі дії** для легкого створення та оновлення перекладів.\n\nДля отримання додаткової інформації про використання розширення дивіться [документацію розширення VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів\n\nЯкщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.\n\nЩоб спростити цей процес, Intlayer пропонує [компілятор](/uk/doc/compiler) / [екстрактор](/uk/doc/concept/cli/extract) для перетворення ваших компонентів і витягування вмісту.\n\nЩоб налаштувати його, ви можете додати розділ `compiler` у свій файл `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Інша частина вашої конфігурації\n compiler: {\n /**\n * Вказує, чи повинен бути включений компілятор.\n */\n enabled: true,\n\n /**\n * Визначає шлях до вихідних файлів\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Вказує, чи повинні компоненти зберігатися після перетворення. Таким чином, компілятор можна запустити лише один раз для перетворення програми, а потім видалити.\n */\n saveComponents: false,\n\n /**\n * Префікс ключа словника\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nЗапустіть екстрактор для перетворення компонентів і витягування вмісту\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\nОновіть свій `vite.config.ts`, щоб включити плагін `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(), // Додає плагін компілятора\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Або 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### Поглиблюйте свої знання\n\nЯкщо ви хочете дізнатися більше, ви також можете впровадити [Візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/uk/intlayer_visual_editor.md) або використовувати [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/uk/intlayer_CMS.md), щоб винести ваш вміст назовні.\n","about":"Дізнайтеся, як додати інтернаціоналізацію (i18n) на свій сайт Astro + Lit за допомогою Intlayer. Дотримуйтесь цього посібника, щоб зробити свій сайт багатомовним.","url":"https://intlayer.org/uk/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"інтернаціоналізація, документація, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Розробники, менеджери контенту"}}

Дата створення:2026-04-24Останнє оновлення:2026-05-06