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

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

Чому використовувати file замість import, require або fs?

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

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

Щоб вбудувати вміст файлу у ваш проект 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

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;

"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;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { myFile } = useIntlayer("my_key");
</script>

<template>
  <div>
    <pre>{{ myFile }}</pre>
  </div>
</template>

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <pre>{$content.myFile}</pre>
</div>

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;

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;

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");
}

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 різними мовами.

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 CLI
• Документація Intlayer для React
• Документація Intlayer для Next.js
• Документація з Markdown-контенту
• Документація з перекладу контенту

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