Zawartość pliku / Osadzanie plików w Intlayer

W Intlayer funkcja file pozwala na osadzenie zawartości zewnętrznego pliku w słowniku. Takie podejście zapewnia, że Intlayer rozpoznaje plik źródłowy, umożliwiając płynną integrację z Intlayer Visual Editor i CMS.

Dlaczego używać file zamiast import, require lub fs?

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

Konfiguracja zawartości pliku

Aby osadzić zawartość pliku w projekcie Intlayer, użyj funkcji file w module zawartości. Poniżej znajdują się przykłady różnych implementacji.

import { file, type Dictionary } from "intlayer";

const myFileContent = {
  key: "my_key",
  content: {
    myFile: file("./path/to/file.txt"),
  },
} satisfies Dictionary;

export default myFileContent;

Używanie zawartości pliku w 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;

Przykład wielojęzycznego Markdown

Aby obsługiwać wielojęzyczne edytowalne pliki Markdown, możesz użyć file w połączeniu z t() i md(), aby zdefiniować różne wersje językowe pliku z zawartością 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;

Ta konfiguracja pozwala na dynamiczne pobieranie zawartości w oparciu o preferencje językowe użytkownika. Gdy jest używana w Intlayer Visual Editor lub CMS, system rozpozna, że zawartość pochodzi z określonych plików Markdown i zapewni, że pozostaną one edytowalne.

Różne typy ścieżek

Podczas używania funkcji file można stosować różne typy ścieżek do określenia pliku do osadzenia.

• file("./path/to/file.txt") - Ścieżka względna względem bieżącego pliku
• file("path/to/file.txt") - Ścieżka względna względem katalogu głównego projektu
• file("/users/username/path/to/file.txt") - Ścieżka absolutna

Jak Intlayer obsługuje zawartość plików

Funkcja file opiera się na module fs Node.js, aby odczytać zawartość określonego pliku i wstawić ją do słownika. Używana w połączeniu z Intlayer Visual Editor lub CMS, Intlayer może śledzić relację między słownikiem a plikiem. Pozwala to Intlayer na:

• Rozpoznanie, że zawartość pochodzi z określonego pliku.
• Automatyczną aktualizację zawartości słownika, gdy powiązany plik zostanie edytowany.
• Zapewnić synchronizację między plikiem a słownikiem, zachowując integralność zawartości.

Dodatkowe zasoby

Aby uzyskać więcej informacji na temat konfigurowania i używania osadzania plików w Intlayer, zapoznaj się z następującymi zasobami:

• Dokumentacja Intlayer CLI
• Dokumentacja React Intlayer
• Dokumentacja Next Intlayer
• Dokumentacja zawartości Markdown
• Dokumentacja zawartości tłumaczeń

Te zasoby dostarczają dodatkowych informacji na temat osadzania plików, zarządzania zawartością oraz integracji Intlayer z różnymi frameworkami.