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?

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;

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

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;

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.