Autor:
    Aymeric PINEAU
    Data utworzenia:2025-03-13Ostatnia aktualizacja:2026-10-08

    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?

    W przeciwieństwie do metod odczytu plików za pomocą import, require lub fs, użycie file wiąże plik ze słownikiem, co pozwala Intlayer śledzić i dynamicznie aktualizować treść podczas edycji pliku. W rezultacie użycie file zapewnia znacznie lepszą integrację z edytorem wizualnym Intlayer Visual Editor oraz systemem CMS.

    Konfiguracja zawartości pliku

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

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

    Używanie zawartości pliku w komponentach

    Aby użyć osadzonej zawartości pliku w komponencie React, zaimportuj i użyj hooka useIntlayer z pakietu react-intlayer. Pobiera on treść dla wskazanego klucza i pozwala wyświetlić ją dynamicznie.

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

    Aby użyć osadzonej zawartości pliku w komponentach klienckich Next.js (Client Components), pobierz ją za pomocą hooka useIntlayer. Oto przykład:

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

    Aby użyć osadzonej zawartości pliku w komponentach Vue, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

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

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

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

    Aby użyć osadzonej zawartości pliku w komponentach Svelte, pobierz ją za pomocą hooka useIntlayer. Dostęp do magazynu (store) uzyskujemy przez $. Oto przykład:

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

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

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

    Aby użyć osadzonej zawartości pliku w komponentach Preact, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

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

    Aby użyć osadzonej zawartości pliku w komponentach SolidJS, pobierz ją za pomocą hooka useIntlayer. Oto przykład:

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

    Aby użyć osadzonej zawartości pliku w komponentach Angular, pobierz ją za pomocą funkcji useIntlayer. Oto przykład:

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

    Aby użyć osadzonej zawartości pliku w czystym JavaScript (vanilla-intlayer), pobierz ją za pomocą funkcji useIntlayer. Oto przykład:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

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

// Pierwsze renderowanie
document.getElementById("file-content")!.textContent = content.myFile;

    Dodatkowe zasoby

    Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

    Dokumentacja Intlayer CLI
    Dokumentacja React Intlayer
    Dokumentacja Next Intlayer

    Te zasoby oferują dodatkowe informacje na temat konfiguracji i użytkowania Intlayer w różnych środowiskach oraz frameworkach.

    WstawienieZagnieżdżanie