Tác giả:

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

Tham chiếu tài liệu này tới trợ lý AI yêu thích của bạnChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Đặt câu hỏi và nhận tóm tắt tài liệu bằng cách tham chiếu trang này và nhà cung cấp AI bạn chọn

Lịch sử phiên bản

"Khởi tạo lịch sử"
v5.5.1029/6/2025

Nội dung của trang này đã được dịch bằng AI.

Xem phiên bản mới nhất của nội dung gốc bằng tiếng Anh

Chỉnh sửa tài liệu này

Nếu bạn có ý tưởng để cải thiện tài liệu này, vui lòng đóng góp bằng cách gửi pull request trên GitHub.

Liên kết GitHub tới tài liệu

Sao chép

Sao chép Markdown của tài liệu vào bộ nhớ tạm

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

Name: Intlayer
Author: 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

Sao chép mã

Sao chép mã vào clipboard

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;

To use embedded file content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

"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;

To use embedded file content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Sao chép mã

Sao chép mã vào clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myFile } = useIntlayer("my_key");</script><template><div>  <pre>{{ myFile }}</pre></div></template>

To use embedded file content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Sao chép mã

Sao chép mã vào clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><pre>{$content.myFile}</pre></div>

To use embedded file content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

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;

To use embedded file content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

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;

To use embedded file content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Sao chép mã

Sao chép mã vào clipboard

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");}

To use embedded file content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Sao chép mã

Sao chép mã vào clipboard

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;

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

Sao chép mã

Sao chép mã vào clipboard

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

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

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;

To use embedded file content in Next.js Client Components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

"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;

To use embedded file content in Vue components, retrieve it via the useIntlayer hook. Here's an example:

**/*.vue

Sao chép mã

Sao chép mã vào clipboard

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const { myFile } = useIntlayer("my_key");</script><template><div>  <pre>{{ myFile }}</pre></div></template>

To use embedded file content in Svelte components, retrieve it via the useIntlayer hook. The store is accessed with $. Here's an example:

**/*.svelte

Sao chép mã

Sao chép mã vào clipboard

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my_key");</script><div><pre>{$content.myFile}</pre></div>

To use embedded file content in Preact components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

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;

To use embedded file content in SolidJS components, retrieve it via the useIntlayer hook. Here's an example:

**/*.tsx

Sao chép mã

Sao chép mã vào clipboard

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;

To use embedded file content in Angular components, retrieve it via the useIntlayer hook. Here's an example:

app.component.ts

Sao chép mã

Sao chép mã vào clipboard

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");}

To use embedded file content with vanilla-intlayer, retrieve it via the useIntlayer hook. Here's an example:

**/*.ts

Sao chép mã

Sao chép mã vào clipboard

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;

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

Sao chép mã

Sao chép mã vào clipboard

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

Lịch sử phiên bản

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

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

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

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

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

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

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

Tài Nguyên Bổ Sung

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