Содержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомСодержимое файла / Встраивание файлов в Intlayer
Как работает встраивание файлов
В Intlayer функция file позволяет встраивать содержимое внешнего файла в словарь. Этот подход обеспечивает распознавание исходного файла Intlayer, что позволяет легко интегрировать его с визуальным редактором и CMS Intlayer. В отличие от прямого использования методов import, require или чтения файлов через fs, использование file связывает файл со словарем, позволяя Intlayer отслеживать и динамически обновлять содержимое при редактировании файла.
Настройка содержимого файла
Чтобы встроить содержимое файла в ваш проект Intlayer, используйте функцию file в модуле содержимого. Ниже приведены примеры различных реализаций.
Реализация на TypeScript
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. Это позволяет извлекать содержимое по указанному ключу и отображать его динамически.
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;
Эта настройка позволяет динамически извлекать содержимое в зависимости от языковых предпочтений пользователя. При использовании в визуальном редакторе или CMS Intlayer система распознает, что содержимое поступает из указанных Markdown-файлов, и обеспечивает их редактируемость.
Как Intlayer обрабатывает содержимое файлов
Функция file основана на модуле Node.js fs для чтения содержимого указанного файла и вставки его в словарь. При использовании в сочетании с визуальным редактором или CMS Intlayer система может отслеживать связь между словарем и файлом. Это позволяет Intlayer:
- Распознавать, что содержимое происходит из определенного файла.
- Автоматически обновлять содержимое словаря при редактировании связанного файла.
- Обеспечивать синхронизацию между файлом и словарем, сохраняя целостность содержимого.
Дополнительные ресурсы
Для получения дополнительной информации о настройке и использовании встраивания файлов в Intlayer обратитесь к следующим ресурсам:
- Документация Intlayer CLI
- Документация React Intlayer
- Документация Next Intlayer
- Документация Markdown Content
- Документация Translation Content
Эти ресурсы предоставляют дополнительную информацию о встраивании файлов, управлении содержимым и интеграции Intlayer с различными фреймворками.
Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHub