Cómo Funciona la Incrustación de Archivos

En Intlayer, la función file permite incrustar contenido de archivos externos en un diccionario. Este enfoque asegura que Intlayer reconozca el archivo fuente, permitiendo una integración fluida con el Editor Visual y el CMS de Intlayer. A diferencia de los métodos directos de import, require o lectura de archivos con fs, el uso de file asocia el archivo con el diccionario, permitiendo que Intlayer rastree y actualice el contenido dinámicamente cuando se edita el archivo.

Configuración del Contenido del Archivo

Para incrustar contenido de archivos en tu proyecto de Intlayer, utiliza la función file en un módulo de contenido. A continuación, se muestran ejemplos que demuestran diferentes implementaciones.

Implementación en TypeScript

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

Implementación en Módulo ECMAScript (ESM)

Implementación en CommonJS

Configuración en JSON

Uso del Contenido del Archivo en React Intlayer

Para usar contenido de archivo incrustado en un componente React, importa y utiliza el hook useIntlayer del paquete react-intlayer. Esto recupera el contenido de la clave especificada y permite que se muestre dinámicamente.

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;

Ejemplo de Markdown Multilingüe

Para soportar archivos Markdown editables multilingües, puedes usar file en combinación con t() y md() para definir diferentes versiones de idioma de un archivo de contenido Markdown.

import { file, t, md, type Dictionary } from "intlayer";const myMultilingualContent = {  key: "my_multilingual_key",  content: {    myContent: md(      t({        es: file("src/components/test.es.md"),        en: file("src/components/test.en.md"),        fr: file("src/components/test.fr.md"),      })    ),  },} satisfies Dictionary;export default myMultilingualContent;

Esta configuración permite que el contenido se recupere dinámicamente según la preferencia de idioma del usuario. Cuando se utiliza en el Editor Visual o CMS de Intlayer, el sistema reconocerá que el contenido proviene de los archivos Markdown especificados y asegurará que permanezcan editables.

Cómo Maneja Intlayer el Contenido de Archivos

La función file se basa en el módulo fs de Node.js para leer el contenido del archivo especificado e insertarlo en el diccionario. Cuando se utiliza junto con el Editor Visual o CMS de Intlayer, Intlayer puede rastrear la relación entre el diccionario y el archivo. Esto permite que Intlayer:

• Reconozca que el contenido proviene de un archivo específico.
• Actualice automáticamente el contenido del diccionario cuando se edite el archivo vinculado.
• Asegure la sincronización entre el archivo y el diccionario, preservando la integridad del contenido.

Recursos Adicionales

Para más detalles sobre la configuración y el uso de la incrustación de archivos en Intlayer, consulta los siguientes recursos:

• Documentación de Intlayer CLI
• Documentación de React Intlayer
• Documentación de Next Intlayer
• Documentación de Contenido Markdown
• Documentación de Contenido de Traducción

Estos recursos proporcionan más información sobre la incrustación de archivos, la gestión de contenido y la integración de Intlayer con varios frameworks.