Astro
Интегрируйте i1n с Astro для статических и многоязычных сайтов с серверным рендерингом.
Настройка
Запустите i1n init в вашем проекте Astro. CLI настроит вложенный формат JSON в директории locales/. Проекты Astro обычно используют i1n SDK в автономном режиме.
Создайте служебный модуль (например, src/i18n/index.ts), который инициализирует i1n и экспортирует функцию useTranslations(). Эта функция загружает соответствующие ресурсы локали и возвращает типобезопасную функцию t().
Использование
На страницах .astro вызовите useTranslations(locale) в frontmatter, чтобы получить функцию t(). Используйте ее для отображения переведенных строк в ваших шаблонах. Поскольку компоненты Astro работают во время сборки, переводы статически встраиваются в сгенерированный HTML.
Организуйте переводы по пространствам имен (например, common.json, home.json, docs.json), чтобы файлы оставались управляемыми. Используйте getLocalePath(locale, path) для создания URL с префиксом локали для внутренней навигации.
Статическая генерация
Используйте getStaticPaths() для создания страниц для всех поддерживаемых локалей. Каждый вариант локали создается как отдельная HTML-страница, что обеспечивает быструю загрузку и оптимальное SEO с правильными тегами hreflang.
Добавьте команду i1n pull в ваш шаг сборки, чтобы убедиться, что файлы перевода синхронизированы перед статической генерацией. Процесс сборки Astro автоматически сгенерирует все варианты локализации.
Режим моста
Проекты Astro обычно используют SDK i1n напрямую, а не внешнюю библиотеку i18n. Однако, если вы используете интеграцию с фреймворком (например, компоненты React внутри Astro), вы можете использовать режим моста (Bridge Mode) внутри этих островков фреймворка.
Для React-островов: registerI1n((key, params) => i18next.t(key, params)). Для Vue-островов: registerI1n((key, params) => i18n.global.t(key, params)). Оболочка Astro и острова фреймворков могут использовать предпочтительный подход каждого.
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}