Tác giả:
    Ngày tạo:2025-03-13Cập nhật lần cuối:2025-06-29

    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?

    To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

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

    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.

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

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

    To use embedded file content in a React component, import and use the useIntlayer hook from the react-intlayer package. This retrieves the content from the specified key and allows it to be displayed dynamically.

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

    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.

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

    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.

    Chèn
    Nesting