Автор:
    Дата створення:2025-03-13Останнє оновлення:2025-06-29

    Вміст файлу / Вбудовування файлів в Intlayer

    В Intlayer функція file дозволяє вбудовувати вміст зовнішніх файлів у dictionary. Такий підхід гарантує, що Intlayer розпізнає файл-джерело, що забезпечує плавну інтеграцію з Intlayer Visual Editor та CMS.

    Чому використовувати file замість import, require або 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;

    Налаштування вмісту файлу

    Щоб вбудувати вміст файлу у ваш проект Intlayer, використовуйте функцію file у модулі контенту. Нижче наведені приклади, що демонструють різні реалізації.

    **/*.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;

    Використання вмісту файлу в 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;

    Приклад багатомовного Markdown

    Щоб підтримувати багатомовні редаговані Markdown-файли, ви можете використовувати file у поєднанні з t() та md() для визначення версій вмісту 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;

    Ця конфігурація дозволяє динамічно отримувати вміст залежно від мовних налаштувань користувача. При використанні в Intlayer Visual Editor або CMS система розпізнає, що вміст походить із зазначених Markdown-файлів, і забезпечить їхню можливість редагування.

    Різні типи шляхів

    Коли ви використовуєте функцію file, можна застосовувати різні типи шляхів, щоб вказати файл для вставки.

    • file("./path/to/file.txt") - Відносний шлях відносно поточного файлу
    • file("path/to/file.txt") - Відносний шлях відносно кореневої директорії проєкту
    • file("/users/username/path/to/file.txt") - Абсолютний шлях

    Як Intlayer обробляє вміст файлу

    Функція file базується на модулі fs у Node.js для читання вмісту вказаного файлу та вставлення його до словника. У поєднанні з Intlayer Visual Editor або CMS Intlayer може відстежувати зв’язок між словником і файлом. Це дозволяє Intlayer:

    • Розпізнавати, що вміст походить із конкретного файлу.
    • Автоматично оновлювати вміст словника при редагуванні пов’язаного файлу.
    • Забезпечте синхронізацію між файлом та словником, зберігаючи цілісність вмісту.

    Додаткові ресурси

    Для детальнішої інформації щодо налаштування та використання вставки файлів в Intlayer зверніться до наступних ресурсів:

    Ці ресурси надають додаткові відомості про вбудовування файлів, керування контентом та інтеграцію Intlayer із різними фреймворками.

    Вставка
    Вкладеність