intlayer-content

Intlayer 内容节点

使用 Intlayer 函数定义丰富且动态的内容。请根据以下参考了解每种节点类型。

翻译（t）

定义映射到不同语言区域的多语言内容。

文档

import { t } from "intlayer";

const content = t({
  en: "Hello",
  fr: "Bonjour",
  es: "Hola",
});

在配置文件中查找要声明的语言区域。支持的配置文件：

• intlayer.config.{ts|js|json|json5|jsonc|cjs|mjs}
• .intlayerrc

枚举（enu）

将内容映射到特定键、数字或范围（适用于复数形式）。

文档

import { enu } from "intlayer";

const carCount = enu({
  "0": "No cars",
  "1": "One car",
  ">1": "Multiple cars",
  fallback: "Unknown amount",
});

条件（cond）

根据布尔条件定义内容。

文档

import { cond } from "intlayer";

const isLoggedIn = cond({
  true: "Welcome back!",
  false: "Please log in",
  fallback: "Status unknown", // Optional
});

Markdown（md）

使用 Markdown 语法定义富文本。

文档

import { md } from "intlayer";

const article = md("# Title\n\nSome **bold** text.");

HTML（html）

定义 HTML 内容，并可选择使用自定义组件。

文档

import { html } from "intlayer";

const richText = html("<p>Hello <strong>World</strong></p>");

嵌套（nest）

复用另一个字典中的内容。

文档

import { nest } from "intlayer";

// Reference entire dictionary
const fullRef = nest("other_dictionary_key");

// Reference specific path
const partialRef = nest("other_dictionary_key", "path.to.value");

函数获取

执行逻辑以生成内容（同步或异步）。

文档

const computed = () => `Current time: ${new Date().toISOString()}`;

const fetched = async () => {
  const data = await fetch("/api/data").then((res) => res.json());
  return data.message;
};

插入（insert）

使用变量定义动态内容。

文档

import { insert } from "intlayer";

const welcome = insert("Hello {{name}}!");

文件（file）

引用外部文件作为内容。

文档

import { file } from "intlayer";

const myFile = file("./path/to/file.txt");

性别（gender）

根据性别（“male”、“female”等）定义内容。

文档

import { gender } from "intlayer";

const greeting = gender({
  male: "Welcome sir",
  female: "Welcome madam",
  fallback: "Welcome",
});

示例目录结构（react）

src/
├── components/
│   ├── MyComponent/
│   │   ├── index.content.ts          # Content declaration
│   │   └── index.tsx                 # Component
│   ├── myOtherComponent.content.ts   # Content declaration
│   └── MyOtherComponent.tsx          # Component

内容模板

TypeScript（.content.ts）

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

const content = {
  key: "my-component-key",
  content: {
    title: "...",
  },
} satisfies Dictionary;

export default content;

TypeScript 与 React（.content.tsx）

import { t, type Dictionary } from "intlayer";
import { ReactNode } from "react";

const content = {
  key: "my-component-key",
  content: {
    title: <>My React Node</>,
  },
} satisfies Dictionary;

export default content;

{
  "key": "my-component-key",
  "content": {
    "title": "..."
  }
}

import { t } from "intlayer";

/** @type {import('intlayer').Dictionary} **/
const content = {
  key: "my-component-key",
  content: {
    title: "...",
  },
};

export default content;

内容声明组合

节点可以嵌套，以实现复杂逻辑。

import {
  cond,
  enu,
  file,
  gender,
  insert,
  html,
  md,
  nest,
  t,
  type Dictionary,
} from "intlayer";

const content = {
  key: "test",
  title: "Test component content",
  description:
    "Content declarations for the Test component, including examples of plurals, conditions, gender-specific messages, dynamic insertions, markdown, file-based content and nested dictionaries used for demonstration and testing purposes.",
  content: {
    baseContent: "Intlayer", // Content that no need to be i18n
    welcomeMessage: t({
      en: "Welcome to our application",
      "en-GB": "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
      // ... All other locales set in intlayer config file
    }),
    numberOfCar: enu({
      // Check all conditions in other
      "<-1": "Less than minus one car",
      "-1": "Minus one car",
      "0": "No cars",
      "1": "One car",
      ">19": "Many cars",
      ">5": "Some cars", // Will never will triggered, because >5 is included between 1 and >19
      fallback: "Fallback value", // Optional but avoid undefined type
    }),
    myCondition: cond({
      true: "my content when it's true",
      false: "my content when it's false",
      fallback: "my content when the condition fails", // Optional but avoid undefined type
    }),
    myGender: gender({
      male: "my content for male users",
      female: "my content for female users",
      fallback: "my content when gender is not specified", // Optional but avoid undefined type
    }),
    myInsertion: insert(
      "Hello, my name is {{name}} and I am {{age}} years old!"
    ),
    myMultilingualInsertion: insert(
      t({
        ar: "مرحبا, اسمي {{name}} وأنا {{age}} سنة!",
        de: "Hallo, mein Name ist {{name}} und ich bin {{age}} Jahre alt!",
        en: "Hello, my name is {{name}} and I am {{age}} years old!",
        "en-GB": "Hello, my name is {{name}} and I am {{age}} years old!",
      })
    ),
    myTextFile: file("./test.txt"), // File helps to know where is located the file
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
    fullNested: nest("code"),
    // References a specific nested value:
    partialNested: nest("code", "title"),
    myMarkdown: md("## My title \n\nLorem Ipsum"),
    myMarkdownFile: md(file("./test.md")),
    multilingualMarkdown: t({
      en: md("## test en"),
      fr: md("## test fr"),
      es: md("## test es"),
      "en-GB": md("## test en-GB"),
    }),
    myHTML: html("<h2>My title</h2><p>Lorem Ipsum</p>"),
    myHTMLFile: html(file("./test.html")),

    arrayContent: ["string", "string2", "string3"],
    arrayOfObject: [
      {
        name: "item1",
        description: "description1",
      },
      {
        name: "item2",
        description: "description2",
      },
    ],
    objectOfArray: {
      array: ["item1", "item2", "item3"],
      object: {
        name: "object name",
        description: "object description",
      },
    },
  },
  tags: ["test", "test page"],
} satisfies Dictionary;

export default content;

字典类型验证

Dictionary<{ title: string; description?: string }>; // Generic describing content type for formatted data (metadata, etc)

AI 管理的关键字典字段

核心元数据

• key：字典的标识符（例如，about-page-meta）。AI 可以确保命名约定保持一致。
• title：便于在 CMS 或编辑器中识别的易读名称。
• description：提供字典的上下文。AI 可据此了解其用途，并生成更好的翻译或内容。
• tags：用于整理和筛选字典的分类字符串（例如，metadata、SEO）。

内容与本地化

• locale：指定内容的语言区域，适用于按语言区域划分的文件
• contentAutoTransformation：用于自动将原始字符串转换为 Markdown、HTML 或插入内容（变量）等专用格式的开关。
• fill：用于指示是否应由 AI/自动化工具自动填充字典。

行为设置

• priority：用于在合并具有相同键的字典时解决冲突的数值。
• importMode：定义内容的加载方式（static、dynamic 或 live）。AI 可以根据性能需求推荐最佳模式。
• location：控制 CMS 同步（hybrid、remote、local）。AI 可以管理事实来源的位置。
• schema：一个字符串，使用配置文件中声明的 zod 模式验证数据

参考

• 网站

• 文档

• 内容概览

• intlayer 包导出