Recibe notificaciones sobre los próximos lanzamientos de Intlayer
    Creación:2025-03-13Última actualización:2025-06-29

    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.

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

    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.

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

    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.

    **/*.content.ts
    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:

    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.

    Historial del Documento

    • 5.5.10 - 2025-06-29: Historial inicial
    Recibe notificaciones sobre los próximos lanzamientos de Intlayer