\n\n\n```\n\n \n \n\nTo use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n
\n 
{$content.myFile}
\n
\n```\n\n \n \n\nTo use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n
\n 
{myFile}
\n
\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst FileComponent: Component = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n
\n 
{myFile}
\n
\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-file\",\n template: `\n
\n 
{{ content().myFile }}
\n
\n `,\n})\nexport class FileComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"my_key\").onChange((newContent) => {\n document.getElementById(\"file-content\")!.textContent = newContent.myFile;\n});\n\n// Initial render\ndocument.getElementById(\"file-content\")!.textContent = content.myFile;\n```\n\n \n\n## Configurare il Contenuto del File\n\nPer 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.\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { file, type Dictionary } from \"intlayer\";\n\nconst myFileContent = {\n key: \"my_key\",\n content: {\n myFile: file(\"./path/to/file.txt\"),\n },\n} satisfies Dictionary;\n\nexport default myFileContent;\n```\n\n```json5 fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"my_key\",\n \"content\": {\n \"myFile\": {\n \"nodeType\": \"file\",\n \"value\": \"./path/to/file.txt\",\n },\n },\n}\n```\n\n## Utilizzo del Contenuto del File in React Intlayer\n\n\n \n\nTo 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.\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n
\n 
{myFile}
\n
\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\n\"use client\";\n\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"next-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n
\n 
{myFile}
\n
\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```vue fileName=\"**/*.vue\"\n\n\n\n```\n\n \n \n\nTo use embedded file content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n
\n 
{$content.myFile}
\n
\n```\n\n \n \n\nTo use embedded file content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst FileComponent: FC = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n
\n 
{myFile}
\n
\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst FileComponent: Component = () => {\n const { myFile } = useIntlayer(\"my_key\");\n\n return (\n
\n 
{myFile}
\n
\n );\n};\n\nexport default FileComponent;\n```\n\n \n \n\nTo use embedded file content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-file\",\n template: `\n
\n 
{{ content().myFile }}
\n
\n `,\n})\nexport class FileComponent {\n content = useIntlayer(\"my_key\");\n}\n```\n\n \n \n\nTo use embedded file content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"my_key\").onChange((newContent) => {\n document.getElementById(\"file-content\")!.textContent = newContent.myFile;\n});\n\n// Initial render\ndocument.getElementById(\"file-content\")!.textContent = content.myFile;\n```\n\n \n\n\n## Esempio di Markdown Multilingue\n\nPer 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.\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { file, t, md, type Dictionary } from \"intlayer\";\n\nconst myMultilingualContent = {\n key: \"my_multilingual_key\",\n content: {\n myContent: md(\n t({\n en: file(\"src/components/test.en.md\"),\n fr: file(\"src/components/test.fr.md\"),\n es: file(\"src/components/test.es.md\"),\n })\n ),\n },\n} satisfies Dictionary;\n\nexport default myMultilingualContent;\n```\n\nQuesta 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.\n\n## Come Intlayer Gestisce il Contenuto dei File\n\nLa 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:\n\n- Riconoscere che il contenuto ha origine da un file specifico.\n- Aggiornare automaticamente il contenuto del dizionario quando il file collegato viene modificato.\n- Garantire la sincronizzazione tra il file e il dizionario, preservando l'integrità del contenuto.\n\n## Risorse Aggiuntive\n\nPer maggiori dettagli sulla configurazione e l'uso dell'incorporamento di file in Intlayer, fare riferimento alle seguenti risorse:\n\n- [Documentazione CLI di Intlayer](/it/doc/concept/cli)\n- [Documentazione React Intlayer](/it/doc/environment/create-react-app)\n- [Documentazione Next Intlayer](/it/doc/environment/nextjs/15)\n- [Documentazione Contenuto Markdown](/it/doc/concept/content/markdown)\n- [Documentazione sul Contenuto di Traduzione](/it/doc/concept/content/translation)\n\nQueste risorse offrono ulteriori approfondimenti sull'incorporamento di file, la gestione dei contenuti e l'integrazione di Intlayer con vari framework.\n","description":"Scopri come incorporare file esterni nel tuo dizionario di contenuti usando la funzione `file`. Questa documentazione spiega come Intlayer collega e gestisce dinamicamente il contenuto dei file.","url":"https://intlayer.org/it/doc/concept/content/file","datePublished":"2025-03-13","dateModified":"2025-06-29","version":"5.5.10","keywords":"File, Internazionalizzazione, Documentazione, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}
    Autore:
    Creazione:2025-03-13Ultimo aggiornamento:2025-06-29

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

    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
    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
    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 modificabili multilingue, puoi usare 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({
        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.

    InserimentoAnnidamento