Conteúdo de Arquivo / Incorporação de Arquivos no Intlayer

No Intlayer, a função file permite incorporar conteúdo de arquivo externo em um dicionário. Esta abordagem garante que o Intlayer reconheça o arquivo de origem, permitindo integração perfeita com o Editor Visual do Intlayer e CMS.

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, possibilitando uma integração perfeita com o Editor Visual do Intlayer e o CMS. 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 acompanhe e atualize o conteúdo dinamicamente quando o arquivo for editado.

Configurando o Conteúdo do Arquivo

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

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

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

export default myFileContent;

Usando Conteúdo de Arquivo no React Intlayer

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;

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

<script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const { myFile } = useIntlayer("my_key");
</script>

<template>
  <div>
    <pre>{{ myFile }}</pre>
  </div>
</template>

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my_key");
</script>

<div>
  <pre>{$content.myFile}</pre>
</div>

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const FileComponent: FC = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const FileComponent: Component = () => {
  const { myFile } = useIntlayer("my_key");

  return (
    <div>
      <pre>{myFile}</pre>
    </div>
  );
};

export default FileComponent;

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-file",
  template: `
    <div>
      <pre>{{ content().myFile }}</pre>
    </div>
  `,
})
export class FileComponent {
  content = useIntlayer("my_key");
}

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("file-content")!.textContent = newContent.myFile;
});

// Initial render
document.getElementById("file-content")!.textContent = content.myFile;

Exemplo de Markdown Multilíngue

Para suportar arquivos Markdown editáveis multilíngues, 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;

Esta 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 Intlayer ou CMS, o sistema reconhecerá que o conteúdo vem dos arquivos Markdown especificados e garantirá que eles permaneçam editáveis.

Diferentes tipos de caminhos

Ao usar a função file, você pode usar diferentes tipos de caminhos para especificar o arquivo a ser incorporado.

• file("./path/to/file.txt") - Caminho relativo ao arquivo atual
• file("path/to/file.txt") - Caminho relativo ao diretório raiz do projeto
• file("/users/username/path/to/file.txt") - Caminho absoluto

Como o Intlayer Trata o Conteúdo de Arquivos

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 Intlayer ou CMS, 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.
• Garantir a sincronização entre o arquivo e o dicionário, preservando a integridade do conteúdo.

Recursos Adicionais

Para mais detalhes sobre a configuração e uso da 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 do Conteúdo de Tradução

Estes recursos fornecem mais informações sobre incorporação de arquivos, gerenciamento de conteúdo e a integração do Intlayer com vários frameworks.