Języki i tłumaczenia

Języki startowe i języki klienta

Języki dołączone do szablonu są listą startową, a nie zamkniętą listą wyboru. GrowSite Skeleton zaczyna od EN, PL i NL. Klient może później dodać kolejne języki w ustawieniach całej witryny w kreatorze.

Tłumaczenia

locales/pl.default.schema.json zawiera etykiety kreatora. W schema używaj np. "name": "t:sections.hero". locales/pl.default.json zawiera treści widoczne na stronie:

[[ t('footer.rights') ]]

Dodaj odpowiednio en.json i en.schema.json dla kolejnego języka. Brakujące tłumaczenie korzysta z defaultLocale, a ostatecznie z klucza. Obecny filtr t obsługuje odczyt klucza, bez pluralizacji i interpolacji parametrów.

Kompletny przykład słowników

locales/pl.default.json:

{"footer":{"rights":"Wszelkie prawa zastrzeżone."}}

locales/en.json:

{"footer":{"rights":"All rights reserved."}}

locales/en.schema.json:

{"sections":{"hero":"Hero section"},"settings":{"title":"Heading"}}

W schema: "label":"t:settings.title". Prefiks t: jest referencją etykiety kreatora, a filtr t tłumaczy stały tekst strony. Żaden z nich nie tłumaczy automatycznie treści wpisanej przez klienta.

Sprawdź oba języki oddzielnie w panelu i rendererze. Usuń klucz języka dodatkowego, aby potwierdzić fallback. Nie wpisuj przykładowej marki na stałe w stopce; użyj site.name.

Plugin Languages i ustawienia witryny

Przykład deklaracji w loom.json:

{
  "plugins": { "languages": "required", "blog": "optional" },
  "languages": { "locales": ["en", "pl", "nl"], "default": "en" },
  "defaultLocale": "en"
}

required oznacza plugin wymagany, a optional opcjonalny. Brak deklaracji Languages oznacza brak obsługi wielu języków. Languages jest bezpłatny we wszystkich pakietach. Wymagania są widoczne w detalach szablonu i sprawdzane przed aktywacją.

W ustawieniach szablonu klient dodaje języki, wybiera język domyślny i usuwa pozostałe. Obsługiwanych jest do 50 języków, np. de, fr, es, pt-BR, fil lub zh-Hant. Konfiguracja należy do witryny, nie wymaga zmiany paczki szablonu:

{
  "theme_settings": {
    "languages": { "locales": ["en", "pl", "nl", "de"], "default": "en" }
  }
}

Zakładki językowe w inspektorze, edycji live i wielojęzycznych formularzach korzystają z języków witryny. Teksty są niezależne, a układ sekcji i wygląd wspólne. Usunięcie języka wyłącza jego publiczne adresy, ale zachowuje tłumaczenia. Ponowne dodanie języka je przywraca. Ustawienia i tłumaczenia pojawiają się publicznie po publikacji kopii roboczej.

Adresy mają prefiks języka, np. https://przyklad.growsite.nl/de/home, lokalnie http://przyklad.growsite.test/de/home. Przy wejściu na adres bez prefiksu GrowSite wybiera obsługiwany język z preferencji przeglądarki/urządzenia (Accept-Language), zgodnie z ich kolejnością i priorytetem. Dopasowuje też warianty regionalne, np. pl-PL do pl. Jeśli żaden język nie pasuje albo przeglądarka nie przesyła preferencji, używany jest język domyślny — fallback. Przekierowanie jest tymczasowe, bez trwałego zapisywania w pamięci podręcznej. Adres z prefiksem, np. /pl/..., ma pierwszeństwo przed językiem urządzenia. Przełącznik zachowuje slug podstrony.

Tłumaczenie przez Asystenta AI

Asystent w kreatorze udostępnia zadania Uzupełnij brakujące tłumaczenia i Przetłumacz ponownie. Wybierz język źródłowy, dodany wcześniej język docelowy i zakres: bieżącą podstronę albo całą witrynę. Cała witryna obejmuje edytowalne teksty sekcji, tytuły stron, teksty SEO, menu i teksty ustawień globalnych. AI nie zmienia adresów, identyfikatorów, kolorów ani układu. Treści pluginów przechowywane poza kopią kreatora edytuje się w wielojęzycznym edytorze danego pluginu.

Uzupełnianie zachowuje istniejące wpisy, również celowo puste oraz tłumaczenia demo dołączone do szablonu. Ponowne tłumaczenie zastępuje teksty języka docelowego w wybranym zakresie. Język źródłowy i pozostałe języki pozostają bez zmian.

AI zwraca propozycję z porównaniem tekstów przed i po zmianie. Najpierw zatwierdź propozycję, a potem opublikuj kopię roboczą. Obowiązują istniejące zasady dostępu do AI, akceptacja warunków, limity i ustawienia modelu. Jeśli duża witryna przekroczy czas generowania, tłumacz po jednej podstronie. Słowniki wywoływane przez t(...) pozostają kodem autora szablonu; AI tłumaczy edytowalne treści klienta, a nie pliki źródłowe paczki.

Własny styl przełącznika języka

Każdy szablon deklarujący Languages jako wymagany lub opcjonalny musi posiadać własny styl przełącznika języka. Dopasuj typografię, kolory, tła, obramowania i zaokrąglenia do motywu. Uwzględnij aktywny język, hover, fokus klawiatury i wygodny układ mobilny. Przełącznik musi działać także po dodaniu kolejnych języków przez klienta; nie wpisuj EN, PL i NL na sztywno do HTML.

Umieść wspólną kontrolkę w nagłówku szablonu:

<gs-languages variant="dropdown"></gs-languages>

Dropdown korzysta z details i summary z linkami języków, a nie z natywnego selecta. Pokazuje aktywny język, obsługuje otwieranie klawiaturą, zamykanie klawiszem Escape oraz po opuszczeniu kontrolki fokusem. Bez variant="dropdown" element gs-languages wyświetla bezpośrednio linki językowe. Oba warianty korzystają z języków witryny i istniejącej obsługi zmiany języka w kreatorze.

Dodaj w assets/languages.css style dla .gs-language-dropdown, jego summary, .gs-language-switch oraz .gs-language-switch a[aria-current='true']. GS Loom ogranicza CSS z assets/ do danego motywu. Nie dodawaj globalnych reguł zmieniających przełączniki innych szablonów. Kontrolka powinna być dostępna na każdej stronie wielojęzycznej; długa lista języków powinna przewijać się wewnątrz dropdownu.

GrowSite Skeleton zawiera zaokrąglony dropdown w stylu Instant, z ciemnym tłem i żółtym akcentem, w assets/languages.css. Pełna implementacja znajduje się w paczce Skeleton. Paylio i Victorie Vending obecnie nie deklarują obsługi Languages; jej dodanie wymaga deklaracji pluginu oraz przełącznika dopasowanego do danego motywu.

To wymóg tworzenia i przeglądu szablonów; kompilator nie ocenia jakości wizualnej CSS. Przed zatwierdzeniem szablonu sprawdź kontrolkę na komputerze i telefonie, obsługę klawiatury oraz kilka języków dodanych przez klienta. Sprawdź konfigurację pluginu wymaganego i opcjonalnego.

Zobacz komponenty GS Loom UI: wspólny kontrakt HTML, warianty komponentów, tokeny motywu i działające przykłady.