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

    Vedi l'ultima versione del contenuto originale in inglese

    Come Funziona l'Incorporazione dei File

    In Intlayer, la funzione file consente di incorporare il contenuto di file esterni in un dizionario. Questo approccio garantisce che Intlayer riconosca il file sorgente, consentendo un'integrazione senza soluzione di continuità con l'Editor Visivo e il CMS di Intlayer. A differenza dei metodi diretti di lettura dei file come import, require o fs, l'uso di file associa il file al dizionario, permettendo a Intlayer di tracciare e aggiornare dinamicamente il contenuto quando il file viene modificato.

    Configurazione del 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 dimostrano diverse implementazioni.

    Implementazione in TypeScript

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

    Implementazione in ECMAScript Module (ESM)

    Implementazione in CommonJS

    Configurazione in JSON

    Utilizzo del Contenuto del File in React Intlayer

    Per utilizzare il contenuto incorporato del file in un componente React, importa e utilizza il hook useIntlayer dal pacchetto react-intlayer. Questo recupera il contenuto dalla chiave specificata e consente di visualizzarlo dinamicamente.

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

    Esempio di Markdown Multilingue

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

    **/*.content.ts
    import { file, t, md, type Dictionary } from "intlayer";const myMultilingualContent = {  key: "my_multilingual_key",  content: {    myContent: md(      t({        it: file("src/components/test.it.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;

    Questa configurazione consente di recuperare dinamicamente il contenuto in base alla preferenza linguistica dell'utente. Quando utilizzato nell'Editor Visivo o nel CMS di Intlayer, il sistema riconoscerà che il contenuto proviene dai file Markdown specificati e garantirà 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 utilizzata in combinazione con l'Editor Visivo o il CMS di Intlayer, Intlayer può tracciare la relazione tra il dizionario e il file. Questo consente a Intlayer di:

    • Riconoscere che il contenuto proviene 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 ulteriori dettagli sulla configurazione e l'utilizzo dell'incorporazione dei file in Intlayer, consulta le seguenti risorse:

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

    Se hai un’idea per migliorare questa documentazione, non esitare a contribuire inviando una pull request su GitHub.

    Collegamento GitHub alla documentazione