Nội dung Tệp tin / Nhúng Tệp tin trong Intlayer

Trong Intlayer, hàm file cho phép nhúng nội dung tệp tin bên ngoài vào một từ điển. Cách tiếp cận này đảm bảo Intlayer nhận diện được tệp nguồn, giúp tích hợp liền mạch với Intlayer Visual Editor và CMS.

Tại sao sử dụng file thay vì import, require hoặc fs?

Khác với các phương pháp đọc tệp như import, require hoặc fs, việc sử dụng file liên kết tệp với từ điển, cho phép Intlayer theo dõi và cập nhật nội dung một cách động khi tệp được chỉnh sửa. Do đó, sử dụng file sẽ mang lại sự tích hợp tốt hơn với Intlayer Visual Editor và CMS.

Cài đặt Nội dung Tệp tin

Để nhúng nội dung tệp vào dự án Intlayer của bạn, hãy sử dụng hàm file trong một module nội dung. Dưới đây là các ví dụ minh họa các cách triển khai khác nhau.

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

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

export default myFileContent;

Sử dụng Nội dung Tệp trong React Intlayer

Để sử dụng nội dung tệp được nhúng trong một component React, hãy import và sử dụng hook useIntlayer từ package react-intlayer. Hook này lấy nội dung từ key được chỉ định và cho phép hiển thị nội dung đó một cách động.

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;

Ví dụ Markdown Đa ngôn ngữ

Để hỗ trợ các tệp Markdown có thể chỉnh sửa đa ngôn ngữ, bạn có thể sử dụng file kết hợp với t() và md() để định nghĩa các phiên bản ngôn ngữ khác nhau của một tệp nội dung 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;

Cấu hình này cho phép nội dung được truy xuất động dựa trên ngôn ngữ ưu tiên của người dùng. Khi được sử dụng trong Intlayer Visual Editor hoặc CMS, hệ thống sẽ nhận biết rằng nội dung đến từ các tệp Markdown được chỉ định và đảm bảo chúng vẫn có thể chỉnh sửa được.

Các loại đường dẫn khác nhau

Khi sử dụng hàm file, bạn có thể sử dụng các loại đường dẫn khác nhau để chỉ định tệp cần nhúng.

• file("./path/to/file.txt") - Đường dẫn tương đối đến tệp hiện tại
• file("path/to/file.txt") - Đường dẫn tương đối đến thư mục gốc của dự án
• file("/users/username/path/to/file.txt") - Đường dẫn tuyệt đối

Cách Intlayer Xử Lý Nội Dung Tệp

Hàm file dựa trên module fs của Node.js để đọc nội dung của tệp được chỉ định và chèn nó vào từ điển. Khi được sử dụng kết hợp với Intlayer Visual Editor hoặc CMS, Intlayer có thể theo dõi mối quan hệ giữa từ điển và tệp. Điều này cho phép Intlayer:

• Nhận biết rằng nội dung xuất phát từ một tệp cụ thể.
• Tự động cập nhật nội dung từ điển khi tệp liên kết được chỉnh sửa.
• Đảm bảo đồng bộ giữa tệp và từ điển, giữ nguyên tính toàn vẹn của nội dung.

Tài Nguyên Bổ Sung

Để biết thêm chi tiết về cách cấu hình và sử dụng nhúng tệp trong Intlayer, hãy tham khảo các tài nguyên sau:

• Tài liệu CLI của Intlayer
• Tài liệu React Intlayer
• Tài liệu Next Intlayer
• Tài liệu Nội dung Markdown
• Tài liệu Nội dung Dịch thuật

Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về nhúng tệp, quản lý nội dung, và tích hợp của Intlayer với các framework khác nhau.