文件内容 / 在 Intlayer 中嵌入文件

文件嵌入的工作原理

在 Intlayer 中，file 函数允许将外部文件内容嵌入到字典中。这种方法确保 Intlayer 识别源文件，实现与 Intlayer 可视化编辑器和 CMS 的无缝集成。与直接使用 import、require 或 fs 文件读取方法不同，使用 file 会将文件与字典关联，使 Intlayer 能够在文件被编辑时动态跟踪和更新内容。

设置文件内容

要在您的 Intlayer 项目中嵌入文件内容，请在内容模块中使用 file 函数。以下示例展示了不同的实现方式。

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

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

export default myFileContent;

在 React Intlayer 中使用文件内容

要在 React 组件中使用嵌入的文件内容，请从 react-intlayer 包中导入并使用 useIntlayer 钩子。该钩子会从指定的 key 中获取内容，并允许动态显示。

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;

多语言 Markdown 示例

为了支持多语言可编辑的 Markdown 文件，您可以结合使用 file、t() 和 md() 来定义 Markdown 内容文件的不同语言版本。

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

const myMultilingualContent = {
  key: "my_multilingual_key",
  content: {
    myContent: md(
      t({
        zh: file("src/components/test.zh.md"),
        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;

此设置允许根据用户的语言偏好动态检索内容。当在 Intlayer 可视化编辑器或 CMS 中使用时，系统将识别内容来自指定的 Markdown 文件，并确保它们保持可编辑状态。

Intlayer 如何处理文件内容

file 函数基于 Node.js 的 fs 模块，用于读取指定文件的内容并将其插入到字典中。当与 Intlayer 可视化编辑器或 CMS 结合使用时，Intlayer 可以跟踪字典与文件之间的关系。这使得 Intlayer 能够：

• 识别内容来源于特定文件。
• 当关联文件被编辑时，自动更新字典内容。
• 确保文件与字典之间的同步，保持内容的完整性。

额外资源

有关在 Intlayer 中配置和使用文件嵌入的更多详细信息，请参阅以下资源：

• Intlayer CLI 文档
• React Intlayer 文档
• Next Intlayer 文档
• Markdown 内容文档
• 确保文件与字典之间的同步，保持内容的完整性。

额外资源

有关在 Intlayer 中配置和使用文件嵌入的更多详细信息，请参阅以下资源：

• Intlayer CLI 文档
• React Intlayer 文档
• Next Intlayer 文档
• Markdown 内容文档
• 翻译内容文档

这些资源提供了关于文件嵌入、内容管理以及 Intlayer 与各种框架集成的更多见解。