Autor:
    Data utworzenia:2025-03-13Ostatnia aktualizacja:2025-06-29

    Zawartość pliku / Osadzanie plików w Intlayer

    W Intlayer funkcja file pozwala na osadzenie zawartości zewnętrznego pliku w słowniku. Takie podejście zapewnia, że Intlayer rozpoznaje plik źródłowy, umożliwiając płynną integrację z Intlayer Visual Editor i CMS.

    Dlaczego używać file zamiast import, require lub fs?

    To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

    Konfiguracja zawartości pliku

    Aby osadzić zawartość pliku w projekcie Intlayer, użyj funkcji file w module zawartości. Poniżej znajdują się przykłady różnych implementacji.

    **/*.content.ts
    import { file, type Dictionary } from "intlayer";

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

    Używanie zawartości pliku w React Intlayer

    To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

    Przykład wielojęzycznego Markdown

    Aby obsługiwać wielojęzyczne edytowalne pliki Markdown, możesz użyć file w połączeniu z t() i md(), aby zdefiniować różne wersje językowe pliku z zawartością Markdown.

    **/*.content.ts
    import { file, t, md, type Dictionary } from "intlayer";

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        en: file("src/components/test.en.md"),
        fr: file("src/components/test.fr.md"),
        es: file("src/components/test.es.md"),
      })
    ),
  },
} satisfies Dictionary;

export default myMultilingualContent;

    Ta konfiguracja pozwala na dynamiczne pobieranie zawartości w oparciu o preferencje językowe użytkownika. Gdy jest używana w Intlayer Visual Editor lub CMS, system rozpozna, że zawartość pochodzi z określonych plików Markdown i zapewni, że pozostaną one edytowalne.

    Różne typy ścieżek

    Podczas używania funkcji file można stosować różne typy ścieżek do określenia pliku do osadzenia.

    • file("./path/to/file.txt") - Ścieżka względna względem bieżącego pliku
    • file("path/to/file.txt") - Ścieżka względna względem katalogu głównego projektu
    • file("/users/username/path/to/file.txt") - Ścieżka absolutna

    Jak Intlayer obsługuje zawartość plików

    Funkcja file opiera się na module fs Node.js, aby odczytać zawartość określonego pliku i wstawić ją do słownika. Używana w połączeniu z Intlayer Visual Editor lub CMS, Intlayer może śledzić relację między słownikiem a plikiem. Pozwala to Intlayer na:

    • Rozpoznanie, że zawartość pochodzi z określonego pliku.
    • Automatyczną aktualizację zawartości słownika, gdy powiązany plik zostanie edytowany.
    • Zapewnić synchronizację między plikiem a słownikiem, zachowując integralność zawartości.

    Dodatkowe zasoby

    Aby uzyskać więcej informacji na temat konfigurowania i używania osadzania plików w Intlayer, zapoznaj się z następującymi zasobami:

    Te zasoby dostarczają dodatkowych informacji na temat osadzania plików, zarządzania zawartością oraz integracji Intlayer z różnymi frameworkami.

    Wstawienie
    Zagnieżdżanie