\n\n \n ```\n\n \n \n ```svelte fileName=\"FAQ.svelte\"\n \n\n \n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n \n );\n };\n ```\n\n \n \n ```tsx fileName=\"FAQ.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n import { For } from \"solid-js\";\n\n export const FAQ = () => {\n const items = useIntlayer(\"faq\"); // { question: string; answer: string }[]\n\n return (\n \n );\n };\n ```\n\n \n \n ```typescript fileName=\"faq.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-faq\",\n template: `\n \n `,\n })\n export class FAQComponent {\n items = useIntlayer(\"faq\");\n }\n ```\n\n \n \n ```javascript fileName=\"faq.js\"\n import { useIntlayer } from \"vanilla-intlayer\";\n\n const faq = useIntlayer(\"faq\");\n\n faq.forEach((item) => {\n console.log(item.question);\n console.log(item.answer);\n });\n ```\n\n \n\n\n### 按索引获取单个项目\n\n```tsx\nconst faq2 = useIntlayer(\"faq\", { item: 2 });\n// → { question: string; answer: string }\n```\n\n### 使用显式语言环境获取单个项目\n\n```tsx\nconst faq2Zh = useIntlayer(\"faq\", { item: 2, locale: \"zh\" });\n```\n\n## 典型使用场景\n\n- 常见问题 (FAQ) 列表\n- 定价层级 / 资费计划\n- 轮播图 / 幻灯片内容\n- 分步说明步骤\n","description":"在 Intlayer 内容文件中使用 item 元数据字段来构建本地化项目的有序集合,这些项目在运行时可以通过索引进行选择。","url":"https://intlayer.org/zh/doc/concept/collections","datePublished":"2026-06-12","dateModified":"2026-06-12","version":"9.0.0","keywords":"集合, 内容列表, 动态内容, Intlayer, 国际化","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"开发者,内容经理"}}
    作者:
    Creation:2026-06-12Last update:2026-06-12

    集合

    集合(Collection)是一组共享相同字典键(key)但声明不同项目索引(item)的内容文件。Intlayer 会在构建时将它们合并为一个有序列表。

    声明集合项目

    每个文件代表一个项目。item 字段是它在列表中的位置(从 1 开始)。

    faq.1.content.ts
    import { t, type Dictionary } from "intlayer";
    
    const dictionary = {
      key: "faq",
      item: 1,
      content: {
        question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
        answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
      },
    } satisfies Dictionary;
    
    export default dictionary;
    faq.2.content.ts
    import { t, type Dictionary } from "intlayer";
    
    const dictionary = {
      key: "faq",
      item: 2,
      content: {
        question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
        answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
      },
    } satisfies Dictionary;
    
    export default dictionary;

    使用集合

    所有项目

    FAQ.tsx
    import { useIntlayer } from "react-intlayer";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      {items.map((item, index) => (        <li key={index}>          <strong>{item.question}</strong>          <p>{item.answer}</p>        </li>      ))}    </ul>  );};

    按索引获取单个项目

    tsx
    const faq2 = useIntlayer("faq", { item: 2 });// → { question: string; answer: string }

    使用显式语言环境获取单个项目

    tsx
    const faq2Zh = useIntlayer("faq", { item: 2, locale: "zh" });

    典型使用场景

    • 常见问题 (FAQ) 列表
    • 定价层级 / 资费计划
    • 轮播图 / 幻灯片内容
    • 分步说明步骤