Konten File / Menyematkan File di Intlayer

Di Intlayer, fungsi file memungkinkan penyematan konten file eksternal ke dalam sebuah kamus. Pendekatan ini memastikan bahwa Intlayer mengenali file sumber, memungkinkan integrasi mulus dengan Intlayer Visual Editor dan CMS.

Mengapa menggunakan file daripada import, require, atau fs?

Berbeda dengan metode pembacaan file seperti import, require, atau fs, menggunakan file mengasosiasikan file dengan kamus, memungkinkan Intlayer untuk melacak dan memperbarui konten secara dinamis saat file diedit. Dengan demikian, penggunaan file akan memberikan integrasi yang lebih baik dengan Intlayer Visual Editor dan CMS.

Menyiapkan Konten File

Untuk menyematkan konten file dalam proyek Intlayer Anda, gunakan fungsi file dalam modul konten. Berikut adalah contoh yang menunjukkan berbagai implementasi.

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

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

export default myFileContent;

Menggunakan Konten File di React Intlayer

Untuk menggunakan konten file yang disematkan dalam komponen React, impor dan gunakan hook useIntlayer dari paket react-intlayer. Ini mengambil konten dari kunci yang ditentukan dan memungkinkan konten tersebut ditampilkan secara dinamis.

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;

Contoh Markdown Multibahasa

Untuk mendukung file Markdown yang dapat diedit dalam berbagai bahasa, Anda dapat menggunakan file bersama dengan t() dan md() untuk mendefinisikan versi bahasa yang berbeda dari sebuah file konten Markdown.

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

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

Pengaturan ini memungkinkan konten diambil secara dinamis berdasarkan preferensi bahasa pengguna. Saat digunakan di Intlayer Visual Editor atau CMS, sistem akan mengenali bahwa konten berasal dari file Markdown yang ditentukan dan memastikan konten tersebut tetap dapat diedit.

Jenis-jenis path yang berbeda

Saat menggunakan fungsi file, Anda dapat menggunakan berbagai jenis path untuk menentukan file yang akan disematkan.

• file("./path/to/file.txt") - Path relatif terhadap file saat ini
• file("path/to/file.txt") - Path relatif terhadap direktori root proyek
• file("/users/username/path/to/file.txt") - Path absolut

Cara Intlayer Menangani Konten File

Fungsi file didasarkan pada modul fs Node.js untuk membaca konten file yang ditentukan dan memasukkannya ke dalam dictionary. Saat digunakan bersama dengan Intlayer Visual Editor atau CMS, Intlayer dapat melacak hubungan antara dictionary dan file. Ini memungkinkan Intlayer untuk:

• Mengenali bahwa konten berasal dari file tertentu.
• Secara otomatis memperbarui konten dictionary ketika file yang terhubung diedit.
• Memastikan sinkronisasi antara file dan kamus, menjaga integritas konten.

Sumber Daya Tambahan

Untuk detail lebih lanjut tentang konfigurasi dan penggunaan penyematan file di Intlayer, lihat sumber daya berikut:

• Dokumentasi Intlayer CLI
• Dokumentasi React Intlayer
• Dokumentasi Next Intlayer
• Dokumentasi Konten Markdown
• Dokumentasi Konten Terjemahan

Sumber daya ini memberikan wawasan lebih lanjut tentang embedding file, manajemen konten, dan integrasi Intlayer dengan berbagai framework.