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

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

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

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

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

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

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

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.

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;

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

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

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

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

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

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

• Документация Intlayer CLI
• Документация React Intlayer
• Документация Next Intlayer
• Документация по содержимому Markdown
• Документация по содержимому перевода

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