Autore:

Creazione:2025-03-13Ultimo aggiornamento:2025-06-29

Riferimento a questa documentazione al tuo assistente AI preferito

Google AI mode Gemini

Perplexity Mistral

Pose una domanda e ottieni un riassunto del documento facendo riferimento a questa pagina e al provider AI di tua scelta

Cronologia delle versioni

"Inizio cronologia"
v5.5.1029/06/2025

Il contenuto di questa pagina è stato tradotto con un'IA.

Vedi l'ultima versione del contenuto originale in inglese

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Contenuto File / Incorporare File in Intlayer

Come Funziona l'Incorporamento dei File

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

"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 Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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;

Configurare il Contenuto del File

Per incorporare il contenuto di un file nel tuo progetto Intlayer, utilizza la funzione file in un modulo di contenuto. Di seguito sono riportati esempi che mostrano diverse implementazioni.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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

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

export default myFileContent;

Utilizzo del Contenuto del File in React 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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

"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 Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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

Copiare il codice

Copiare il codice nella clipboard

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;

Esempio di Markdown Multilingue

Per supportare file Markdown modificabili multilingue, puoi usare file in combinazione con t() e md() per definire diverse versioni linguistiche di un file di contenuto Markdown.

**/*.content.ts

Copiare il codice

Copiare il codice nella clipboard

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;

Questa configurazione consente di recuperare dinamicamente il contenuto in base alla preferenza linguistica dell'utente. Quando viene utilizzata nell'Intlayer Visual Editor o nel CMS, il sistema riconosce che il contenuto proviene dai file Markdown specificati e garantisce che rimangano modificabili.

Come Intlayer Gestisce il Contenuto dei File

La funzione file si basa sul modulo fs di Node.js per leggere il contenuto del file specificato e inserirlo nel dizionario. Quando viene utilizzata in combinazione con l'Intlayer Visual Editor o il CMS, Intlayer può tracciare la relazione tra il dizionario e il file. Questo permette a Intlayer di:

Riconoscere che il contenuto ha origine da un file specifico.
Aggiornare automaticamente il contenuto del dizionario quando il file collegato viene modificato.
Garantire la sincronizzazione tra il file e il dizionario, preservando l'integrità del contenuto.

Risorse Aggiuntive

Per maggiori dettagli sulla configurazione e l'uso dell'incorporamento di file in Intlayer, fare riferimento alle seguenti risorse:

Queste risorse offrono ulteriori approfondimenti sull'incorporamento di file, la gestione dei contenuti e l'integrazione di Intlayer con vari framework.

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