Como Funciona a Incorporação de Arquivos

No Intlayer, a função file permite incorporar o conteúdo de arquivos externos em um dicionário. Essa abordagem garante que o Intlayer reconheça o arquivo de origem, permitindo uma integração perfeita com o Editor Visual e CMS do Intlayer. Diferentemente dos métodos diretos de leitura de arquivos como import, require ou fs, o uso de file associa o arquivo ao dicionário, permitindo que o Intlayer rastreie e atualize o conteúdo dinamicamente quando o arquivo for editado.

Configurando o Conteúdo do Arquivo

Para incorporar o conteúdo de arquivos no seu projeto Intlayer, utilize a função file em um módulo de conteúdo. Abaixo estão exemplos demonstrando diferentes implementações.

Implementação em TypeScript

import { file, type Dictionary } from "intlayer";const myFileContent = {  key: "my_key",  content: {    myFile: file("./path/to/file.txt"),  },} satisfies Dictionary;export default myFileContent;

Implementação em Módulo ECMAScript (ESM)

Implementação em CommonJS

Configuração em JSON

Usando Conteúdo de Arquivo no React Intlayer

Para usar o conteúdo de arquivo incorporado em um componente React, importe e utilize o hook useIntlayer do pacote react-intlayer. Isso recupera o conteúdo da chave especificada e permite que ele seja exibido dinamicamente.

// Exemplo de uso do conteúdo de arquivo no Reactimport 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;

Exemplo de Markdown Multilíngue

Para suportar arquivos Markdown editáveis em várias línguas, você pode usar file em combinação com t() e md() para definir diferentes versões de idioma de um arquivo de conteúdo Markdown.

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

Essa configuração permite que o conteúdo seja recuperado dinamicamente com base na preferência de idioma do usuário. Quando usado no Editor Visual ou CMS do Intlayer, o sistema reconhecerá que o conteúdo vem dos arquivos Markdown especificados e garantirá que eles permaneçam editáveis.

Como o Intlayer Lida com Conteúdo de Arquivo

A função file é baseada no módulo fs do Node.js para ler o conteúdo do arquivo especificado e inseri-lo no dicionário. Quando usada em conjunto com o Editor Visual ou CMS do Intlayer, o Intlayer pode rastrear a relação entre o dicionário e o arquivo. Isso permite que o Intlayer:

• Reconheça que o conteúdo se origina de um arquivo específico.
• Atualize automaticamente o conteúdo do dicionário quando o arquivo vinculado for editado.
• Garanta a sincronização entre o arquivo e o dicionário, preservando a integridade do conteúdo.

Recursos Adicionais

Para mais detalhes sobre como configurar e usar a incorporação de arquivos no Intlayer, consulte os seguintes recursos:

• Documentação do Intlayer CLI
• Documentação do React Intlayer
• Documentação do Next Intlayer
• Documentação de Conteúdo Markdown
• Documentação de Conteúdo de Tradução

Esses recursos fornecem mais informações sobre incorporação de arquivos, gerenciamento de conteúdo e integração do Intlayer com várias estruturas.