\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`:** Папка локали не нужна. Локаль обрабатывается через параметры поиска или куки.\n\n### Шаг 6: Создание кастомного элемента Lit\n\nСоздайте кастомный элемент Lit. Вызовите `installIntlayer` в `connectedCallback` со свойством `locale`, определенным сервером, чтобы инициализировать синглтон Intlayer на клиенте.\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 (показано в Шаге 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` для перенаправления через `window.location.href` гарантирует посещение нового языкового URL, позволяя middleware Intlayer установить куки языка и запомнить предпочтение пользователя для будущих посещений.\n\n### Шаг 8: Sitemap и Robots.txt\n\nIntlayer предоставляет утилиты для динамического создания локализованных карт сайта и файлов robots.txt.\n\n#### Sitemap\n\nIntlayer поставляется со встроенным генератором карты сайта, который поможет вам легко создать карту сайта для вашего приложения. Он учитывает локализованные маршруты и добавляет необходимые метаданные для поисковых систем.\n\n> Создаваемая Intlayer карта сайта поддерживает пространство имен `xhtml:link` (Hreflang XML Extensions). В отличие от стандартных генераторов карт сайта, которые просто перечисляют прямые URL-адреса, Intlayer автоматически создает необходимые двусторонние связи между всеми языковыми версиями страницы (например, `/about`, `/about?lang=fr` и `/about?lang=es`). Это гарантирует, что поисковые системы будут правильно индексировать и показывать нужную языковую версию соответствующей аудитории.\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 использует расширение модулей, чтобы воспользоваться преимуществами TypeScript и сделать вашу кодовую базу более надежной. Lit требует включения `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Для получения более подробной информации об использовании расширения см. [документацию расширения Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Опционально) Шаг 15: Извлечение содержимого ваших компонентов\n\nЕсли у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.\n\nЧтобы упростить этот процесс, Intlayer предлагает [компилятор](/ru/doc/compiler) / [экстрактор](/ru/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Вы также можете внедрить [визуальный редактор](/ru/doc/concept/editor) или вынести ваш контент во внешнюю [CMS](/ru/doc/concept/cms).\n","about":"Узнайте, как добавить интернационализацию (i18n) на ваш сайт Astro + Lit с помощью Intlayer. Следуйте этому руководству, чтобы сделать ваш сайт многоязычным.","url":"https://intlayer.org/ru/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"Интернационализация, Документация, Intlayer, Astro, Lit, Веб-компоненты, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Разработчики, менеджеры контента"}}

Создание:2026-04-24Последнее обновление:2026-05-06