Автор:

Создание:2025-03-13Последнее обновление:2025-06-29

Ссылайтесь на этот документ на ваш любимый ассистент AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

История версий

"Инициализация истории"
v5.5.1029.06.2025

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

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

Изменить эту документацию

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

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

Копировать

Копировать Markdown документа в буфер обмена

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

Name: Intlayer
Author: 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;

To use embedded file content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myFile } = useIntlayer("my_key");</script><template><div>  <pre>{{ myFile }}</pre></div></template>

To use embedded file content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><pre>{$content.myFile}</pre></div>

To use embedded file content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const FileComponent: Component = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-file",template: `  <div>    <pre>{{ content().myFile }}</pre>  </div>`,})export class FileComponent {content = useIntlayer("my_key");}

To use embedded file content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Копировать код

Копировать код в буфер обмена

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("file-content")!.textContent = newContent.myFile;
});

// Initial render
document.getElementById("file-content")!.textContent = content.myFile;

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

Чтобы встроить содержимое файла в ваш проект 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

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

To use embedded file content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Копировать код

Копировать код в буфер обмена

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myFile } = useIntlayer("my_key");</script><template><div>  <pre>{{ myFile }}</pre></div></template>

To use embedded file content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><pre>{$content.myFile}</pre></div>

To use embedded file content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const FileComponent: FC = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Копировать код

Копировать код в буфер обмена

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const FileComponent: Component = () => {
const { myFile } = useIntlayer("my_key");

return (
  <div>
    <pre>{myFile}</pre>
  </div>
);
};

export default FileComponent;

To use embedded file content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-file",template: `  <div>    <pre>{{ content().myFile }}</pre>  </div>`,})export class FileComponent {content = useIntlayer("my_key");}

To use embedded file content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Копировать код

Копировать код в буфер обмена

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
document.getElementById("file-content")!.textContent = newContent.myFile;
});

// Initial render
document.getElementById("file-content")!.textContent = content.myFile;

Пример многоязычного 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;

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

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

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

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

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

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

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

Вставка Вложенность