Contenido de Archivo / Incrustar Archivos en Intlayer

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, facilitando una integración fluida con el Editor Visual de Intlayer y el CMS. A diferencia de los métodos directos de lectura de archivos como import, require o fs, el uso de file asocia el archivo con el diccionario, permitiendo que Intlayer rastree y actualice el contenido dinámicamente cuando el archivo es editado.

Configuración del Contenido de Archivo

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

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

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

export default myFileContent;

Uso del Contenido de 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 mostrarlo 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 en distintos idiomas de un archivo de contenido Markdown.

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

const myMultilingualContent = {
  key: "mi_clave_multilingue",
  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;

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 de Intlayer o en el CMS, el sistema reconocerá que el contenido proviene de los archivos Markdown especificados y garantizará que permanezcan editables.

Cómo Intlayer Maneja 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 usa junto con el Editor Visual de Intlayer o el CMS, Intlayer puede rastrear la relación entre el diccionario y el archivo. Esto permite a Intlayer:

• Reconocer que el contenido se origina de un archivo específico.
• Actualizar automáticamente el contenido del diccionario cuando se edita el archivo vinculado.
• Asegurar 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, consulte los siguientes recursos:

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

Estos recursos ofrecen una visión más profunda sobre la incrustación de archivos, la gestión de contenido y la integración de Intlayer con varios frameworks.