Содержимое этой страницы было переведено с помощью ИИ.

    Смотреть последнюю версию оригинального контента на английском

    Содержимое файла / Встраивание файлов в Intlayer

    Как работает встраивание файлов

    В Intlayer функция file позволяет встраивать содержимое внешнего файла в словарь. Этот подход обеспечивает распознавание исходного файла Intlayer, что позволяет легко интегрировать его с визуальным редактором и CMS Intlayer. В отличие от прямого использования методов import, require или чтения файлов через fs, использование file связывает файл со словарем, позволяя Intlayer отслеживать и динамически обновлять содержимое при редактировании файла.

    Настройка содержимого файла

    Чтобы встроить содержимое файла в ваш проект Intlayer, используйте функцию file в модуле содержимого. Ниже приведены примеры различных реализаций.

    Реализация на TypeScript

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

    Реализация на ECMAScript Module (ESM)

    Реализация на CommonJS

    Конфигурация JSON

    Использование содержимого файла в React Intlayer

    Чтобы использовать встроенное содержимое файла в компоненте React, импортируйте и используйте хук useIntlayer из пакета react-intlayer. Это позволяет извлекать содержимое по указанному ключу и отображать его динамически.

    **/*.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({        ru: file("src/components/test.ru.md"), // Русская версия        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;

    Эта настройка позволяет динамически извлекать содержимое в зависимости от языковых предпочтений пользователя. При использовании в визуальном редакторе или CMS Intlayer система распознает, что содержимое поступает из указанных Markdown-файлов, и обеспечивает их редактируемость.

    Как Intlayer обрабатывает содержимое файлов

    Функция file основана на модуле Node.js fs для чтения содержимого указанного файла и вставки его в словарь. При использовании в сочетании с визуальным редактором или CMS Intlayer система может отслеживать связь между словарем и файлом. Это позволяет Intlayer:

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

    Дополнительные ресурсы

    Для получения дополнительной информации о настройке и использовании встраивания файлов в Intlayer обратитесь к следующим ресурсам:

    Эти ресурсы предоставляют дополнительную информацию о встраивании файлов, управлении содержимым и интеграции Intlayer с различными фреймворками.

    Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

    Ссылка на документацию GitHub