Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
История версий
- "Обновление использования API useIntlayer в Solid для прямого доступа к свойствам"v8.9.004.05.2026
- "Добавить команду init"v7.5.930.12.2025
- "Обновление для интеграции с Astro, конфигурация, использование"v6.2.003.10.2025
Содержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Переведите ваш сайт Astro с помощью Intlayer | Интернационализация (i18n)
Содержание
Что такое Intlayer?
Intlayer - это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения многоязычной поддержки в современных веб-приложениях.
С Intlayer вы можете:
- Легко управлять переводами, используя декларативные словари на уровне компонентов.
- Динамически локализовать метаданные, маршруты и контент.
- Обеспечить поддержку TypeScript с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
- Пользоваться расширенными функциями, такими как динамическое определение локали и переключение языков.
Пошаговое руководство по настройке Intlayer в Astro
Посмотреть Шаблон приложения на GitHub.
Шаг 1: Установка зависимостей
Установите необходимые пакеты с помощью вашего менеджера пакетов:
Копировать код в буфер обмена
npm install intlayer astro-intlayer# Опционально: добавить поддержку островов Reactnpm install react react-dom react-intlayer @astrojs/reactintlayer Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, переводами, объявлением контента, транспиляцией и командами CLI.
astro-intlayer Включает плагин интеграции для Astro для интеграции Intlayer с бандлером Vite, а также промежуточное ПО (middleware) для определения предпочтительной локали пользователя, управления куки и обработки перенаправлений 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, перенаправления middleware, названия куки, расположение и расширение ваших объявлений контента, отключить логи 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() используется для интеграции Intlayer с Astro. Он обеспечивает сборку файлов объявления контента и отслеживает их изменения в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Astro. Кроме того, он предоставляет псевдонимы (aliases) для оптимизации производительности.
Шаг 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", ru: "Привет, мир", }), },} satisfies Dictionary;export default appContent;Ваши объявления контента могут быть определены в любом месте вашего приложения, если они включены в каталогcontentDir(по умолчанию./src) и соответствуют расширению файла объявления контента (по умолчанию.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Более подробную информацию см. в документации по объявлению контента.
Шаг 5: Использование контента в Astro
Вы можете использовать словари напрямую в файлах .astro, используя основные хелперы, экспортируемые из intlayer.
Копировать код в буфер обмена
---import { getIntlayer, getLocaleFromPath, getLocalizedUrl, defaultLocale, localeMap, getHTMLTextDir, type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <title>{title}</title> <!-- Canonical link: Tells search engines which is the primary version of this page --> <link rel="canonical" href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)} /> <!-- Hreflang: Tell Google about all localized versions --> { localeMap(({ locale: mapLocale }) => ( <link rel="alternate" hreflang={mapLocale} href={new URL( getLocalizedUrl(Astro.url.pathname, mapLocale), Astro.site )} /> )) } <!-- x-default: Fallback for users in unmatched languages --> <link rel="alternate" hreflang="x-default" href={new URL( getLocalizedUrl(Astro.url.pathname, defaultLocale), Astro.site )} /> </head> <body> <header> <LocaleSwitcher /> </header> <main> <h1>{title}</h1> </main> </body></html>Шаг 6: Локализованная маршрутизация
Создайте динамический сегмент маршрута для обслуживания локализованных страниц, например src/pages/[locale]/index.astro:
Копировать код в буфер обмена
<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>Интеграция Astro добавляет middleware 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 использует расширение модулей (module augmentation), чтобы воспользоваться преимуществами TypeScript и сделать вашу кодовую базу более надежной.
Убедитесь, что ваша конфигурация TypeScript включает автогенерируемые типы.
Копировать код в буфер обмена
{ // ... Ваши существующие конфигурации TypeScript "include": [ // ... Ваши существующие конфигурации TypeScript ".intlayer/**/*.ts", // Включить автогенерируемые типы ],}Настройка Git
Рекомендуется игнорировать файлы, созданные Intlayer. Это позволяет избежать их добавления в ваш Git-репозиторий.
Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:
Копировать код в буфер обмена
# Игнорировать файлы, созданные Intlayer.intlayerРасширение для VS Code
Для улучшения процесса разработки с использованием Intlayer вы можете установить официальное расширение Intlayer для VS Code.
Установить из VS Code Marketplace
Это расширение предоставляет:
- Автодополнение для ключей перевода.
- Обнаружение ошибок в реальном времени для отсутствующих переводов.
- Встроенный предпросмотр переведенного контента.
- Быстрые действия для легкого создания и обновления переводов.
Более подробную информацию об использовании расширения см. в документации по расширению Intlayer для VS Code.
(Опционально) Шаг 15: Извлечение содержимого ваших компонентов
Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
Чтобы упростить этот процесс, Intlayer предлагает компилятор / экстрактор для преобразования ваших компонентов и извлечения содержимого.
Чтобы настроить его, вы можете добавить раздел compiler в ваш файл intlayer.config.ts:
Копировать код в буфер обмена
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Остальная часть вашей конфигурации
compiler: {
/**
* Указывает, должен ли быть включен компилятор.
*/
enabled: true,
/**
* Определяет путь к выходным файлам
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Указывает, должны ли компоненты сохраняться после преобразования. Таким образом, компилятор можно запустить только один раз для преобразования приложения, а затем удалить.
*/
saveComponents: false,
/**
* Префикс ключа словаря
*/
dictionaryKeyPrefix: "",
},
};
export default config;Запустите экстрактор для преобразования компонентов и извлечения содержимого
Копировать код в буфер обмена
npx intlayer extractДальнейшие шаги
Вы также можете внедрить визуальный редактор или вынести ваш контент во внешнюю CMS.