Коллекция (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>  );};

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>  );};

FAQ.tsx

Копировать код

Копировать код в буфер обмена

import { useIntlayer } from "next-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>  );};

import { useIntlayer } from "next-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>  );};

FAQ.vue

Копировать код

Копировать код в буфер обмена

<script setup>import { useIntlayer } from "vue-intlayer";const items = useIntlayer("faq");</script><template>  <ul>    <li v-for="(item, index) in items" :key="index">      <strong>{{ item.question }}</strong>      <p>{{ item.answer }}</p>    </li>  </ul></template>

<script setup>import { useIntlayer } from "vue-intlayer";const items = useIntlayer("faq");</script><template>  <ul>    <li v-for="(item, index) in items" :key="index">      <strong>{{ item.question }}</strong>      <p>{{ item.answer }}</p>    </li>  </ul></template>

FAQ.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const items = useIntlayer("faq");</script><ul>  {#each $items as item}    <li>      <strong>{item.question}</strong>      <p>{item.answer}</p>    </li>  {/each}</ul>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const items = useIntlayer("faq");</script><ul>  {#each $items as item}    <li>      <strong>{item.question}</strong>      <p>{item.answer}</p>    </li>  {/each}</ul>

FAQ.tsx

Копировать код

Копировать код в буфер обмена

import { useIntlayer } from "preact-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>  );};

import { useIntlayer } from "preact-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>  );};

FAQ.tsx

Копировать код

Копировать код в буфер обмена

import { useIntlayer } from "solid-intlayer";import { For } from "solid-js";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      <For each={items()}>        {(item) => (          <li>            <strong>{item.question}</strong>            <p>{item.answer}</p>          </li>        )}      </For>    </ul>  );};

import { useIntlayer } from "solid-intlayer";import { For } from "solid-js";export const FAQ = () => {  const items = useIntlayer("faq"); // { question: string; answer: string }[]  return (    <ul>      <For each={items()}>        {(item) => (          <li>            <strong>{item.question}</strong>            <p>{item.answer}</p>          </li>        )}      </For>    </ul>  );};

faq.component.ts

Копировать код

Копировать код в буфер обмена

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-faq",  template: `    <ul>      @for (item of items(); track $index) {        <li>          <strong>{{ item.question }}</strong>          <p>{{ item.answer }}</p>        </li>      }    </ul>  `,})export class FAQComponent {  items = useIntlayer("faq");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-faq",  template: `    <ul>      @for (item of items(); track $index) {        <li>          <strong>{{ item.question }}</strong>          <p>{{ item.answer }}</p>        </li>      }    </ul>  `,})export class FAQComponent {  items = useIntlayer("faq");}

faq.js

Копировать код

Копировать код в буфер обмена

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

import { useIntlayer } from "vanilla-intlayer";const faq = useIntlayer("faq");faq.forEach((item) => {  console.log(item.question);  console.log(item.answer);});

Один элемент по индексу

tsx

Копировать код

Копировать код в буфер обмена

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

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

Один элемент с явным указанием локали

tsx

Копировать код

Копировать код в буфер обмена

const faq2Ru = useIntlayer("faq", { item: 2, locale: "ru" });

const faq2Ru = useIntlayer("faq", { item: 2, locale: "ru" });

Типичные варианты использования

Списки FAQ (Часто задаваемые вопросы)
Тарифные сетки / ценовые планы
Слайды каруселей / слайдеров
Пошаговые инструкции

Файл для каждой локали

Варианты