Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI
Historia wersji
- "Aktualizacja użycia API useIntlayer w Solid do bezpośredniego dostępu do właściwości"v8.9.04.05.2026
- "Dodano polecenie init"v7.5.930.12.2025
- "Aktualizacja integracji z Astro, konfiguracji i użytkowania"v6.2.03.10.2025
Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.
Zobacz ostatnią wersję oryginalnej treści w języku angielskimJeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.
Link do dokumentacji na GitHubieKopiuj dokument Markdown do schowka
Przetłumacz swoją witrynę Astro za pomocą Intlayer | Międzynarodowość (i18n)
Spis treści
Czym jest Intlayer?
Intlayer to innowacyjna biblioteka międzynarodowości (i18n) o otwartym kodzie źródłowym, zaprojektowana w celu uproszczenia obsługi wielojęzyczności w nowoczesnych aplikacjach internetowych.
Dzięki Intlayer możesz:
- Łatwo zarządzać tłumaczeniami: Korzystając z deklaratywnych słowników na poziomie komponentów.
- Dynamicznie lokalizować metadane, trasy i treści.
- Zapewnić obsługę TypeScript: Dzięki automatycznie generowanym typom dla lepszego autouzupełniania i wykrywania błędów.
- Korzystać z zaawansowanych funkcji: Takich jak dynamiczne wykrywanie języka i przełączanie języków.
Przewodnik krok po kroku po konfiguracji Intlayer w Astro
Sprawdź szablon aplikacji na GitHubie.
Krok 1: Zainstaluj zależności
Zainstaluj niezbędne pakiety za pomocą preferowanego menedżera pakietów:
Skopiuj kod do schowka
npm install intlayer astro-intlayer# opcjonalnie: jeśli chcesz dodać obsługę islandów Reactnpm install react react-dom react-intlayer @astrojs/reactintlayer Główny pakiet zapewniający narzędzia i18n do zarządzania konfiguracją, tłumaczeniami, deklaracją treści, transpilacją i poleceniami CLI.
astro-intlayer Wtyczka integracyjna Astro służąca do połączenia Intlayer z bundlerem Vite; zawiera również oprogramowanie pośredniczące (middleware) do wykrywania preferowanego języka użytkownika, zarządzania plikami cookie i obsługi przekierowań URL.
Krok 2: Skonfiguruj swój projekt
Utwórz plik konfiguracyjny, aby zdefiniować języki swojej aplikacji:
Skopiuj kod do schowka
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.POLISH, // Twoje inne języki ], defaultLocale: Locales.ENGLISH, },};export default config;Za pośrednictwem tego pliku konfiguracyjnego możesz ustawić zlokalizowane adresy URL, przekierowania oprogramowania pośredniczącego, nazwy plików cookie, lokalizację i rozszerzenia deklaracji treści, wyłączyć dzienniki Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w dokumentacji konfiguracji.
Krok 3: Zintegruj Intlayer ze swoją konfiguracją Astro
Dodaj wtyczkę intlayer do konfiguracji Astro.
Skopiuj kod do schowka
// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({ integrations: [intlayer()],});Wtyczka integracyjna intlayer() służy do integracji Intlayer z Astro. Zapewnia ona generowanie plików deklaracji treści i monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Astro i udostępnia aliasy w celu optymalizacji wydajności.
Krok 4: Zadeklaruj swoją treść
Twórz i zarządzaj swoimi deklaracjami treści, aby przechowywać tłumaczenia:
Skopiuj kod do schowka
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", pl: "Witaj świecie", }), },} satisfies Dictionary;export default appContent;Deklaracje treści mogą być definiowane w dowolnym miejscu aplikacji, pod warunkiem, że są zawarte wcontentDir(domyślnie./src) i pasują do rozszerzenia pliku deklaracji treści (domyślnie.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Więcej informacji znajdziesz w dokumentacji deklaracji treści.
Krok 5: Korzystanie z treści w Astro
Możesz konsumować słowniki bezpośrednio w swoich plikach .astro, używając podstawowych pomocników wyeksportowanych z intlayer.
Skopiuj kod do schowka
---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>Krok 6: Zlokalizowany routing
Twórz dynamiczne segmenty tras (np. src/pages/[locale]/index.astro), aby serwować zlokalizowane strony:
Skopiuj kod do schowka
---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>Integracja z Astro dodaje oprogramowanie pośredniczące Vite, które pomaga w routingu uwzględniającym język i definiowaniu środowiska podczas programowania. Możesz również użyć własnej logiki lub narzędzi intlayer, takich jak getLocalizedUrl, aby tworzyć linki między językami.
Krok 7: Kontynuuj korzystanie ze swojego ulubionego frameworka
Kontynuuj budowanie swojej aplikacji, korzystając z wybranego frameworka.
- Intlayer + React: Intlayer z React
- Intlayer + Vue: Intlayer z Vue
- Intlayer + Svelte: Intlayer z Svelte
- Intlayer + Solid: Intlayer z Solid
- Intlayer + Preact: Intlayer z Preact
Konfiguracja TypeScript
Intlayer wykorzystuje rozszerzenie modułów (module augmentation), aby skorzystać z TypeScript, czyniąc bazę kodu bardziej solidną.
Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane typy.
Skopiuj kod do schowka
{ // ... Twoja istniejąca konfiguracja TypeScript "include": [ // ... Twoja istniejąca konfiguracja TypeScript ".intlayer/**/*.ts", // Uwzględnij automatycznie generowane typy ],}Konfiguracja Git
Zaleca się ignorowanie plików generowanych przez Intlayer. Zapobiega to ich przesyłaniu do repozytorium Git.
Aby to zrobić, dodaj następujące instrukcje do pliku .gitignore:
Skopiuj kod do schowka
# Ignoruj pliki generowane przez Intlayer.intlayerRozszerzenie VS Code
Aby poprawić wrażenia z programowania z Intlayer, możesz zainstalować oficjalne rozszerzenie Intlayer dla VS Code.
Instalacja z VS Code Marketplace
To rozszerzenie zapewnia:
- Autouzupełnianie kluczy tłumaczeń.
- Wykrywanie błędów w czasie rzeczywistym dla brakujących tłumaczeń.
- Podgląd inline przetłumaczonej treści.
- Szybkie akcje do łatwego tworzenia i aktualizowania tłumaczeń.
Więcej informacji na temat korzystania z rozszerzenia znajdziesz w dokumentacji rozszerzenia VS Code.
(Opcjonalnie) Krok 17 : Wyodrębnij zawartość swoich komponentów
Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
Aby ułatwić ten proces, Intlayer proponuje kompilator / ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość.
Aby go skonfigurować, możesz dodać sekcję compiler w pliku intlayer.config.ts:
Skopiuj kod do schowka
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Reszta Twojej konfiguracji
compiler: {
/**
* Wskazuje, czy kompilator powinien być włączony.
*/
enabled: true,
/**
* Definiuje ścieżkę plików wyjściowych
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
*/
saveComponents: false,
/**
* Prefiks klucza słownika
*/
dictionaryKeyPrefix: "",
},
};
export default config;Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość
Skopiuj kod do schowka
npx intlayer extractPogłębiaj swoją wiedzę
Jeśli chcesz dowiedzieć się więcej, możesz również wdrożyć Edytor Wizualny lub użyć CMS, aby wyeksternalizować swoją treść.