Strona głównaPiaskownicaPrezentacjaAplikacjaDokumentacjaBlog
    • Englishangielski
      EN
    • русскийrosyjski
      RU
    • 日本語japoński
      JA
    • françaisfrancuski
      FR
    • 한국어koreański
      KO
    • 中文chiński
      ZH
    • españolhiszpański
      ES
    • Deutschniemiecki
      DE
    • العربيةarabski
      AR
    • italianowłoski
      IT
    • British Englishangielski brytyjski
      EN-GB
    • portuguêsportugalski
      PT
    • हिन्दीhindi
      HI
    • Türkçeturecki
      TR
    • polskipolski
      PL
    • Indonesiaindonezyjski
      ID
    • Tiếng Việtwietnamski
      VI
    • українськаukraiński
      UK
    /
    Filtruj dokumenty według frameworka
    Alt+←
    Dlaczego Intlayer?
    Zacząć
    Koncepcja
    • Jak działa Intlayer
    • Konfiguracja
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Edytor wizualny
    • CMS
    • Integracja CI/CD
    • TłumaczenieLiczba mnogaWyliczenieWarunekPłećWstawieniePlikZagnieżdżanieMarkdownHTMLPobieranie funkcji
    • Plik dla każdej lokalizacji
    • Kompilator
    • Automatyczne wypełnianie
    • Testowanie
    • Optymalizacja pakietu
    Środowisko
    • Next.js 14 i App Router
      Next.js 15
      Next.js bez locale URL
      Next.js dan Page Router
      Kompilator
    • Tanstack Start Solid
    • Astro dan React
      Astro dan Svelte
      Astro dan Vue
      Astro dan Solid
      Astro dan Preact
      Astro dan Lit
      Astro dan Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt dan Vue
    • Vite dan Solid
    • SvelteKit
    • Vite dan Preact
    • Vite dan Vanilla JS
    • Vite dan Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native dan Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx dan React
    Plugins
    • JSON
    • gettext (.po)
    Rozszerzenie VS Code
    Agent
    • Serwer MCP
    • Umiejętności agenta
    Wersje
    • v8
    • v7
    • v6
    Benchmark
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Zadaj pytanie
    1. Documentation
    2. Koncepcja
    3. Deklaracja zawartości
    Data utworzenia:2025-02-07Ostatnia aktualizacja:2026-05-12
    Prześlij ten dokument do swojego ulubionego asystenta AI
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

    Historia wersji

    1. "Dodano obsługę formatów plików YAML i Markdown"
      v8.10.019.05.2026
    2. "Add `plural` content node type"
      v8.9.012.05.2026
    3. "Dodano typ węzła zawartości `html`"
      v8.0.028.01.2026
    4. "Rename `live` import mode to `fetch` to better describe the underlying mechanism."
      v8.0.024.01.2026
    5. "Dodano opcje słownika `location` i `schema`"
      v8.0.018.01.2026
    6. "Dodano obsługę formatów ICU i i18next"
      v7.5.013.12.2025
    7. "Zmiana nazwy `autoFill` na `fill`"
      v7.0.023.10.2025
    8. "Dodano dokumentację pól"
      v6.0.020.09.2025
    9. "Inicjalizacja historii"
      v5.5.1029.06.2025

    Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

    Zobacz ostatnią wersję oryginalnej treści w języku angielskim
    Edytuj tę dokumentację

    Jeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.

    Link do dokumentacji na GitHubie
    Kopiuj

    Kopiuj dokument Markdown do schowka

    Plik z Treścią

    www.youtube.com

    Czym jest Plik z Treścią?

    Plik z treścią w Intlayer to plik zawierający definicje słowników. Te pliki deklarują tekstową zawartość Twojej aplikacji, tłumaczenia oraz zasoby. Pliki z treścią są przetwarzane przez Intlayer w celu wygenerowania słowników.

    Słowniki będą ostatecznym wynikiem, który Twoja aplikacja zaimportuje za pomocą hooka useIntlayer.

    Kluczowe Pojęcia

    Słownik

    Słownik to uporządkowany zbiór treści zorganizowany według kluczy. Każdy słownik zawiera:

    • Key: Unikalny identyfikator słownika
    • Content: Rzeczywiste wartości treści (tekst, liczby, obiekty itp.)
    • Metadata: Dodatkowe informacje, takie jak tytuł, opis, tagi itp.

    Plik z Treścią

    Przykład pliku z treścią:

    src/example.content.tsx
    Kopiuj kod

    Skopiuj kod do schowka

    import { type ReactNode } from "react";
    import {
      t,
      enu,
      plural,
      cond,
      nest,
      md,
      insert,
      file,
      type Dictionary,
    } from "intlayer";
    
    interface Content {
      imbricatedContent: {
        imbricatedContent2: {
          stringContent: string;
          numberContent: number;
          booleanContent: boolean;
          javaScriptContent: string;
        };
      };
      multilingualContent: string;
      quantityContent: string;
      pluralContent: string;
      conditionalContent: string;
      markdownContent: never;
      htmlContent: never;
      externalContent: string;
      insertionContent: string;
      nestedContent: string;
      fileContent: string;
      jsxContent: ReactNode;
    }
    
    export default {
      key: "page",
      content: {
        imbricatedContent: {
          imbricatedContent2: {
            stringContent: "Hello World",
            numberContent: 123,
            booleanContent: true,
            javaScriptContent: `${process.env.NODE_ENV}`,
          },
        },
        multilingualContent: t({
          en: "English content",
          "en-GB": "English content (UK)",
          fr: "French content",
          es: "Spanish content",
        }),
        quantityContent: enu({
          "<-1": "Mniej niż minus jeden samochód",
          "-1": "Minus jeden samochód",
          "0": "Brak samochodów",
          "1": "Jeden samochód",
          ">5": "Kilka samochodów",
          ">19": "Wiele samochodów",
        }),
        pluralContent: plural({
          one: "One car",
          other: "{{count}} cars",
        }),
        conditionalContent: cond({
          true: "Walidacja jest włączona",
          false: "Walidacja jest wyłączona",
        }),
        insertionContent: insert("Witaj {{name}}!"),
        nestedContent: nest(
          "navbar", // Klucz słownika do zagnieżdżenia
          "login.button" // [Opcjonalnie] Ścieżka do zawartości do zagnieżdżenia
        ),
        fileContent: file("./path/to/file.txt"),
        externalContent: fetch("https://example.com").then((res) => res.json()),
        markdownContent: md("# Przykład Markdown"),
        htmlContent: html("<p>Hello <strong>World</strong></p>"),
    
        /*
         * Dostępne tylko przy użyciu `react-intlayer` lub `next-intlayer`
         */
        jsxContent: <h1>Mój tytuł</h1>,
      },
    } satisfies Dictionary<Content>; // [opcjonalnie] Dictionary jest generyczny i pozwala na wzmocnienie formatowania słownika

    Węzły treści

    Węzły treści są podstawowymi elementami zawartości słownika. Mogą to być:

    • Wartości prymitywne: łańcuchy znaków, liczby, wartości logiczne, null, undefined
    • Węzły typowane: Specjalne typy zawartości, takie jak tłumaczenia, warunki, markdown itp.
    • Funkcje: Dynamiczna zawartość, która może być oceniana w czasie wykonywania zobacz Pobieranie funkcji
    • Plural Content: See Plural Content See Plural Content
    • Zagnieżdżona zawartość: Odwołania do innych słowników

    Typy zawartości

    Intlayer obsługuje różne typy zawartości poprzez węzły typowane:

    • Zawartość tłumaczenia: Wielojęzyczny tekst z wartościami specyficznymi dla lokalizacji zobacz Zawartość tłumaczenia
    • Zawartość warunkowa: Zawartość warunkowa oparta na wyrażeniach logicznych zobacz Zawartość warunkową
    • Zawartość enumeracji: Zawartość zmieniająca się w zależności od wartości enumerowanych zobacz Zawartość enumeracji
    • Zawartość wstawiania: Zawartość, którą można wstawić do innej zawartości zobacz Zawartość wstawiania
    • Zawartość Markdown: Zawartość tekstu sformatowanego w formacie Markdown zobacz Zawartość Markdown
    • Zawartość HTML: Zawartość HTML z opcjonalnymi niestandardowymi komponentami zobacz Zawartość HTML
    • Zagnieżdżona zawartość: Odwołania do innych słowników zobacz Zagnieżdżoną zawartość
    • Zawartość zależna od płci: Zawartość zmieniająca się w zależności od płci zobacz Zawartość zależną od płci
    • Zawartość plikowa: Odwołania do plików zewnętrznych zobacz Zawartość plikową

    Struktura słownika

    Słownik w Intlayer jest definiowany przez typ Dictionary i zawiera kilka właściwości, które kontrolują jego zachowanie:

    Wymagane właściwości

    key (string)

    Identyfikator słownika. Jeśli wiele słowników ma ten sam klucz, Intlayer automatycznie je połączy.

    Używaj konwencji nazewnictwa kebab-case (np. "about-page-meta").

    Content (string | number | boolean | object | array | function)

    Właściwość content zawiera rzeczywiste dane słownika i obsługuje:

    • Wartości prymitywne: łańcuchy znaków, liczby, wartości logiczne, null, undefined
    • Typowane węzły: Specjalne typy zawartości wykorzystujące funkcje pomocnicze Intlayer
    • Zagnieżdżone obiekty: Złożone struktury danych
    • Tablice: Kolekcje zawartości
    • Funkcje: Dynamiczna ewaluacja zawartości

    Właściwości opcjonalne

    title (string)

    Czytelny dla człowieka tytuł słownika, który pomaga go zidentyfikować w edytorach i systemach CMS. Jest to szczególnie przydatne podczas zarządzania dużą liczbą słowników lub pracy z interfejsami do zarządzania treścią.

    Przykład:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    {  key: "about-page-meta",  title: "Metadane strony O nas",  content: { /* ... */ }}

    description (string)

    Szczegółowy opis wyjaśniający cel słownika, zasady jego użycia oraz wszelkie specjalne uwagi. Ten opis jest również wykorzystywany jako kontekst dla generowania tłumaczeń wspomaganych przez AI, co jest cenne dla utrzymania jakości i spójności tłumaczeń.

    Przykład:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    {  key: "about-page-meta",  description: [    "Ten słownik zarządza metadanymi strony O nas",    "Rozważ dobre praktyki SEO:",    "- Tytuł powinien mieć od 50 do 60 znaków",    "- Opis powinien mieć od 150 do 160 znaków",  ].join('\n'),  content: { /* ... */ }}

    tags (string[])

    Tablica łańcuchów znaków służąca do kategoryzacji i organizacji słowników. Tagi dostarczają dodatkowego kontekstu i mogą być używane do filtrowania, wyszukiwania lub organizowania słowników w edytorach i systemach CMS.

    Przykład:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}

    format ('intlayer' | 'icu' | 'i18next')

    Określa formatter do użycia dla zawartości słownika. Pozwala to na używanie różnych składni formatowania wiadomości.

    • 'intlayer': Domyślny formatter Intlayer.
    • 'icu': Używa formatowania wiadomości ICU.
    • 'i18next': Używa formatowania wiadomości i18next.

    Przykład:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}

    locale (LocalesValues)

    Przekształca słownik w słownik per-lokalizacyjny, gdzie każde pole zadeklarowane w zawartości zostanie automatycznie przekształcone w węzeł tłumaczenia. Gdy ta właściwość jest ustawiona:

    • Słownik jest traktowany jako słownik dla pojedynczego języka
    • Każde pole staje się węzłem tłumaczenia dla tego konkretnego języka
    • Nie należy używać węzłów tłumaczenia (t()) w zawartości podczas korzystania z tej właściwości
    • Jeśli właściwość jest pominięta, słownik będzie traktowany jako wielojęzyczny
    Zobacz Deklarację zawartości per-locale w Intlayer po więcej informacji.

    Przykład:

    json
    Kopiuj kod

    Skopiuj kod do schowka

    // Słownik per-locale{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // To staje się węzłem tłumaczenia dla 'en'    "description": "Learn more about our company"  }}

    schema (SchemaKeys)

    Schemat zawartości słownika. Jeśli ustawiony, zawartość zostanie zwalidowana względem tego schematu. Pozwala to na narzucenie określonej struktury dla zawartości słownika przy użyciu niestandardowych schematów walidacji zdefiniowanych w konfiguracji Intlayer.

    Przykład:

    intlayer.config.ts
    Kopiuj kod

    Skopiuj kod do schowka

    import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
    src/example.content.ts
    Kopiuj kod

    Skopiuj kod do schowka

    import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;

    location ('local' | 'remote' | 'hybrid' | string)

    Wskazuje lokalizację słownika i kontroluje sposób synchronizacji z CMS:

    • 'local': Słownik jest zarządzany tylko lokalnie. Nie zostanie wysłany do zdalnego CMS. Użyj tego dla treści, które powinny pozostać w twojej bazie kodu.
    • 'remote': Słownik jest zarządzany tylko zdalnie. Po wysłaniu do CMS zostanie odłączony od pliku lokalnego. W momencie ładowania treści zdalny słownik zostanie pobrany z CMS. Plik .content z lokalizacją remote zostanie zignorowany po początkowym wysłaniu.
    • 'hybrid': Słownik jest zarządzany zarówno lokalnie, jak i zdalnie. Po wysłaniu do CMS pozostanie zsynchronizowany, zmiany z pliku lokalnego są wysyłane do CMS, a zmiany zdalne mogą być pobrane z powrotem do pliku lokalnego.
    • string (np. 'plugin'): Słownik jest zarządzany przez wtyczkę lub niestandardowe źródło. Gdy spróbujesz go wysłać, system zapyta cię, co zrobić.

    Przykład:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    {  key: "about-page",  location: "local", // Treść pozostaje tylko w twojej bazie kodu  content: {    title: "About Us"  }}

    fill (Fill)

    Instrukcje dotyczące automatycznego wypełniania zawartości słownika z zewnętrznych źródeł. Można to skonfigurować globalnie w intlayer.config.ts lub dla poszczególnych słowników. Obsługuje wiele formatów:

    • true: Włącz wypełnianie dla wszystkich lokalizacji
    • false: Wyłącz wypełnianie dla wszystkich lokalizacji
    • string: Ścieżka do pojedynczego pliku lub szablon z zmiennymi
    • object: Ścieżki do plików dla poszczególnych lokalizacji

    Przykłady:

    json
    Kopiuj kod

    Skopiuj kod do schowka

    // Wyłącz wypełnianie{  "fill": false}// Pojedynczy plik{  "fill": "./translations/aboutPage.content.json"}// Szablon ze zmiennymi{  "fill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// Szczegółowa konfiguracja per-locale{  "fill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",  "es": "./translations/es/aboutPage.content.json"  }}

    Dostępne zmienne:

    • {{locale}} – Kod lokalizacji (np. fr, es)
    • {{fileName}} – Nazwa pliku (np. example)
    • {{key}} – Klucz słownika (np. example)
    Zobacz Konfiguracja automatycznego wypełniania w Intlayer po więcej informacji.
    priority (number)

    Wskazuje priorytet słownika do rozwiązywania konfliktów. Gdy wiele słowników zawiera ten sam klucz, słownik z najwyższym numerem priorytetu nadpisze pozostałe. Jest to przydatne do zarządzania hierarchią treści i nadpisaniami.

    Przykład:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    // Słownik bazowy{  key: "welcome-message",  priority: 1,  content: { message: "Welcome!" }}// Słownik nadpisujący{  key: "welcome-message",  priority: 10,  content: { message: "Witamy w naszej usłudze premium!" }}// To nadpisze słownik bazowy

    Właściwości CMS

    version (string)

    Identyfikator wersji dla zdalnych słowników. Pomaga śledzić, która wersja słownika jest aktualnie używana, co jest szczególnie przydatne podczas pracy z zdalnymi systemami zarządzania treścią.

    importMode ('static' | 'dynamic' | 'fetch')

    Tryb importu określa, jak słownik jest importowany w aplikacji.

    • 'static': Słownik jest importowany statycznie w czasie budowania. To jest domyślny tryb.
    • 'dynamic': Słownik jest importowany dynamicznie w czasie działania za pomocą API suspense.
    • 'fetch': Słownik jest importowany dynamicznie za pomocą API synchronizacji na żywo.

    Jeśli ustawione, ta właściwość nadpisuje globalny importMode zdefiniowany w the dictionaryproperty ofintlayer.config.ts``.

    Właściwości systemowe (Generowane automatycznie)

    Te właściwości są automatycznie generowane przez Intlayer i nie powinny być modyfikowane ręcznie:

    $schema (string)

    Schemat JSON używany do walidacji struktury słownika. Automatycznie dodawany przez Intlayer, aby zapewnić integralność słownika.

    id (string)

    Dla słowników zdalnych, jest to unikalny identyfikator słownika na zdalnym serwerze. Używany do pobierania i zarządzania zdalną zawartością.

    projectIds (string[])

    Dla słowników zdalnych, ta tablica zawiera identyfikatory projektów, które mogą korzystać z tego słownika. Słownik zdalny może być współdzielony między wieloma projektami.

    localId (LocalDictionaryId)

    Unikalny identyfikator dla lokalnych słowników. Automatycznie generowany przez Intlayer, aby pomóc zidentyfikować słownik oraz określić, czy jest lokalny czy zdalny, wraz z jego lokalizacją.

    localIds (LocalDictionaryId[])

    Dla scalonych słowników, ta tablica zawiera identyfikatory wszystkich słowników, które zostały połączone. Przydatne do śledzenia źródła scalonej zawartości.

    filePath (string)

    Ścieżka pliku lokalnego słownika, wskazująca, z którego pliku .content słownik został wygenerowany. Pomaga w debugowaniu i śledzeniu źródła.

    versions (string[])

    Dla zdalnych słowników, ta tablica zawiera wszystkie dostępne wersje słownika. Pomaga śledzić, które wersje są dostępne do użycia.

    filled (true)

    Wskazuje, czy słownik został automatycznie wypełniony z zewnętrznych źródeł. W przypadku konfliktów, słowniki bazowe mają pierwszeństwo nad automatycznie wypełnionymi słownikami.

    location ('distant' | 'locale')

    Wskazuje lokalizację słownika:

    • 'locale': Słownik lokalny (z plików zawartości)
    • 'distant': Słownik zdalny (z zewnętrznego źródła)

    Typy węzłów zawartości

    Intlayer udostępnia kilka specjalizowanych typów węzłów zawartości, które rozszerzają podstawowe wartości prymitywne:

    Zawartość tłumaczenia (t)

    Wielojęzyczna zawartość zmieniająca się w zależności od lokalizacji:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
    See Zawartość tłumaczenia (t) Doc for more information.

    Zawartość warunkowa (cond)

    Treść, która zmienia się w zależności od warunków logicznych (boolean):

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { cond } from "intlayer";conditionalContent: cond({  true: "Użytkownik jest zalogowany",  false: "Proszę się zalogować, aby kontynuować",});
    See Zawartość warunkowa (cond) Doc for more information.

    Treść enumeracyjna (enu)

    Treść, która zmienia się w zależności od wartości enumeracyjnych:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { enu } from "intlayer";statusContent: enu({  pending: "Twoje żądanie jest w toku",  approved: "Twoje żądanie zostało zatwierdzone",  rejected: "Twoje żądanie zostało odrzucone",});
    See Treść enumeracyjna (enu) Doc for more information.

    Plural Content (plural)

    Content that varies based on plural rules:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
    See Plural Content Doc for more information.

    Treść wstawiana (insert)

    Treść, którą można wstawić do innej treści:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { insert } from "intlayer";insertionContent: insert("Ten tekst można wstawić w dowolne miejsce");
    See Treść wstawiana (insert) Doc for more information.

    Treść zagnieżdżona (nest)

    Odniesienia do innych słowników:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { nest } from "intlayer";nestedContent: nest("about-page");
    See Treść zagnieżdżona (nest) Doc for more information.

    Zawartość Markdown (md)

    Treść sformatowana w Markdown:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { md } from "intlayer";markdownContent: md(  "# Witamy\n\nTo jest **pogrubiony** tekst z [linkami](https://example.com)");
    See Zawartość Markdown (md) Doc for more information.

    Zawartość HTML (html)

    Zawartość HTML, która może używać standardowych tagów lub niestandardowych komponentów:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { html, file, t } from "intlayer";// HTML w liniihtmlContent: html("<p>Hello <strong>World</strong></p>");// HTML według lokalizacji z plików zewnętrznychlocalizedHtmlContent: t({  en: html(file("./content.en.html")),  pl: html(file("./content.pl.html")),});
    See Zawartość HTML (html) Doc for more information.

    Zawartość według płci (gender)

    Treść zmieniająca się w zależności od płci:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { gender } from "intlayer";genderContent: gender({  male: "On jest programistą",  female: "Ona jest programistką",  other: "Oni są programistami",});
    See Zawartość według płci (gender) Doc for more information.

    Zawartość pliku (file)

    Odniesienia do plików zewnętrznych:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    import { file } from "intlayer";fileContent: file("./path/to/content.txt");
    See Zawartość pliku (file) Doc for more information.

    Tworzenie plików z zawartością

    Podstawowa struktura pliku z zawartością

    Plik z zawartością eksportuje domyślny obiekt spełniający typ Dictionary:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Zawartość strony powitalnej",  description:    "Zawartość głównej strony powitalnej, w tym sekcja hero i funkcje",  tags: ["page", "welcome", "homepage"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;

    Plik zawartości JSON

    Możesz również tworzyć pliki zawartości w formacie JSON:

    json
    Kopiuj kod

    Skopiuj kod do schowka

    {  "key": "welcome-page",  "title": "Zawartość strony powitalnej",  "description": "Zawartość głównej strony powitalnej",  "tags": ["page", "welcome"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}

    Plik zawartości Markdown

    markdown
    Kopiuj kod

    Skopiuj kod do schowka

    ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease

    Plik zawartości YAML

    yaml
    Kopiuj kod

    Skopiuj kod do schowka

    key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease

    Pliki zawartości per-locale

    Dla słowników per-locale określ właściwość locale:

    Możesz również tworzyć pliki z zawartością w formacie JSON:

    json
    Kopiuj kod

    Skopiuj kod do schowka

    {  "key": "welcome-page",  "title": "Zawartość strony powitalnej",  "description": "Zawartość głównej strony powitalnej",  "tags": ["strona", "powitanie"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}

    Pliki zawartości dla poszczególnych lokalizacji

    Dla słowników specyficznych dla lokalizacji, określ właściwość locale:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    typescript;// welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Welcome to Our Platform",      subtitle: "Build amazing applications with ease",    },  },} satisfies Dictionary;
    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;

    Rozszerzenia plików z zawartością

    Intlayer pozwala na dostosowanie rozszerzeń plików deklarujących zawartość. Ta możliwość daje elastyczność w zarządzaniu dużymi projektami i pomaga unikać konfliktów z innymi modułami.

    Domyślne rozszerzenia

    Domyślnie Intlayer monitoruje wszystkie pliki o następujących rozszerzeniach dla deklaracji zawartości:

    • .content.json
    • .content.json5
    • .content.jsonc
    • .content.ts
    • .content.tsx
    • .content.js
    • .content.jsx
    • .content.mjs
    • .content.mjx
    • .content.cjs
    • .content.cjx
    • .content.md
    • .content.mdx
    • .content.yaml
    • .content.yml

    Te domyślne rozszerzenia są odpowiednie dla większości aplikacji. Jednak gdy masz specyficzne potrzeby, możesz zdefiniować niestandardowe rozszerzenia, aby usprawnić proces budowania i zmniejszyć ryzyko konfliktów z innymi komponentami.

    Aby dostosować rozszerzenia plików, których Intlayer używa do identyfikacji plików deklaracji zawartości, możesz określić je w pliku konfiguracyjnym Intlayer. To podejście jest korzystne dla projektów na dużą skalę, gdzie ograniczenie zakresu procesu monitorowania poprawia wydajność budowania.

    Zaawansowane Koncepcje

    Scalanie słowników

    Gdy wiele słowników ma ten sam klucz, Intlayer automatycznie je łączy. Zachowanie podczas łączenia zależy od kilku czynników:

    • Priorytet: Słowniki z wyższą wartością priority nadpisują te z niższą
    • Auto-fill vs Base: Słowniki bazowe nadpisują słowniki uzupełniane automatycznie
    • Lokalizacja: Słowniki lokalne nadpisują słowniki zdalne (gdy priorytety są równe)

    Bezpieczeństwo typów

    Intlayer zapewnia pełne wsparcie TypeScript dla plików z zawartością:

    typescript
    Kopiuj kod

    Skopiuj kod do schowka

    // Definiuj swój typ zawartościinterface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// Użyj tego w swoim słownikuexport default {  key: "welcome-page",  content: {    // TypeScript zapewni autouzupełnianie i sprawdzanie typów    hero: {      title: "Witamy",      subtitle: "Twórz niesamowite aplikacje",      cta: "Zacznij",    },  },} satisfies Dictionary<WelcomePageContent>;

    Zagnieżdżanie węzłów

    Możesz bez problemu zagnieżdżać funkcje w innych funkcjach.

    Przykład:

    src/example.content.tsx
    Kopiuj kod

    Skopiuj kod do schowka

    import { t, enu, cond, nest, md, type Dictionary } from "intlayer";
    
    const getName = async () => "John Doe";
    
    export default {
      key: "page",
      content: {
        // `getIntlayer('page','en').hiMessage` zwraca `['Hi', ' ', 'John Doe']`
        hiMessage: [
          t({
            en: "Hi",
            fr: "Salut",
            es: "Hola",
          }),
          " ",
          getName(),
        ],
        // Złożona zawartość łącząca warunek, enumerację i treść wielojęzyczną
        // `getIntlayer('page','en').advancedContent(true)(10) zwraca 'Znaleziono wiele elementów'`
        advancedContent: cond({
          true: enu({
            "0": t({
              en: "No items found",
              fr: "Aucun article trouvé",
              es: "No se encontraron artículos",
            }),
            "1": t({
              en: "One item found",
              fr: "Un article trouvé",
              es: "Se encontró un artículo",
            }),
            ">1": t({
              en: "Multiple items found",
              fr: "Plusieurs articles trouvés",
              es: "Se encontraron múltiples artículos",
            }),
          }),
          false: t({
            en: "No valid data available",
            fr: "Aucune donnée valide disponible",
            es: "No hay datos válidos disponibles",
          }),
        }),
      },
    } satisfies Dictionary;

    Najlepsze praktyki

    1. Konwencje nazewnictwa:

      • Używaj kebab-case dla kluczy słownika ("about-page-meta")
      • Grupuj powiązane treści pod tym samym prefiksem klucza
    2. Organizacja treści:

      • Trzymaj powiązane treści razem w tym samym słowniku
      • Używaj zagnieżdżonych obiektów do organizacji złożonych struktur treści
      • Wykorzystuj tagi do kategoryzacji
      • Używaj fill do automatycznego uzupełniania brakujących tłumaczeń
    3. Wydajność:

      • Dostosuj konfigurację treści, aby ograniczyć zakres obserwowanych plików
      • Używaj słowników na żywo tylko wtedy, gdy są potrzebne aktualizacje w czasie rzeczywistym (np. testy A/B itp.)
      • Upewnij się, że wtyczka transformacji podczas budowania (@intlayer/swc lub @intlayer/babel) jest włączona, aby zoptymalizować słownik podczas kompilacji
    Integracja CI/CD
    Tłumaczenie
    Alt+→

    Na tej stronie

      Dyskusje są anonimowe i regularnie przeglądane w celu rozwiązania typowych problemów. Podziel się pomysłami na funkcje, opinią o dokumentacji lub czymkolwiek związanym z Intlayer, wykorzystujemy te informacje do kształtowania naszej mapy drogowej i ulepszania produktu.

      {  key: "about-page-meta",  title: "Metadane strony O nas",  content: { /* ... */ }}
      {  key: "about-page-meta",  description: [    "Ten słownik zarządza metadanymi strony O nas",    "Rozważ dobre praktyki SEO:",    "- Tytuł powinien mieć od 50 do 60 znaków",    "- Opis powinien mieć od 150 do 160 znaków",  ].join('\n'),  content: { /* ... */ }}
      {  key: "about-page-meta",  tags: ["metadata", "about-page", "seo"],  content: { /* ... */ }}
      {  key: "my-dictionary",  format: "icu",  content: {    message: "Hello {name}, you have {count, plural, one {# message} other {# messages}}"  }}
      // Słownik per-locale{  "key": "about-page",  "locale": "en",  "content": {    "title": "About Us", // To staje się węzłem tłumaczenia dla 'en'    "description": "Learn more about our company"  }}
      import { z } from "zod";export default {  schemas: {    "seo-metadata": z.object({      title: z.string().min(50).max(60),      description: z.string().min(150).max(160),    }),  },};
      import { type Dictionary } from "intlayer";const aboutPageMetaContent = {  key: "about-page-meta",  schema: "seo-metadata",  content: {    title: "About Our Company - Learn More About Us",    description: "Discover our company's mission, values, and team.",  },} satisfies Dictionary;export default aboutPageMetaContent;
      {  key: "about-page",  location: "local", // Treść pozostaje tylko w twojej bazie kodu  content: {    title: "About Us"  }}
      // Wyłącz wypełnianie{  "fill": false}// Pojedynczy plik{  "fill": "./translations/aboutPage.content.json"}// Szablon ze zmiennymi{  "fill": "/messages/{{locale}}/{{key}}/{{fileName}}.content.json"}// Szczegółowa konfiguracja per-locale{  "fill": {    "en": "./translations/en/aboutPage.content.json",    "fr": "./translations/fr/aboutPage.content.json",  "es": "./translations/es/aboutPage.content.json"  }}
      // Słownik bazowy{  key: "welcome-message",  priority: 1,  content: { message: "Welcome!" }}// Słownik nadpisujący{  key: "welcome-message",  priority: 10,  content: { message: "Witamy w naszej usłudze premium!" }}// To nadpisze słownik bazowy
      import { t } from "intlayer";// TypeScript/JavaScriptmultilingualContent: t({  en: "Welcome to our website",  fr: "Bienvenue sur notre site web",  es: "Bienvenido a nuestro sitio web",});
      import { cond } from "intlayer";conditionalContent: cond({  true: "Użytkownik jest zalogowany",  false: "Proszę się zalogować, aby kontynuować",});
      import { enu } from "intlayer";statusContent: enu({  pending: "Twoje żądanie jest w toku",  approved: "Twoje żądanie zostało zatwierdzone",  rejected: "Twoje żądanie zostało odrzucone",});
      import { plural } from "intlayer";pluralContent: plural({  one: "One car",  other: "{{count}} cars",});
      import { insert } from "intlayer";insertionContent: insert("Ten tekst można wstawić w dowolne miejsce");
      import { nest } from "intlayer";nestedContent: nest("about-page");
      import { md } from "intlayer";markdownContent: md(  "# Witamy\n\nTo jest **pogrubiony** tekst z [linkami](https://example.com)");
      import { html, file, t } from "intlayer";// HTML w liniihtmlContent: html("<p>Hello <strong>World</strong></p>");// HTML według lokalizacji z plików zewnętrznychlocalizedHtmlContent: t({  en: html(file("./content.en.html")),  pl: html(file("./content.pl.html")),});
      import { gender } from "intlayer";genderContent: gender({  male: "On jest programistą",  female: "Ona jest programistką",  other: "Oni są programistami",});
      import { file } from "intlayer";fileContent: file("./path/to/content.txt");
      // example.content.tsimport { t, cond, nest, md, insert, file } from "intlayer";export default {  key: "welcome-page",  title: "Zawartość strony powitalnej",  description:    "Zawartość głównej strony powitalnej, w tym sekcja hero i funkcje",  tags: ["page", "welcome", "homepage"],  content: {    hero: {      title: t({        en: "Welcome to Our Platform",        fr: "Bienvenue sur Notre Plateforme",        es: "Bienvenido a Nuestra Plataforma",      }),      subtitle: t({        en: "Build amazing applications with ease",        fr: "Construisez des applications incroyables avec facilité",        es: "Construye aplicaciones increíbles con facilidad",      }),      cta: cond({        true: t({          en: "Get Started",          fr: "Commencer",          es: "Comenzar",        }),        false: t({          en: "Sign Up",          fr: "S'inscrire",          es: "Registrarse",        }),      }),    },    features: [      {        title: t({          en: "Easy to Use",          fr: "Facile à Utiliser",          es: "Fácil de Usar",        }),        description: t({          en: "Intuitive interface for all skill levels",          fr: "Interface intuitive pour tous les niveaux",          es: "Interfaz intuitiva para todos los niveles",        }),      },    ],    documentation: nest("documentation"),    readme: file("./README.md"),  },} satisfies Dictionary;
      {  "key": "welcome-page",  "title": "Zawartość strony powitalnej",  "description": "Zawartość głównej strony powitalnej",  "tags": ["page", "welcome"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}
      ---key: welcome-pagelocale: entitle: Welcome Page Contentdescription: Content for the main welcome pagetags:  - page  - welcome---# Welcome to Our Platform## Build amazing applications with ease
      key: welcome-pagetitle: Welcome Page Contentdescription: Content for the main welcome pagelocale: "en"tags:  - page  - welcomecontent:  hero:    title: Welcome to Our Platform    subtitle: Build amazing applications with ease
      {  "key": "welcome-page",  "title": "Zawartość strony powitalnej",  "description": "Zawartość głównej strony powitalnej",  "tags": ["strona", "powitanie"],  "content": {    "hero": {      "title": {        "nodeType": "translation",        "translation": {          "en": "Welcome to Our Platform",          "fr": "Bienvenue sur Notre Plateforme"        }      },      "subtitle": {        "nodeType": "translation",        "translation": {          "en": "Build amazing applications with ease",          "fr": "Construisez des applications incroyables avec facilité"        }      }    }  }}
      typescript;// welcome-page.en.content.tsexport default {  key: "welcome-page",  locale: "en",  content: {    hero: {      title: "Welcome to Our Platform",      subtitle: "Build amazing applications with ease",    },  },} satisfies Dictionary;
      // welcome-page.fr.content.tsexport default {  key: "welcome-page",  locale: "fr",  content: {    hero: {      title: "Bienvenue sur Notre Plateforme",      subtitle: "Construisez des applications incroyables avec facilité",    },  },} satisfies Dictionary;
      // Definiuj swój typ zawartościinterface WelcomePageContent {  hero: {    title: string;    subtitle: string;    cta: string;  };  features: Array<{    title: string;    description: string;  }>;}// Użyj tego w swoim słownikuexport default {  key: "welcome-page",  content: {    // TypeScript zapewni autouzupełnianie i sprawdzanie typów    hero: {      title: "Witamy",      subtitle: "Twórz niesamowite aplikacje",      cta: "Zacznij",    },  },} satisfies Dictionary<WelcomePageContent>;