作者:
    Aymeric PINEAU
    Creation:2025-03-13Last update:2025-06-29

    插入内容 / Intlayer 中的插入

    插入的工作原理

    在 Intlayer 中，插入内容是通过 insertion 函数实现的，该函数识别字符串中的占位符字段（例如 {{name}} 或 {{age}}），这些字段可以在运行时动态替换。这种方法允许您创建灵活的模板式字符串，其中内容的特定部分由应用程序传入的数据决定。

    当与 React Intlayer 或 Next Intlayer 集成时，您只需提供包含每个占位符值的数据对象，Intlayer 会自动渲染内容并替换占位符。

    设置插入内容

    要在您的 Intlayer 项目中设置插入内容，请创建一个包含插入定义的内容模块。

    使用 insert 函数显式声明插入内容。

    如果字符串包含常见的插入指示符（如 {{name}}），Intlayer 将自动对其进行转换。

    在 React Intlayer 中使用插入内容

    要在 React 组件中使用插入内容，请从 react-intlayer 包中导入并使用 useIntlayer 钩子。该钩子会检索指定键的内容，并允许您传入一个对象，将内容中的每个占位符映射到您希望显示的值。

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const InsertionComponent: FC = () => {
  const { myInsertion } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 输出: "Hello, my name is John and I am 30 years old!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* 您可以使用不同的值重复使用相同的插入内容 */
tsx fileName="**/*.tsx" codeFormat="typescript"
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const InsertionComponent: FC = () => {
  const { myInsertion } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 输出: "Hello, my name is John and I am 30 years old!" */
          myInsertion({ name: "John", age: "30" })
        }
      </p>
      <p>
        {
          /* 你可以用不同的值重复使用相同的插入内容 */
          myInsertion({ name: "Alice", age: "25" })
        }
      </p>
    </div>
  );
};

export default InsertionComponent;

    附加资源

    有关配置和使用的更详细信息，请参考以下资源：

    Intlayer CLI 文档了解如何使用 Intlayer CLI 管理您的多语言网站。按照此在线文档中的步骤，在几分钟内设置您的项目。
    React Intlayer 文档告别 i18next。2026 年构建多语言 (i18n) Create React App 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。
    Next Intlayer 文档告别 i18next。2026 年构建多语言 (i18n) Next.js 15 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。

    这些资源提供了关于在各种环境和框架中设置和使用 Intlayer 的更多见解。

    性别文件