Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Интеграция сервера MCP Intlayer в ваш любимый AI-ассистент позволяет получать все документы непосредственно из ChatGPT, DeepSeek, Cursor, VSCode и т.д.
Просмотр документации сервера MCPСодержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Начало работы с интернационализацией (i18n) с Intlayer и Astro
Смотрите Шаблон приложения на GitHub.
Что такое Intlayer?
Intlayer — это инновационная, с открытым исходным кодом библиотека интернационализации (i18n), разработанная для упрощения поддержки многоязычности в современных веб-приложениях.
С помощью Intlayer вы можете:
- Легко управлять переводами с использованием декларативных словарей на уровне компонентов.
- Динамически локализовать метаданные, маршруты и контент.
- Обеспечить поддержку TypeScript с помощью автогенерируемых типов, улучшая автозаполнение и обнаружение ошибок.
- Воспользоваться расширенными возможностями, такими как динамическое определение и переключение локали.
Пошаговое руководство по настройке Intlayer в Astro
Шаг 1: Установка зависимостей
Установите необходимые пакеты с помощью вашего менеджера пакетов:
npm install intlayer astro-intlayer# Optional: add React island supportnpm install react react-dom react-intlayer @astrojs/react
intlayer Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, переводами, объявлением контента, транспиляцией и CLI-командами.
astro-intlayer Включает плагин интеграции Astro для интеграции Intlayer с сборщиком Vite, а также промежуточное ПО для определения предпочитаемой пользователем локали, управления cookie и обработки перенаправления URL.
Шаг 2: Конфигурация вашего проекта
Создайте файл конфигурации для настройки языков вашего приложения:
Копировать код в буфер обмена
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // Ваши другие локали ], defaultLocale: Locales.ENGLISH, },};export default config;
Через этот файл конфигурации вы можете настроить локализованные URL, перенаправление в промежуточном ПО, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к документации по конфигурации.
Шаг 3: Интеграция Intlayer в вашу конфигурацию Astro
Добавьте плагин intlayer в вашу конфигурацию.
Копировать код в буфер обмена
// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({ integrations: [intlayer()],});
Плагин интеграции intlayer() для Astro используется для интеграции Intlayer с Astro. Он обеспечивает создание файлов деклараций контента и их мониторинг в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Astro. Кроме того, предоставляет алиасы для оптимизации производительности.
Шаг 4: Объявите ваш контент
Создайте и управляйте декларациями контента для хранения переводов:
Копировать код в буфер обмена
import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = { key: "app", content: { title: t({ en: "Hello World", fr: "Bonjour le monde", es: "Hola mundo", }), },} satisfies Dictionary;export default appContent;
Ваши декларации контента могут быть определены в любом месте вашего приложения, как только они включены в директорию contentDir (по умолчанию, ./src). И соответствуют расширению файла декларации контента (по умолчанию, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).
Для получения дополнительной информации обратитесь к документации по декларации контента.
Шаг 5: Используйте ваш контент в Astro
Вы можете использовать словари напрямую в файлах .astro, используя основные помощники, экспортируемые intlayer.
Копировать код в буфер обмена
<!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>{title}</title> </head> <body> <h1>{title}</h1> </body></html>
Шаг 6: Локализованный роутинг
Создайте динамический сегмент маршрута для обслуживания локализованных страниц, например src/pages/[locale]/index.astro:
Копировать код в буфер обмена
<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>
Интеграция Astro добавляет промежуточное ПО Vite во время разработки, которое помогает с маршрутизацией с учётом локали и определениями окружения. Вы всё ещё можете создавать ссылки между локалями, используя свою логику или утилиты, такие как getLocalizedUrl из intlayer.
Шаг 7: Продолжайте использовать ваш любимый фреймворк
Продолжайте использовать ваш любимый фреймворк для создания вашего приложения.
- Intlayer + React: Intlayer с React
- Intlayer + Vue: Intlayer с Vue
- Intlayer + Svelte: Intlayer с Svelte
- Intlayer + Solid: Intlayer с Solid
- Intlayer + Preact: Intlayer с Preact
Настройка TypeScript
Intlayer использует расширение модулей, чтобы получить преимущества TypeScript и сделать вашу кодовую базу более надежной.
Убедитесь, что ваша конфигурация TypeScript включает автоматически сгенерированные типы.
Копировать код в буфер обмена
{ // ... Ваши существующие конфигурации TypeScript "include": [ // ... Ваши существующие конфигурации TypeScript ".intlayer/**/*.ts", // Включить автоматически сгенерированные типы ],}
Конфигурация Git
Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш Git-репозиторий.
Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:
# Игнорировать файлы, сгенерированные Intlayer.intlayer
Расширение VS Code
Для улучшения вашего опыта разработки с Intlayer вы можете установить официальное расширение Intlayer для VS Code.
Установить из магазина расширений VS Code
Это расширение предоставляет:
- Автозаполнение ключей переводов.
- Обнаружение ошибок в реальном времени для отсутствующих переводов.
- Встроенный просмотр переведённого контента.
- Быстрые действия для лёгкого создания и обновления переводов.
Для получения дополнительной информации о том, как использовать расширение, обратитесь к документации расширения Intlayer для VS Code.
Продвинутые возможности
Для расширения возможностей вы можете реализовать визуальный редактор или вынести ваш контент с помощью CMS.
История документации
Версия | Дата | Изменения |
---|---|---|
6.2.0 | 2025-10-03 | Обновление для интеграции с Astro, конфигурация, использование |