作者:

Creation:2025-03-13Last update:2025-06-29

将此文档参考到您的 AI 助手ChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商

版本历史

"初始化历史记录"
v5.5.102025/6/29

此页面的内容已使用 AI 翻译。

查看英文原文的最新版本

编辑此文档

如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。

文档的 GitHub 链接

Copy

复制文档 Markdown 到剪贴板

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

Name: Intlayer
Author: Intlayer

文件嵌入的工作原理

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

设置文件内容

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

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

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

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

**/*.tsx

复制代码

复制代码到剪贴板

"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

复制代码

复制代码到剪贴板

<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

复制代码

复制代码到剪贴板

<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

复制代码

复制代码到剪贴板

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

复制代码

复制代码到剪贴板

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

复制代码

复制代码到剪贴板

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

复制代码

复制代码到剪贴板

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;

多语言 Markdown 示例

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

**/*.content.ts

复制代码

复制代码到剪贴板

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 与各种框架集成的更多见解。

插入嵌套