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?

W przeciwieństwie do metod odczytu plików takich jak import, require czy fs, użycie file wiąże plik ze słownikiem, co pozwala Intlayer na śledzenie i dynamiczną aktualizację zawartości po edycji pliku. W efekcie użycie file zapewnia lepszą integrację z Intlayer Visual Editor i CMS.

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.

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

Aby użyć osadzonej zawartości pliku w komponencie React, zaimportuj i użyj hooka useIntlayer z pakietu react-intlayer. Pozwala to na pobranie zawartości z określonego klucza i dynamiczne jej wyświetlenie.

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.

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:

• Dokumentacja Intlayer CLI
• Dokumentacja React Intlayer
• Dokumentacja Next Intlayer
• Dokumentacja zawartości Markdown
• Dokumentacja zawartości tłumaczeń

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